Images don’t seem too complicated, but it’s only when something goes wrong that you realize “hang on, do I actually know what I’m doing here?!” We’ve taken it back to basics by compiling a list of everything you need to know about image optimization to get started online.
Image Types
There are three commonly used image file formats that you need to know:
JPG (.jpg, .jpeg)
- Used for photographs and complex graphics (such as detailed infographics)
- Has very good compression allowing you to have a smaller file size without losing on quality
- Doesn’t support transparency, meaning your photos will have to have a background
PNG (.png)
- Used for simple graphics (such as graphs or logos) and images that need to have a transparent background
- Keeps the quality high, but file size can differ greatly depending on the amount of detail and colors in your image
- There’s also a difference between PNG-8 and PNG-24 – PNG-8 supports only 256 colors, which limits your options, but also gives you a smaller file size
- Use for very simple graphics with a limited color palette, such as flat-colored logo
If you’re unsure if a certain graphic should be saved as a PNG or JPG, save both and check which one has a smaller size without losing on quality – a smaller file size means it will load faster on your website.
GIF (.gif)
There’s a worldwide debate about how to pronounce gif… The creator of gifs dropped a bombshell saying that it’s pronounced JIF, but the majority of people say he’s wrong (because on the internet, anyone can be right, right?), including Barack Obama.
There are a thousand reasons why it should be pronounced GIF with a hard G – the G stands for Graphic, not a Japhic. Also Jif is an American brand of Peanut Butter. A VERY different thing. But try telling that to someone who is adamant it’s pronounced JIF. We’ve just had a heated debate in the office over this. Moving quickly on…
GIF has only 256 colors and can produce weird results when used for photographic images, but it supports animation, which is the main thing people associate the format with.
Size and Resolution
Never upload high-resolution photographs into your website (unless you know that the platform you’re using will compress and resize them for you).
Even if the code will shrink the image to fit within the smaller dimension, the browser still has to download the full-sized image, which will affect the speed of your site dramatically. A slow site is punished by Google as it’s bad SEO practice (meaning your site may not rank highly in Google searches).
Ensuring you have small file size (but still high quality) photos on your website is especially critical on category pages, or any other place where there are multiple images – even a slight increase in size multiplied by the amount of images can impact your overall page size greatly.
What’s a good file size?
Anything below 100kb should be okay. It may be difficult to achieve on large graphics, like hero banners or background images, but just try to find a good balance between file size and quality – remember that some images may be used as banners which span the width of a screen.
If you have Photoshop, it has a very handy export tool which will show you the file size as you increase compression/decrease quality. This tool allows you to tell how much you can save without impacting the quality too much. If you don’t have Photoshop, there are plenty of online tools too:
Alt Tags
An alt tag is a text alternative to an image that is stored within your website’s code. Alt tags are important for two really good reasons: accessibility and SEO.
Accessibility
Alt tags are super useful to those who use screenreaders – screenreaders will read out the alt tags to them; people who switch the images off for a distraction-free reading – they’ll benefit from the alt tags too as they’ll be displayed instead of images – giving everyone a good oversight as to what is on the page, including the images.
SEO
As Google can’t ‘read’ your images, you need to provide it with a text alternative that will tell them what is the image displaying.
Best practice is to use descriptive alt tags that include your keywords, but only if it’s part of the description (keep in mind people with screen readers!), for example, instead of saying ‘Travel mug’ your alt text could say ‘Blue travel mug with a floral print and plastic lid’.
It’s also good practice to include those keywords in your image file name if that’s possible, so instead of ‘IMG23453.jpg’ call it ‘blue-travel-mug-floral-print.jpg’.
So there we have it – the very basics of how to use images for the web – no go forth and conquer optimize…
