5 Tips to Optimize Your Images for the Web

1

Saving images in the proper color space

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.

2

Compress the file sizes

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.

3

Use the correct file format

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

JPG or JPEG is the most common raster file format for images.

Pros

• Smallest file size
• Best for high quality photos
• Compatible on web and any device

Cons

• Image quality can be greatly reduced if compressed too much
• JPGs do not support transparent backgrounds

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

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.

Pros

• Ability to have a transparent background for layering your image on colored backgrounds
• Can be compressed without losing as much quality as a JPG

Cons

• File sizes tend to be larger than JPG
• Does not support animation

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

GIF is a raster format that allows you to have animated images. Images are sequenced on top of each other to create motion.

Pros

• Ability to create animated images and messages
• Supports transparent backgrounds

Cons

• Image quality and file size are tied to the number of colors. More colors in the image will have a sharper image but larger file size. Less colors in the image will have a grainier image but smaller file size.
• You’re limited to using an image with 256 colors.

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

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.
Pros

• Small file size
• Infinite sizing (vector) without losing quality
• Flexibility for developers (can change settings including color and size)
• Can be edited by in a vector program such as Adobe Illustrator
• Supported in Microsoft Office products for graphics
• Can be animated

Cons

• SVG files are not ideal for displaying high-quality digital photos
• Older browsers such as Internet Explorer cannot support SVG images

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).

4

Export multiple sizes for high pixel density displays

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.

1. You can export your image with @2x and @3x scales. This means the program will automatically create a version of your image that is 2x (200%) or 3x (300%) the original size. The user’s mobile web browser will automatically display the 2x or 3x image in the same space as the original size.
2. You can export your image at a higher resolution. For example, in Adobe Photoshop or Illustrator, you can save your image at 96 or 150 PPI. Note: Your file size will be larger as the program is adding more pixels to your image.

5

Upsizing smaller images by 115%

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.

Sharp and focused images will keep eyes on the page

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.