How to Optimise Images for the Web
Photography and images have the ability to make or break a website. Using professional photography over those taken on a phone will almost certainly improve how your business is perceived. On a page full of text, an image really is worth a thousand words. The right image has the power to create connections that are remembered long after they are seen.
Despite being incredibly important, images tend to be the most common factor slowing down the performance of a site. Is there anything more frustrating than watching the spinning rainbow wheel and waiting for images to load. Our shortening attention span means that if a page that doesn’t load within 2 seconds we’ll likely go elsewhere.
Slow page loading annoy and confuse not only the user, but also search engines. Google themselves have whole sections that recommend how to optimise your images and good SEO agencies know the importance of optimised images and fast loading websites.
So how can you avoid all of this and still showcase high resolution images?
Image Optimisation is the process of decreasing file sizes as much as possible without skimping on quality, to make sure the loading time stays under the highly demanded 2 seconds. This can be done either in the image creation phase or the upload phase. Here’s our step by step guide to making your way to the top.
Step One: Run a speed test on your site.
Without a benchmark, it’s impossible to measure improvement and adapt. Running a speed test on your page will analyse the content for efficiency as well as spit out feedback and areas for development.
Google provides a simple speed test tool, PageSpeed Insights, that assesses your site and provides a performance score, loading times for first and largest contentful paints, time to become fully interactive, and various other key data factors. It also provides a list of opportunity suggestions and additional diagnostics to help improve the speed of your page.
https://developers.google.com/speed/pagespeed/insights/
At Start we also use GT Metrix to measure site speed and performance. The results are often quite different from Googles test (go figure) but offer a different insight into load speed issues.
Step Two: Optimising during the Creation Phase
Image Size
It can be tempting to create images with a larger number of pixels to ensure the highest visual quality, however the more pixels there are the slower your site will be. It’s best practice to have images no larger than they need to be.
Image Dimensions
When uploading, images are often automatically resized to fit the space. More often than not this creates blurry, jagged, warped or cropped pictures. To avoid this, it’s best to create images based on the dimensions required before uploading.
File Format- PNG, JPEG, or GIF? What’s the best format for your image? Here’s a quick guide
| PNG | JPEG/JPG | GIF |
| Graphics with fewer than 16 colours or transparent backgrounds | Photographs or large/ detailed illustrations | Simple graphics
Animations |
*A little speed tip: we generally recommend using JPGs majority of the time, and only to use PNGs when the transparent background is required
Compression
After optimising the image size, dimensions and format, the last step is compressing the file to make sure it is the right size for the web (i.e. the fastest loading time possible). Compressing reduces the file size by reducing the number of colours and data, but also maintaining the quality of the image so these changes are un-noticeable to the human eye.
When Photoshop isn’t available we recommend using https://squoosh.app/ for JPG’s and https://tinypng.com/ for PNG images. If you’re resizing more than a handful of images then you can’t go past https://bulkresizephotos.com/en which allows you to resize images based on a variety of settings.
Step Three: Optimising during the Upload Phase
File Naming
Now that your image has the correct dimensions, it’s time to think about keyword crawling – which isn’t nearly as creepy as it sounds. ‘File name’ and ‘Alt text’ are picked up by search engines, so being as short and descriptive as possible is the way to go. Try to repeat relevant keywords from the written content of your pages into this section. The ‘image title’ can only be seen by users hovering over the image, and the ‘description’ is only seen in the backend of your site. Feel free to fill out these sections for your own benefit but they’re not thought to affect SEO crawls.
Plug-ins
If you’re using WordPress there are a range of website plug-ins to help you with any of the steps so far. These can easily be found online, but here are a few of the top tools.
https://wordpress.org/plugins/tiny-compress-images/
https://wordpress.org/plugins/imagify/
Loading Techniques
While there are multiple factors you can control, one that you can’t is the speed of the user’s connection.
One such technique is the ‘Blur up’ technique, which loads a faster low-quality image first before replacing it with the high-quality version when it has the chance to load. This gives the user something to look at rather than a blank screen, and also demonstrates that something is loading.
Another technique is the ‘Lazy load’, which loads the content that is immediately ‘viewable’ to the user, and then loads other images later on.
Bonus Tech Step : WebP
WebP is a modern-day image format that provides lossless and lossy compression for images on the worldwide web. A derivate of the VP8 video format, WebP was developed by Google after they acquired On2 Technologies (a video codecs business) for a small $106 million.
So it’s Just a Google thing?
No, Google isn’t the only digital platforms aboard the WebP train right now. YouTube (which maybe doesn’t count because the big G owns it), Pinterest and Facebook (on Android devices) are all using WebP.
As of December 2019, browser support for WebP is just over 80% with Chrome (obviously), Firefox and Opera leading the way. Internet Explorer and Safari are yet to support WebP, so you need to make sure you have a fallback for those browsers. (Unless you like missing images on your site that is…)
Show Us the Stats
Google claim WebP lossless images are 26% smaller in size compared to PNGs. Further, WebP lossless images can be anywhere from 25-34% smaller than its counterpart JPG (at the same quality).
When running our own compression tests with an 800 x 1300 pixel mockup of a site we built for New Homes WA, here’s the results –
- JPG: 378KB
- JPG Compressed: 81KB
- WebP: 72KB
As one would expect, the difference in size brings about a change in loading speed. When placing each of the three different images in the same blank, standalone webpage on our website, the results weren’t surprising at all.
Coming in with the fastest load time is the WebP compression at 2 seconds, JGP compressed .5 of a second behind at 2.5 seconds and the JGP original well behind at 4.1 seconds. While those figures alone might not seem that significant, imagine the impact of WebP across each page on your website and for most of your visitors… In an age where performance is so essential to organic rankings, something as seemingly insignificant as the loading speed of your images can make a world of difference in whether you strive or survive in the digital world.
How do I use WebP files?
Within the WordPress environment itself, there are many plugins such as Imagify, WebPconv and WebP Express, which can automatically convert the images into WebP for you. With most of these plugins, the conversion can be done ‘on the fly’ or in the background and cached for media serving. If you have a WordPress installation that does not support any of these conversion methods, this can be ‘outsourced’ to another system which allows the installation. This can then be offloaded to a Content Delivery Network (CDN) to even further optimise the site and speed.
Once the plugin has been configured, the integration of WebP is quite simple. You can also replace a JPG/PNG file with a WebP file automatically, and set up backwards support for visitor browsers which don’t support the next-gen format, but that’s another blog in itself!
Optimising images for the web
Essentially the goal of image optimisation is to reduce the amount of data and load time. This makes it easier for Google to see your website, and speeds up the time users take to get to the content they’re looking for. At Start Digital, we’re true optimisers at heart. We concern ourselves with optimising as much as your website as possible from standard image compression through to hosting and server arrangements. If you’re interested in partnering alongside a cutting-edge, proven and results-driven SEO agency, get in contact with Start Digital!
