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 faster than 4 seconds. Yes, 3 out of 4 people have chronic impatientitis.
While 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:
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
-
Global Desktop Screen Resolution May 2015 – May 2016 courtesy of StatCounter.
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
-
Global Mobile Screen Resolution May 2015 – May 2016 courtesy of StatCounter.
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.
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.
Okay, let’s now consider each in turn.
(Slim-Fit) Full-Width Images
(Full-Screen) Full-Width Images
Indented Images
In-content Images
Other In-content Images
Thumbnail Images
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 except 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:
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.
Image 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 hearing 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.
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).
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.
Copyright Infringement
Lifting a product from a store and walking out without paying is a crime. So is using someone else’s image. Even if you found them on Google images. Even if you give photo credit. See this article: Google Images: Free Game or Copyright Infringement?
Bottom-line? Use your own images or source from CC0 sources. Or create your own via the magic of Canva. Or purchase Stock Photography.
In other words, you have many choices.
What are CC0 Sources?
CC0 images are images available for public use. You can go to CCS Search:
Enter your search query, make sure both boxes are ticked (permission to use for commercial purposes and modify the image) and select your category for search.
I’d still make sure that the image specifies that it’s CC0. You can’t plead ignorance if the image is under copyright.
My favourite source of free CC0 images is Pixabay. The CC0 designation is clear and they have a great range of visual media.
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
Return to the home page for an outline of our services, or compare our pricing and packages here.
