By Ryan Voorhees

As anyone who has worked on search engine optimization (or perhaps has just used the internet in the past decade or so) knows, Google is numero uno. When Google rolled out the mobile-first indexing update in March 2018, it became very important to pay extra attention to your site’s performance on mobile. Non-techies like myself may find themselves daunted about where to begin, so let’s just tackle a very visible aspect of every webpage – the images themselves!

Image Optimization
Just as you would choose an appropriate image to complement your page’s content, you should also be particular about the size of your image – not only its width and height, but the file size as well. If you are using super large photos and scaling them down to fit your user’s device, that is definitely an area in which inefficiencies can be found that not only increase page load speed, but may also needlessly waste the bandwidth of people viewing your site!

How Large is this Image, Really?
To find out the file size of an image on a website:

Hover your mouse over the image and right click
Select “Save image as…”
Choose where you want to save it – Desktop makes it easy to find
Find your saved file and right click on it
Select “Properties”
Look for Size: this lists the file size in KB

If you open this file in your computer’s default image viewer and right click, you should be able to find file info including not only the file size, but also the native dimensions (width and height) in pixels.

Our goal is to get this file size as small as possible for a lighter-weight webpage. Can you reduce the file size of an image without making your image appear smaller on the page? Yes! This is called image compression.

How Can I Optimize the Image?
One way is to make sure your image is compressed. Compression is a way to reduce the file size of an image without sacrificing a noticeable amount of quality. You may be surprised just how unnecessarily bloated some uncompressed images are – in some cases, the file size can be reduced by up to 80%! I’ve seen reductions of total webpage size by 30% by optimizing images alone, so this is an easy, effective trick to add to your SEO arsenal.

First, what type of image file are we working with? It’s probably a PNG or JPG file. JPG files have lossy compression, meaning unneeded information is deleted, while the larger PNG files have lossless compression so all data is kept. Learn more about the difference here.

There’s a simple rule of thumb I like to use when choosing JPG or PNG. Basically, I’ll choose JPG for photographs when possible since JPG file sizes are smaller. I’ll use PNG for images that need to be the highest quality or if transparency is needed. To check which kind of file your image is, right click and select “Properties” again, and look for Type of file.

Let’s Compress!
There are many compression tools out there – but I haven’t been let down yet by http://compresspng.com. Simply choose JPEG (this is the same as JPG) or PNG, drag and drop your image, and wait a few seconds while it does its thing. Save the compressed image and compare it to the original to see how much smaller the file size is.

Check Your Images on Mobile
Your webpage may look great on PC, but if it’s a mess on mobile you’ll end up turning away about 60% of potential users. Do a quick check to make sure your images are scaling properly without becoming distorted or running off the page. One way to check is by resizing your browser, but I also find http://quirktools.com/screenfly to be a helpful tool to see exactly how your page will look on various devices.

If your image is too large and not scaling down properly on mobile, try inserting this HTML code into your <img> tag:

style=”max-width: 100%; height: auto;”

You can change the percentage, or even specify an exact width and height in pixels. Just beware widths over 300px, as the image may be too wide for mobile. Here’s an example:

Let’s Talk About Scaling
If your original image is huge but it is being scaled down to a smaller size on your webpage, that is another area in which we can eliminate data waste. For instance, say the width of your original image is 900 pixels but you are scaling it to 300 pixels using HTML like the code above – the smaller image is what shows up on the page, but the person visiting your site is still wasting extra bandwidth to download the larger image before their browser scales it down.

The simple solution: resize your image to the proper dimensions in an image editor instead of using HTML to scale it. For those without access to photoshop, Microsoft paint will do but I quite like paint.net which you can download for free here. It offers a few more tools without being overwhelming for editing newbies.

What is Responsive Web Design?
Put simply, responsive design means designing your single website in a way that looks good on all devices – PC, tablets, and mobile. Having images scale properly between devices is one aspect of responsive design. I can’t do this topic justice here, but you can learn more from this great Upwork article.

Browser Magic with the srcset Attribute
The srcset HTML attribute is a way to neatly provide the appropriate resolution image for your user’s device. As I mentioned earlier, if you scale a large image down using HTML, it will use unnecessary resources on mobile. My earlier proposal was to simply edit and save the image to be small enough to fit on mobile devices. But then your image might end up looking too small on a PC!

The srcset solution: Save three resolutions, one for mobile, tablet, and pc. For instance, you could have three different sizes of the same image at 250, 500, and 1000 pixels. You’ll have to take my word that it is browser magic. Using the srcset attribute, the browser will automatically select the most appropriate image size for the user’s device. If you’re brave enough to dive into the code, check it out!

Quick and Easy?
All right, if you haven’t compressed your images yet don’t even think about srcset. To get a great start on mobile image optimization, just do these three things:

Check how your site looks on mobile devices
Make sure to compress every image
Use an editor to resize overly large images, not HTML

About the Author
Ryan Voorhees is a Digital Marketing Specialist at ChoiceLocal. He enjoys spending way too much time on the internet, discovering new music, card games, computer games, and attempting to develop his own. He even steps outside occasionally to ward off a vitamin D deficiency.