A picture can speak 1,000 words. Images are more important than ever in conveying your message. However, images improperly exported can look low quality, cause your site to load slowly and lose engagement from users. Here are some tips you can use to make sure every graphic is beautiful and crisp.
There are two color spaces computers use to display images: RGB and CMYK. RGB (red, green, blue) is the standard color space for digital devices. By default, any image created by a camera or computer is saved in this color profile.
However, you may have images that are CMYK, a color profile used by printers. Before using these images on the web, a program such as Adobe Photoshop can convert the colors to RGB so your images are vivid and bright.
To convert a CMYK image to RGB, open the image in Adobe Photoshop. Go to Image on your menu bar, and in the dropdown hover over Mode and select RGB Color. This will convert the image to the RGB color space and you may notice some colors are more vibrant. Next, go to File then Save As and save the file. Be sure to change the file name so you or someone else knows it is a file for digital applications.
When saving images for the web, we recommend the file size should be less than 2MB (2048 kilobytes) to maintain fast page loading speeds. That being said, we also want images to be sharp and not pixelated.
Image quality is contingent on factors such as the final file size and compression settings. With the right compression settings, you can achieve good image quality and a small file size. Generally, you can save a file with an image compression level between 70-80% without seeing pixelation, or the individual points of color.
Note: The amount of compression will vary on a number of factors including the original image’s file size and format. You can use a free tool such as Imagify to further compress the file size.
There are four major file formats for saving out images and graphics for the web: JPG, PNG, GIF and SVG. Each file format has its benefits, drawbacks and intended use case.
Your image or graphic should be saved to a particular format based on if it’s a raster or vector. Raster images are created with pixel-based programs or captured with a camera or scanner. These images have a finite number of pixels and can lose quality when scaled larger.
JPG, PNG and GIF are formats best suited for raster images. Vector graphics are created with vector software and can be infinitely sized without losing quality. SVG and GIF are best suited for vector images, while you can also save a vector graphic as a JPG or PNG, however you lose the ability to scale your graphic infinitely.
JPG or JPEG is the most common raster file format for images.
When to use JPG
JPGs are best for non-moving photos and other files that don’t require transparent backgrounds. Avoid using JPGs on colored backgrounds.
PNG is another common raster format that is more versatile than a JPG. PNG can support more colors (over 16 million) and support transparent backgrounds, or an alpha channel.
When to use PNG
PNGs are best for graphics with sharp edges, text graphics, logos, icons and other designs. Use a PNG for graphics that need to be placed on non-white backgrounds, such as all-white logos on a black background.
GIF is a raster format that allows you to have animated images. Images are sequenced on top of each other to create motion.
When to use GIF
GIFs allow you to have the flexibility to display multiple images and interesting transitions in the same graphic. However, avoid using photos and graphics with many colors if you need a small file size.
SVG is a vector format that allows you to have sharp graphics and manipulatable objects on the web. SVG can be created and edited in vector programs such as Adobe Illustrator or Figma.
When to use SVG
SVG can be used for logos, icons, graphics and other illustrations used on the web. Graphics can be stretched and compressed without compromising quality and look great on mobile devices with high pixel density displays (see more below).
As mobile devices have become the preferred device for users to view digital content, they have higher resolution screens than the typical desktop computer. These HiDPI, Retina or high density displays have more than 200 pixels per inch (PPI). The standard for web and most desktop computers is 72 PPI. If a user views a 72 PPI image on their mobile device versus a computer, it will not look as crisp as an image saved out with more pixels.
There are two ways programs such as Adobe Photoshop and Illustrator can save out your images and graphics to accommodate mobile and desktop browsers.
If you have a small raster image that you need to resize to be larger, you can incrementally upsize it by 115% in Adobe Photoshop. This will reduce the amount of pixelation that will occur as you increase the physical size of the image. To do this, open your image in Photoshop. In the menu bar, go to Image and select Image Size. In the dialog box, under Width and Height, change the units to Percent and then type 115% in both of the fields. Make sure the box is checked for Resample and Bicubic Smoother (enlargement) is selected.
Using these tips will ensure your images and graphics are exported to the correct format and retain the quality of the message that is presented. Not only will your organization look more professional, it will also make your creative partners happy when you provide them with the correct assets.