Image Optimization: Image Sizing & Page Speed [ULTIMATE GUIDE]

“Image is everything!” said Andre Agassi in his 1990 Canon Advert. Find a person who doesn’t know the power of image and you’ll find a person who’s been hiding down a hole for the past twenty years. A deep dark dank hole. Visual media is unquestionably one of the most powerful means of communication in our world. And using images well can make or break a website. In this ultimate guide, we tackle the important subject of image optimization: using optimal image sizing to balance a great viewer experience with excellent page-loading speed. We also look at SEO metrics and much more.

Grab a cup of coffee. If you run a website or a blog, you’ll want to read this 🙂

This tutorial is best viewed on a desktop or tablet.

Mobile Responsiveness

Feel the need for speed? Well, when it comes to the speed at which a website’s page loads, we all want faster. Google went on record to say,

You may have heard that here at Google, we’re obsessed with speed in our products and on the web. As part of that effort, today we’re including a new signal in our search ranking algorithms: site speed.”

And that was back in the old, slow days of 2010. You know, when Superman and Batman were still friends.

Impressing Google is important, but more importantly, if your website has a slow-loading speed, you’re going to lose impatient visitors—which is the reason speed is important to Google. And let’s face it, the Internet has conditioned us to be impatient. All of us. Every visitor to your website expects fast. So, what’s the magic number?

As a rule of thumb, anything beyond 4 seconds is considered slow. MunchWeb found that 75% of visitors wouldn’t return if a site loads slower than 4 seconds. Yes, 3 out of 4 people have chronic impatientitis.

Ugg & Lee (by Craig Kirkby), ImagesWhile there are several factors that can slow down a website’s page-loading speed, “heavy” images is one of the main reasons. Plus, badly customised images also fail the responsive test; that is, what may work on your desktop may look terrible on other devices, ruining your site visitor’s experience. And given that mobile usage as now officially out-stripped desktop usage, Google actively favours responsive websites.

Responsive technology helps to manipulate an image so that it responds to multiple viewing devices (desktop, tablet and mobile, and the multiple options on offer in each category). Let’s say you’ve got a behemoth 32-inch screen and you find the perfect full-screen image for your site. You go for the largest image you can find, right? One with a landscape orientation. Something with dimensions like 3000px wide by 2000px high … which then tends to have a weight of well over 1MB (another problem we’ll get to in a moment).

Now, when half your online audience views the image on their mobiles, their devices have to do image gymnastics to get the picture to fit onto devices that are portrait in orientation. This is like trying to squeeze a square peg into a round hole. Actually, it’s exactly like this:

Mobile Responsiveness - Manipulating Image Optimization

Here’s the issue. Our desktop screens are getting wider. We just love large-screen desktops and laptops. The bigger the better. Our desktops are landscape in orientation and getting wider, but our mobiles are portrait in orientation and getting higher.

Not only will an image with these specs (3000px by 2000px in dimension and a size in excess of 1MB) make the page-loading speed on your 32-inch slow, but it will create a tremendous amount of drag on devices smaller than your desktop. This ruins user-experience and damages your page-loading speed. Both make Google frown and you don’t want to make Google frown. Ever.

Where did I get the 16:9 ratio? Glad you asked.

The most popular desktop-screen sizes worldwide over the last calendar year were (in pixels):

1366px width by 768px height … or a ratio of 16:9
1920px width by 1080px height … or a ratio of 16:9

The most popular mobile-screen sizes worldwide over the last calendar year were (in pixels):

360px width by 640px height … or a ratio of 9:16   A Complete Flip!
480px width by 800px height … or a ratio of 9:15

So, what? We need images that present landscape displays by a ratio of 16:9 on desktops, but to do a complete flip to a portrait display on mobiles?! Yikes! And this doesn’t take into account the myriad displays in-between either.

The popularity of 16:9 will continue to grow into the future especially given that 16:9 is the standardised HDTV 720p/1080i display size and it’s HD-ready.

So, gone are the days you can simply take a pic on your phone (or grab one from CC Search) and slap it onto your page or post willy-nilly. You’ll now need to think about the purpose of the image and then work towards optimal specifications.

UPDATE 14/10/2016

Google has just announced that it’s switching from a desktop-focused index to a mobile-first index. This is a game changer. It means design must now be mobile-to-desktop driven, not the other way around (as has been the case). The roll out will happen within months. While certainly not unexpected, it is a little daunting, and makes this article even more important.

Need webhosting? Get 50% off today! Only $4.95 per month.

Web Hosting

Image Orientation & Optimal Specs

Thanks to responsive technology we can still go for images that look beautiful on our desktops knowing they’ll work well on mobile. That said, on some pages it may be better to prepare an image specific to mobile. For example,  if you have a highly complex animation slider or gallery. Or if you have a row of three or four thumbnails that drop below one another on mobile and thus, occupy too much space. Or in creating a custom AMP page. In these cases, work to a maximum width of 360px for mobile display (in addition to your images for desktop display).

Okay, with that out of the way, let’s proceed. Keeping user-experience and page-loading speed in mind, first think through the purpose of your image, as this determines the orientation of the image.

Let’s start with a summary and then we’ll look at each in more detail.

Image Optimization - Summary of Image Orientation

Okay, let’s now consider each in turn.

(Slim-Fit) Full-Width Images

An image displaying optimal specs for image optimization and Slim-Fit Full-Width Images.
If you’re displaying a single image, use a width of 1366px and keep the image size below 400KB. If you’re displaying a slider of images, use a width of 960px and keep the image size below 200KB. It’s also advisable to stick to less than 6 images in a slider, especially on the Home page. (See below for more on image file sizes.)

(Full-Screen) Full-Width Images

An image displaying optimal specs for image optimization and Full-Screen Full-Width Image.
If you’re displaying a single image, use a width of 1366px and height of 768px (ratio 16:9) and keep the image size below 400KB. If you’re displaying a slider of images, use a width of 960px and height of 540px (ratio 16:9) and keep the image size below 200KB.  Again, it’s also advisable to stick to less than 6 images in a slider, especially on the Home page.

Indented Images

An image displaying optimal specs for indented images and image optimization.
If you’re displaying a single image, use a width of 1200px and keep the image size below 400KB. If you’re displaying a slider of images, use a width of 900px and keep the image size below 200KB.  Again, use less than 6 images in a slider, especially on the Home page. Remember, the amount of space allowed on each side will depend on the viewing device.

In-content Images

An image displaying optimal specs for in-content images and image optimization.
If you’re displaying an in-content image, make sure your longest side is a maximum of 300px and keep the image size below 200KB.

Other In-content Images

An image displaying optimal specs for special in-content images.
While normal in-content images serve to enrich and space text, using graphs, portfolio images (if you’re a photographer displaying a recent session, for instance), infographics and the like, serve as important components of the content itself. Hence, they’re typically larger than normal in-content images. In this case, make sure your width is a maximum of 900px. (Graphs and portfolio images tend to be landscape in orientation while infographics tend to be portrait in orientation.) Again, keep the image size below 200KB.

Thumbnail Images

An image displaying optimal specs for thumbnail Images.
If you’re displaying a thumbnail images, work to a maximum width of 1000px (because you’ll no doubt want to allow space on the either side of the end thumbnails). Divide the space by the number of thumbnails you want. Three thumbnails? Use images with a maximum width of 300px. Four images, go for 250px each. And so on. Keep images below 100KB.

Special Word on Full-Width Images

First, a quick tip. For full-screen, full-width images where you need to work to a ratio of 16:9, you may find it easier if you’re aware that 16:9 = 1.78:1. In other words, if you have the width of an image and want to know what height you need, simply divide by 1.78. If you have the height, you can calculate the width you need by multiplying by 1.78.

Okay, now to the problems with full-screen, full-width images. *Sigh*

Responsive technology is a wonderful thing and does us a huge favour. Can you imagine the alternative? Customising your image to fit every device around! And then writing the code necessary to query the right image for the right device!

However, to respond to each device, it either (1) shrinks the image and/or (2) crops the image from the margins. Hmm…

If you have a scenic image where the detail is not so important, that’s fine. But if you have an image where the detail is key, you’re less than thrilled. And if you’re a photographer where you want an image cropped precisely, your knickers are now in a knot. So, you may want to rethink the full-screen, full-width idea …  or ease up on your expectations for the image.

If you’re gungho on a full-screen, full-width look…

♦  Aim for images where your main object is well centred. And be prepared to lose an increasing percentage of your image from all sides as devices get smaller.

♦  Preferably avoid embedding text in the image, too. Why? Besides the loss of a few key words or parts of a logo, devices can also stretch and deform text.

♦  If you’re overlaying text on the image, remember mobile technology will prioritise the text over the image.

There’s yet another factor to take into account.

Google requires a portion of the content to be above the fold; that is, a portion of your content needs to be visible to a viewer before they’re required to scroll down. While we don’t know exactly how much content Mr. Google thinks is sufficient, the Page Title and the opening paragraph is a great start.

To make sure you display a portion of content above the fold, you have two options:

1.  Overlay the text on the image.

2.  Go for a slim-fit full-width image instead of the full-screen look.

For example, go for an image height of between 400px – 600px. The image will be full-width but still allow space below it to feature a portion of your text.

Finally remember, what an image looks like on your site looks different on my site and looks different on everyone else’s site except for those who have a screen that matches your size. I know this may be hard advice to accept but here goes anyway: don’t be so picky when it comes to your image’s cropping. You may slave to get it perfect on your device only to be heart broken when you get a new computer or tablet or mobile and see it’s cropped completely differently.

Image File Size

As mentioned above, a featured image (full-width or indented) should be no bigger than 400KB. In fact, you should aim for lower, as you balance quality and page-speed. I’d recommend you aim at 200KB for a featured image.

An in-content image should be no bigger than 200KB. In fact, aim for 100KB. For thumbnail images, aim for 70KB.

Why so low?

An image is considered “heavy” over 400KB. And if you’ve got several images on a page and multiple images on your site, you’re going to chalk up some serious page and site weight. Going for image quality, you can actively work against your site providing a good user-experience and its chances of ranking well in search results.

I’ve gone with 400KB for featured images and 200KB for other images because you’re guaranteed to maintain great image quality at these files sizes while managing a decent page-loading speed. And since I work with a lot of photographers, the images are of critical importance. If you’re site is content focused and images are less important (all images are important), aim for smaller file sizes.

How do you make an image file size smaller? Compress it. How?

Either use Photoshop to compress your images … or use the magic of TingPNG to do so. Simply drag and drop your image into TinyPNG, and watch your image shed those KBs.

For images already on your site, you can install the TinyPNG plugin (if you’re using WordPress). You’ll have to sign up to get a API key which needs to be added in your website’s WordPress dashboard to the Media Settings (SETTINGS → MEDIA). You get 500 free compressions a month, and you don’t have to add your credit cards details unless you’d like to do more than 500 compressions.

Note, you’ve got 500 free compressions, not 500 images. Unless you uncheck the default setting in the Media Settings (and select the Original image only), every time you compress an image, it will compress all four versions. It’s your choice how you want to handle this. I highly recommend that you only select the following settings:

TinyPNG Optimal Settings

What about DPI?

This isn’t technically a factor when it comes to online images since DPI refers to the resolution of printed images. You’ll have to play around with it in terms of your own online versus print policy.

Image Optimization: The SEO Treatment

Search engines cannot see images. But they can read one. And if you’re smart, you can dish up the script you want them to read by doing three things:

Image Name (on your computer)

Rename the original image on your computer using a variation of your keyword phrase. For example, let’s assume my keyword phrase is “wedding photography Torguay”. Renaming my image “Wedding Photography Torquay, Beachfront 023” is so much better than IMG_023.

You don’t have to worry about punctuation or even full sentences. Just make sure your keyword is in the name and it has a modifier to distinguish it from similar images. The image number 023 may help you distinguish images from others.

If you misspell your keyword, you’re shooting yourself in the foot.

Mastering WordPress 17Image Title (in your post)

When uploading the image to your site, fill in the Image Title using the Image Name. Most site’s will do this automatically, but check that it’s correct. Since I’m a little bit of a perfectionist, I’d trim off the image number and have an image title like this: “Wedding Photography Torquay Beachfront”.

Alternate Text (in your post)

Alternate text (or Alt-text for short) is the text that appears should the image fail to display on a viewer’s device (typically, if the image reader is out of date). It is also used for those who use computers configured for the visually impaired. It serves to identify what the user cannot see. Just as importantly, along with the image name and image title, it is how Google reads an image.

In adding the image to your post, fill in the Alt-text field with a punctuated, full-sentence description of the image using your keywords. Yes, this is now the third label required.

For example, I might write, “A picture of a stunning couple on the beachfront for wedding photography Torquay”.

So, images are the one place that you get to tell Google whatever you like … and they have to believe you.

Feel the power?

Social Media Images

You’ve got all your images sorted on the main pages of your website and for your blog posts. Great. Now you want to post your links to social media. What happens?

When you paste your post’s URL into a social media thread, it scrapes the meta data from your post and displays an image and an excerpt of your content. (If you’re using WordPress, it will scrape your carefully crafted Meta Description from your Yoast SEO plugin).

It goes without saying that posts on social media that contain an image are far more likely to be viewed and shared.

On Facebook, for example, you have two options.

A small square image viewport.

Facebook Small Square Image

To display this small square image on Facebook, the image must be smaller than 1200px by 630px.

If you want an image like this included in the scrape, its shortest side must be at least 200px.

A large landscape image viewport (recommended).

Facebook Large Landscape Image

To display a large image on Facebook, the image needs to be at least 1200px by 630px. (Statistically, this larger image is more effective than the smaller one.)

You can either add the image to Facebook manually, or if you want the image scraped into your feed when you post your URL (and use WordPress), you can add the image to the “featured image” section at the required dimensions.

How about other social media platforms?

Make a WebsiteHub has done a bang-up job of creating a cheat sheet for many social media platforms.

Wow. Was that a little disturbing?

I know photographers hate to hear the phrase “image cropping” and we all certainly don’t like to hear our images called “fat” 🙂

However, the take-away value from all this is simple:

Specifically prepare the images you want featured on your website to cooperate with responsive technology.

That means photographers, don’t just pick your best images (which are typically customised for client presentation), and slap them on your website as a featured image.

SOURCES

Google: Using Site Speed in Web Search Ranking
Hobo-Web: Your Webdesign should Load in 4 Seconds
Google: Make the Web Faster
Malama: The Best Full Screen Backgrounds Image Sizes
Moz: Site Speed: Does It Matter?
Search Engine Land: Google’s Push to Speed Up Your Website

Call-to-action, Subscribe to our Monthly Newsletter




Return to the home page for an outline of our services, or compare our pricing and packages here.
The iBoss Dilemma (Survival Kit for the Self-Employed)

Get Craig’s new book…

The iBoss Dilemma (Survival Kit for the Self-Employed)

Read More

The eBook version is available from…
Amazon.com.au
The Paperback version is available from…
Amazon.com