Welcome to the first part in the Web Optimization & SEO series! Throughout this series of articles, we'll be diving deep into how to improve your websites performance, usability and SEO.
We'll start out by taking a look at possibly one of the largest factors of any website when it comes to speed and performance, images.
As we all know, images play a crucial role in most modern websites and applications as they are one of the most expressive and powerful forms of communication available to us.
From ecommerce stores and retailers to blogs and estate agents, images drive the content on the web, provide valuable context, reference and infuence umong users.
Let's start with the low hanging fruit and work our way up to some of the more complex but powerful tools and practices for getting the most performance and SEO from our images on the web.
Image alt text
Possibly the fastest and easiest way to eek out some SEO performance out of your images is with descriptive alt text.
Whilst it's not going to grab you any performance gains, descriptive image alt text will help search engines understand what the image is about and by proxy, what your page is likely to be about too.
Don't try to stuff your alt text with as many keywords as possible, that's silly. Instead, try to describe the image in a short, concise and descriptive way.
<!-- Bad --> <img src="/machu-picchu-1.png" alt=""> <!-- Better, but not great --> <img src="/machu-picchu-1.png" alt="Machu Piccu"> <!-- Good --> <img src="/machu-picchu-1.png" alt="Panoramic view from the top of Machu Piccu">
A simple fix for a potentially big reward.
Images come in many formats, all of which have pro's and con's and there's simply not an answer for "What's the best image format for the web".
Use case should steer the file format you choose on an individual image basis, selecting several image formats for the job at hand.
Let's take a look at the 4 most common image formats used on the web:
JPEG or JPG stands for the "Joint Photographics Experts Group" and are commonly used all over the web and are a great choice for photos and digital photography.
- Pros - Relitively small file size
- Cons - Lossy compression, doesn't support transparancy or animation
- Use case - Photographs, real life images, smaller images
PNG stands for "Portable Network Graphics", also seen and used all over the web and the ideal choice for drawings, illustrations and graphics. Unlike JPEG's, PNG's support transparent backgrounds and feature lossless compression.
- Pros - Lossless compression, good amount of detail & colors, supports transparancy and animation (APNG)
- Cons - Larger file size
- Use case - Drawings, illustrations, complex graphics, transparency
GIF stands for "Graphics Interchange Format" and have been around for a long time. First patented in 1984, GIF's can be found all around the internet and also support animation.
- Pros - Lossless, animated
- Cons - Only supports up to 256 colors
- Use case - Small animated images, Reddit memes 😁
SVG stands for "Scalable Vector Graphics" and was developed by the World Wide Web Consortium. Unline JPEG's, PNG's and GIF's, an SVG is not a rasterized, instead it uses vectors which can be scripted and animated.
- Pros - Infinitely scalable, resolution-independent, fast, flexible
- Cons - Not an actual picture
- Use case - Logos, vector atrwork, graphics & icons, animations, effects
There's no debate here about JPG vs PNG vs GIF vs SVG. They all have thrie specific use case and you should think about what file format to use and where.
Correctly sized images
Common sense should tell you that uploading a 2540x1440px image to be displayed as a 720x576px image on your website isn't a good idea.
Correctly sizing your images to fit the content of your site will return instant perfoamance improvements as the browser isn't having to work as hard downscaling your ridiculously large image to render in a tiny area.
Resizing your images is fast, easy, free and provides a quick win for reducing load times. Just open the image in any good editor and get resizing!
Image filesize & compression
OK so you've nailed the first step of resizing the physical dimensions of your images, but have you considered the actual size of the file? I'm talking in bytes here.
Compression can dramatically reduce the filesize of your image whilst retaining most of the quality of the original.
As we've already discussed when looking over the different image formats available, you'll notice some formats are "Lossy" and others are "Lossless".
"Lossy" images degrade in quality when compressed, whereas "Lossless" image formats retain the same quality after compression. It's up to you how much compression to apply to a lossy image and decide if you're happy with the quality or not.
Again, there's no one shot answer here, it's all about experimenting and finding out what works for your images and content.
Compressing images is also pretty simple, with plenty of tools available on the web, desktop and via the command line.
Online compression tools
You'll find some great drag and drop image compressors online, consider some of the tools below for optimizing your images in the browser:
We're going to cover some more advanced compression and optimization tools later in this article.
Next gen image formats
When using some of the page speed testing tools, you may have seen a message like:
Serve images in next-gen formats
Next gen images are a group of image formats, developed to address the time taken to doanload and render an image by providing superior compression algorithms and quality characteristics.
The problem with these new formats comes down to browser support, like most fairly new technologies on the web, it takes time and agreement from the major browser developers such as Chrome (Google), Firefox (Mozilla), Safari (Apple), Edge (Microsoft) etc to implement these new file formats and features.
There's no doubt that these image formats are good, it's just there's not enough infrastructure in place to support them, yet.
These formats include:
- JPEG 2000
- JPEG XR
A great resource for comparing the latest browsers and technology is caniuse
For example, as of Jan 29 2019, Firefox has added support for WebP, whilst it's not supported in Safari and many of the mobile browsers after WebP's initial release in September 2010!
And it's not only browser support, as far as I'm aware there's not a great deal of support for working with many of these next gen file formats on your computer.
In summary, next gen image formats are coming and provide many nice features and performance bumps, but we're not quite ready for them.
Lazy loading or deferring images is the practice of only loading images when they enter the clients viewport in the browser.
For example, say you have a fairly long page with many images below the fold (Below the visible top portion of your page) you'll only want the browser to render the immidiately visible images, up at the top.
As the user scrolls down your page and brings the below the fold content into view, your images are downloaded and rendered by the browser.
This way, the page feels responsive and the user is greeted with an almost immidiate loading of the above the fold images. It's only when they begin to scroll down and bring the lower images into view that they get downloaded and rendered on the page.
Perceived load speed is critical when it comes to user retention and bounce rate. If a page feels slow and takes seconds to load, it might be too late and you've lost a user.
IntersectionObserver functionality. If you're running some kind of content management system like Wordpress, I'm sure a quick plugin search for "lazy loading" will bring up some promising results.
Otherwise, head over to the
IntersectionObserver documentation here at the Mozilla developer site for more detail and examples of how to implement it yourself.
Consider using a lazy loading library. Check out the following:
Using the picture element
<picture> tag offers a way to provide several versions of an image and allows the browser to select the best image for the given scenario.
All modern websites should be responsive, which means multiple screen sizes and resolutions, which also means images will be downscaled to whatever size of viewport the client is using.
<picture> tag allows us to provide multiple versions of the same image in varying sizes and let the browser render the best fit for that device.
<picture> <source srcset="banana-sm.png" media="(min-width: 576px)"> <source srcset="banana-md.png" media="(min-width: 768px)"> <source srcset="banana-lg.png" media="(min-width: 992px)"> <source srcset="banana-xl.png" media="(min-width: 1200px)"> <!-- Fallback if none of the media queries are met --> <img src="banana-original.png" alt="Delicious green bananas"> </picture>
We can use the
media attribute in the
<source> tag to provide breakpoints, to which the browser will render if it matches, otherwise fall back to the
Read more about the
<picture> tag over at the Mozilla developer docs here
Advanced image optimization
There may come a time when manually resizing, compressing and creating multiple versions of your images gets too much and you need to let machines do the work.
Fortunately, there are services to the rescue!
A CDN, also known as a content delivery network is a service where your images, videos and other static assets are delivered via a third party provider with servers located across the globe containing copies of your media.
If the benefits of this are not immidiately apparent, consider this scenario:
- Your web server is located in the UK, hosting all of your images, files and media
- A user in Sydney Australia is browsing your website and requesting files from over 10,000 miles away
- Your server has to send all of that data along a copper wire, under oceans, seas and across continents to reach that user
Even though electricity travels at ALMOST the speed of light, there will be some noticable delay when it comes to getting that data to your user.
That's where a CDN can become invaluable.
A CDN works by caching a local copy of your files to a server located much closer to your user. When the said file is requested, your CDN provider will deliver said media from the closest server, saving crucial time and speeding up the deliver process.
As images are often some of the largest objects send from your server, leveraging the power of a CDN is a great choice for serving them fast.
image CDN providers
There are several services that offer a CDN combined with image optimization service, effectively killing 2 birds with one stone:
Image optimization CDN
As your site begins to grow and requirements for automating the labour intensive tasks increases, you might want to consider some API based solutions for your image optimization needs:
Image optimization APIs
Most of these services are paid or have some for of subscription based model, however there are some great free and open source alternatives for optimizing your images and integrating into your workflow.
Command line tools
Command line tools work by running a command in your computers terminal or command prompt, mostly built and maintained by members of the open source community. These tools will automate a lot of the painful tasks for you and make light work of resizing, compressing and optimizing entire folders of images and can become an essential tool in your pipeline.
These tools do require some developer knowledge but should be fairly simple to implement:
- https://github.com/google/guetzli (JPG/JPEG)
- https://github.com/mozilla/mozjpeg (JPG/JPEG)
- https://pngquant.org/ (PNG)
- https://github.com/google/zopfli (PNG)
- http://www.lcdf.org/gifsicle/ (GIF)
- https://github.com/svg/svgo (GIF)
Image optmimization GUI's
If running a command in your terminal is too scary, there's always a GUI option (Graphical user interface)
Throughout your journey to optimizing your website, you'll need some tools for the job.
Google provides some nice free tools for auditing your websites images, including:
You can also fire up the Chrome of Firefox developer console and visit the
Network tab to watch your requests and review the image type, size & time to give some immidiate insight into what's happening as your site renders.