Optimizing Images for Websites

Photo optimization is the process of formatting our images to display with high quality, while not slowing our webpage down. Images are an important part of the user experience. However, high quality images have large file sizes that can bring your page to a halt.

Let's look at how image file size impacts the health of our website and how we can improve it.

Visitor Impact

Websites need to be fast to provide a user-friendly experience for our visitors. Image file size directly impacts how long it takes a webpage to load.

We know how frustrating it can be to find ourselves waiting on a web page to load. Keep in mind, not everyone is visiting our website over a high-speed internet connection.

Slow load times can equate to a 'bad website' in our minds, even if it contains the most relevant and accurate information to our search.

The average loading speed for a web page is 10.3 seconds on desktop and 27.3 seconds on mobile. However, studies show that after 3 seconds of waiting visitors begin leaving.

This is known as the bounce rate and plays a role in SEO rankings. If people continuously leave your website within a few seconds, Google will figure the site does not contain useful information and down-rank it.

At 3 seconds we can see 11% of visitors will grow impatient and leave our site if it hasn't fully loaded yet. At 5 seconds we can see this has drastically jumped to 38%.

We can have a rock star website, but if it takes 5 seconds to load an average of 38% of visitors will leave and never see it.

SEO Impact

Search Engine Optimization helps our webpage place #1 in search results when someone searches keywords related to our business.

Google states it uses the following information to decide what websites it returns in search results:

• The site is usable on all browsers
• The site displays properly on all screen sizes and devices
• The page loads quickly on slow Internet connections

If our webpage is slow, Google will select a webpage that is more accessible.

How to Optimize Images

Now that we know how important web page load time is we will cover three areas to optimize images for the web.

• Image Size and Resolution
• File format
• Compression

These strategies will ensure your images are well balanced between quality and small file size. We will look at each of them in detail.

We will be using Adobe's PhotoShop to optimize this adorable penguin image, but the process will be similar among most photo editing software.

Our penguin image is currently 6000 x 4000 pixels and has a file size of 3.01 MB. This is quite large and we would not want to display this on a webpage before optimizing it.

Adjust Image Size

Images captured with digital cameras or smart phones typically have dimensions over 2000 pixels. However, the majority of images we display on a webpage will have a width of 800px or less.

A good habit is to resize our images to the width they will be displayed at on our webpage.

STEP BY STEP: Resizing an Image

We have our image open in Photoshop. First, select Image and then Image Size.

Selecting this will bring up the Image Size properties window. For this example, we will resize the image to 640 x 426 pixels.

Our file size has been reduced from 3.01 MB down to 100 KB. This is a significant difference already, but there are two more strategies we will use to reduce it further.

Image Resolution

Resolution is measured in DPI (Dots Per Inch) and applies to print images. PPI (Pixels Per Inch) and applies to images on the web.

It is best practice that images for print have a resolution of 300 DPI and that images for the web have a resolution of 72 PPI. For the web, this provides the best balance of file size and quality.

STEP BY STEP: Adjusting Resolution

To adjust the screen resolution, we again select Image and then Image Size, bringing up the Image Size properties window.

This image already has a resolution of 72 PPI, so we do not need to change it. Our file size will remain the same for this image after this step.

File Format

Choosing the correct image format will help ensure our file size is no larger than necessary. The formats that are best suited for web images are JPEG, PNG, and SVG. Let's look at each of these in more detail.

JPEG

Short for Joint Photographic Experts Group, JPEG is a great choice for photograph graphics, full of color and shades. JPEG does not support transparency.

Example: Our penguin picture is an image we would want to save as a JPEG.

Side note: JPG and JPEG are the same in every way. Two versions exist because earlier versions of Windows required a three-character file extension. JPEG was shortened to fit, but modern Window and MAC systems accept longer file extensions and we saw the return of JPEG.

PNG

Short for Portable Graphics Format, PNG is a great choice for web graphics, illustrations, or graphics that require transparency.

Example: Our file properties image is an image we would want to save as a PNG.

SVG

Short for Scalable Vector Graphics, SVGs are the best choice for icons, logos, and vector illustrations. It also supports transparency.

Example: SVG is best used for graphics that are made of lines and shapes.

Compression

Lastly, we will talk about compression. This process occurs when saving and exporting our images. There are two common compression types: lossy and lossless. Let's look at each of them closer.

Lossy

• Permanently removes unnecessary data
• Loss of quality each time edited
• Always keep original copy of image
• Smaller file size
• JPEG is lossy

Lossless

• Does not remove data
• No loss in quality
• Decompressed data same as original
• Larger file size
• PNG is lossless

After we compress our image we end up with a file size of 80KB.

Conclusion

Our final image has been reduced from 3.01 MB to 80 KB and will display with good quality up to a width of 640px. How you optimize an image will vary depending on the image's purpose.

We display images on our websites to enhance the user experience. However, if we do not take time to optimize our images, we could be delivering unpleasant encounters.

If we are delivering disappointing interactions with our audience and being ranked low by search engines, we will see lower traffic to our website.

Let's stop the domino effect and start optimizing the web, one image at a time!