4 image size tips to increase website speed

May 22, 2017 | Create Confidently

Why image size matters

One of the most important factors in your website’s load speed is the way that you use images. And image size is by far an image’s most critical characteristic affecting speed.

You probably already know how vital images are to content marketing. If you don’t, please check out my lesson on creating visual content.

But why should you care about image size? For maximum visual impact wouldn’t you want your images to be as large as possible?

As it turns out, you don’t.

Those large images can really delay page loads on your website. And according to Aberdeen Group, even a 1-second delay can reduce viewer satisfaction with your site by 16% and page views by 11%.

Beyond that, a slow website can hurt your Google search engine ranking, making your site harder to find.

When you’re building a business, you can’t afford those kinds of hits.

Tools to manage image size

You don’t need to be a Photoshop expert to manage images for the web.

Instead I’m going to show you how to use simple tools such as Apple Photos, WordPress and a free WordPress plugin to manipulate image size for faster loads. But the concepts are fairly universal, so even if you use other graphics tools (including Photoshop) you can implement the same tips.

Image size defined

Before we get started, let’s look at what “image size” really means. To effectively manage image size and improve your site’s load speed, you’ll want to pay attention to four things:

Image dimensions

This is the width and height of an image. For images placed on a web page this is usually measured in pixels (dots) for each dimension, such as 640x480 pixels.

Image resolution

This is the density of pixels in an image. The more pixels per square inch, the higher the resolution – and the slower the load time.

Image compression

Adjacent pixels with identical color and other identifiable patterns can be represented as a formula using compression software, reducing the file size of the image.

Image selection

Your website publishing platform usually makes multiple sizes of each image available for selection. In WordPress, for example, you can select from four image sizes in the Media Library.

Tip 1. Optimize image size by reducing image dimensions

The best image size in terms of width and height depends on your use of the visual on the page. For example, a header across the top of a page obviously needs to be wider than a small picture embedded within the text of a blog post.

As a good rule of thumb, use the smallest width necessary for your intended use. If your image will only stretch across one column in a multi-column page layout, you don’t need a 5000-pixel-wide image!

As another good rule of thumb, manipulate the image size dimensions before you upload it to your website.

Editing tips

I use Apple Photos to import and edit most of my web images, but you can use any typical image storage or editing application.

Crop the image first to remove unnecessary visual information.

Then export the image and set its maximum width.

In this example, I’ve chosen a maximum width of 1080 pixels for what was originally a 2560 × 1440 pixel image.

What’s a good width?

Many PC monitors display 1080 pixels or more full-screen. However, it’s unlikely your image size needs to be any wider than 1080 pixels. Even when viewed on wider displays, your image quality won’t suffer much. (Photographers and artists might want to aim for 1280 or even 1920 pixels to maintain image quality).

When you want an image to fill only part of the screen, such as in a multi-column layout, the width can be even less. Simply multiply 1080 (or your chosen maximum) by the fraction of the screen width you want to fill. For example, each column in a two-column layout needs ½ the screen. ½ x 1080 = 540 pixels width required for your image size.

Hint: It’s ok to use an image size slightly wider than the exact amount needed. Most good WordPress themes will simply shrink your image slightly to fit the layout. The marginally bigger width won’t affect your page load speed very much. But if you size an image narrower than it needs to be, your images might not fill the space and won’t align very well on the page.

Image size for the Divi theme

Divi, the WordPress theme from Elegant Themes that I use and recommend, has a handy set of image size templates available for each of their various column layouts. Here’s their set of recommended widths, which also allow for a gutter (space) between the columns:

1 column: 1080 pixels

¾ column: 795 pixels

⅔ column: 700 pixels

½ column: 510 pixels

⅓ column: 320 pixels

¼ column: 225 pixels

Tip 2: Optimize image size by reducing image resolution

Today’s digital cameras and smart phones take incredible high-resolution images. That’s great if you want to print an image in a large format or view it on a hi-definition TV.

But for most web-viewing uses, the resolution of original photos is higher than needed – and will likely slow down web page load speed.

Editing tips

To reduce the image size of hi-res photos, I choose the JPEG format and a medium resolution when I export from Apple Photos. Most other image storage and editing apps also support exporting JPEG files at reduced resolution.

To find what works best for you, export an image at different resolutions. Then examine the file size on your storage drive and see what the image looks like on screen.

If the lower resolution doesn’t detract from acceptable viewing quality and the file size is 100KB or even less, you’re probably good. I’ve gotten decent results from full-screen files under 100KB and partial-screen files under 20KB.

Again, the smaller the file size the faster the page load!

Tip 3: Optimize image size with compression

The JPEG format inherently compresses image files. So using that format is a good start toward smaller image size.

For even more compression, I use a free WordPress plugin called WP Smush (love that name).

WP Smush doesn’t require much work on your part – just set it and forget it.

  • It automatically optimizes your images as they’re added to the WP Media Library using advanced compression techniques.
  • It works with JPEG, PNG and GIF formats.
  • You can even set maximum width and height parameters so your image dimensions are reduced before being added to the Media Library.

WP Smush works best if you’ve already reduced the resolution of your images (see Tip 2) before uploading to WordPress. The free version works on files up to 1MB so large original images may not be processed.

The Pro version removes that restriction, processing files up to 32MB in size. WP Smush Pro also uses a “super” compression algorithm and can smush image files in bulk.

Tip 4: Optimize image size by selection

Once you upload an image to WordPress it’s placed in the Media Library. From there you can select an image for placement on your web page.

Here’s what the CMS Media Library looked like a few days ago:

WordPress maintains four different image sizes for each item in the Library: Thumbnail, Medium, Large and Original.

You can affect the image size on your page by choosing one of these options when you insert media in your page or post. Simply use the drop-down menu for an item to choose the size you need. As a reminder, choose the smallest image size necessary for your intended use.

Use these image size tips in combination

For best page loading results you should use all four of these tips together.

  1. Set image width to the smallest value necessary for your layout
  2. Reduce image size by using the JPEG format at a medium resolution
  3. Apply additional compression with the free WP Smush plugin
  4. Choose the correct image size from the Media Library

I’ve dramatically improved page load times on a number of web sites by applying these four techniques.

Please let me know how they work for you. Also, if you’ve got additional image size tips or suggestions please share them with the CMS Community. Thanks!

Online Learning -- Totally Free

 

One content marketing lesson a week, gratis.

Join the class. It couldn't be simpler!

Pin It on Pinterest

Share This