As audiences become more aware of what makes a website terrible, brands are increasingly judged by the kind of web experience they provide. So we’re looking at images today.
Specifically, how we recommend you treat your website images to help you offer the best experience to your users.
Choosing the right file format
Most of the time, you’ll only have to deal with two formats, JPG and PNG.
JPG or JPEG — use this format for photographic images or large and detailed illustrations. It’ll give you optimal results in terms of colour and clarity while keeping the file size as low as possible.
PNG — recommended for graphics, like buttons, irregular shapes and patterns with large patches of flat colour. The PNG format also lets you save images with a transparent background.
If you’ve been using the internet for a while, you’ll have also heard of the GIF format. GIFs were used for simple graphics and transparent images (and mis-used for photographs) before being superseded by the superior PNG format. These days, GIFs are more commonly reserved for animated images.
Choosing the right filename
Search engines don’t just catalogue your page content, they crawl your images too. So it’s generally a good idea to give your files descriptive names, using a main key phrase — it helps the likes of Google figure out what your image is about without having to look at it.
For example, if your image shows Notre Dame Cathedral against a Paris sunrise, your main key phrase should be “notre dame”, as this is the main subject of your photo. Start your filename using this main key phrase.
As an added bonus, this approach to naming files should also make life easier for you and your team, when searching through your CMS library for a particular image.
Optimising your image file size
Photoshop — Save for Web
Although we use Adobe Photoshop as an example, this process should apply to any decent image editing software with Save for Web/Export for Web capability.
1. First, create a new document (Photoshop > Create a New Document) using the same dimensions recommended by your CMS template. In this example, we’ll use 1000 x 600 pixels.
2. File >Place Embedded:
3. Adjust the image to fit the right dimensions. This lets you choose what is kept and what is cropped by the frame.
4. File > Export > Save for Web
5. Select JPEG as your image format, High for image quality, double-check your image dimensions, then Save.
The original image stood at 16.5MB in size, 5184 x 3456 pixels in dimension, with a very non-descriptive filename of Dksk8szLRN0.jpg. The optimised image ended up just 137KB in size, a far more practical 1000 x 600 pixels in dimension, with a more descriptive filename of japanese-koi-carp-lilypond.jpg.
At this stage, the quality of your image is still very good. So good, you may even be able to optimise it further with a secondary tool — we like Squoosh.app for this — without sacrificing too much quality. This can often depend on the type and content of your image, however. Some images can only be optimised to a point before they noticeably degrade. We’d recommend secondary optimisation on a case-by-case basis.
But for reference, our super optimised image (using Squoosh), keeping the same dimensions and filename, weighed in at 66KB in size.
No Photoshop? No worries…
If you don’t have an image editing app that can save for web, don’t sweat it. ImageOptim is a free online tool that’ll get the job done at a pinch.
1. Upload your image to imageoptim.com/online and submit the file with the following settings:
2. Then, for a second pass, upload the optimised image to Squoosh.app.
3. Drag the quality marker down to somewhere between 55 and 65. This is about as low as you can go with web images before the visual degradations really become noticeable. You’ll need to adjust your image dimensions separately.
Fixing your image dimensions
Uploading your images in the correct dimensions is preferable for two reasons:
One — if you upload your image at bigger or smaller dimensions than the space designed for them, the CMS template used for your website might automatically resize it for you. Sounds good in theory, and you can get away with it sometimes, but all too often, you’ll end up with an image that looks blurry, jagged or completely warped.
Two — your CMS template might instead crop your image to the dimensions of the space. This means if you upload a portrait image to a space made for a landscape shot, your site will decide for you what parts of the image to present to your audience. Again, nice in theory and great if you’re lucky, but this won’t always work the way you want.
Our Photoshop — Save for Web instructions earlier in this post covers how to create an image with the right dimensions. If you don’t have access to photoshop, we recommend Croppola.
To sum it up:
When optimising your website images, here’s what counts:
- Format — Use JPG (or JPEG) for photos and PNG for graphics.
- Filename — Give your image files meaningful filenames. It’s a convenient lifehack and better for your SEO.
- File size — Use Photoshop’s Save For Web, ImageOptim and/or Squoosh.app to optimise your file size. This will make your images faster for users to load.
- Dimensions — Crop your images to fit the dimensions of the spaces built for them. This gives you more control over the quality and content users will see when they load the page.