Balancing image quality with site speed is a familiar tightrope for many digital creatives, developers and brands to walk.
A website might be chock-full of photos and graphics that dazzle the eyes — but if they slow-down that site, users will head elsewhere.
To get the best results, you need to think fast.
In this guide, we’ll go through the basics of optimising your images — so you can balance amazing creative endeavours with speedy results.
Image optimisation is all about finding the sweet spot between image data — which can slow down page load times — and image quality, which can enhance a brand or website visually.
It can also involve tweaking certain details to make your images more searchable and accessible. Tying together these different strands is essential to a high-performing and visually appealing website.
When you’re optimising images for a website, reducing file size is a key priority. Most web-based image formats feature some form of compression to help with this.
Aside from reducing file size, there are a few other ways you can optimise your images for the web too.
Optimised images lead to a better overall website performance and user experience. This could mean more traffic, sales and enquiries. Here are some of the key advantages:
There’s a lot to learn when it comes to optimising pictures. Here are a few things to think about before you start.
Though great for print, or flashy billboard advertising, high-res images are often poorly suited to the web.
The commonly held standard for web-optimised images is 72 pixels per inch (PPI). This should look great on different devices, and keep your page loads sharp. If you’re displaying your images on a HD screen, meanwhile, you can go higher.
Getting your image dimensions right is also important. For the most part, they should be relatively similar to the size at which they will be displayed. Generally, photos and graphics of around 1000 pixels wide should sit nicely on different devices. But logos and icons should be considerably smaller — normally between 100-600 pixels wide.
You’ll need to think about the compression methods of your images. Lossy compressed images are likely to load faster, but the image quality may suffer over time. Lossless files, on the other hand, may weigh heavily on your site speed.
As a rule of thumb, if you’re prioritising your creative flair — say, for a digital photography portfolio — it’s best to use lossless compression. This will not only provide better image quality, but will ensure you can quickly revert to your original images when needed. You can also use lossless files for smaller images that need particular sharpness and clarity, or need to display well on different backgrounds. For example, PNGs are a common choice for logos.
For general website use (especially for pages with large numbers of photos), choose lossy. Your users will be able to see your images clearly, and they won’t be left waiting to do so. Similarly, if you’re sending a suite of images over email, you’ll need to compress these as lossy files to reduce the file size.
There are a huge range of different image file types out there that could affect your site performance. They fall into the category of raster or vector.
Logos, graphics and animations are often better suited to vector file types. These can expand infinitely without losing resolution — and they won’t bog down your site with large file sizes either.
However, vector files can generally only capture line-based images, so aren’t a good choice for photos. They also take specialist skills to create, open and edit.
Here are a few common vector file types to watch out for:
If you’re displaying digital photography, meanwhile, you’ll need a raster file. These contains millions of tiny pixels, which combine to display amazing levels of detail. However, loading all this data takes time. Optimising your photos to 72 PPI can help speed things up.
There’s a whole host of raster file types out there to choose from. Here are some common choices:
Understanding the purpose of your images makes it easier to choose your file type, compression method and image size – all key aspects of website image optimisation
For example, a product image should have sufficient resolution for users to zoom in and out, but simple thumbnails will need far less data.
Remember to think carefully about where and why you’re using a particular image — and be sure to use pictures that are directly relevant to the intended audience.
Alt titles and tags can help you climb to the top of Mt. Google and other search engines.
Key to this is writing alt titles and tags that correlate to what your target audience are searching for. To get a handle on this, you’ll need to do some careful keyword research.
There is also help available if you need to create accessible PDFs, for example.
Discover how to measure it, change it and more with our complete guide.
After you’ve created, downloaded or edited a raster image on Adobe Photoshop, it’s easy to optimise the picture for web performance.
You can also use web editing software like Adobe Dreamweaver to experiment further with optimisation techniques. Dreamweaver lets you preview different file formats, as well as settings for animation, transparency and other effects.
On a basic level, you can compress a native .PSD Photoshop image simply by saving it in a compressed format, like JPEG. Likewise, if you wanted to save your image in a lossless format, you could choose RAW, TIFF or PNG.
You can also use Adobe Creative Cloud programmes to compress your images to specific levels.
You’ll also need to make sure to size your images correctly for different devices. For example, a narrow image might sit well on a mobile device, but it will stretch and become blurry on desktop.
To edit image dimensions and resolutions:
Not everyone who visits your website will be able to see your photos, logos and images – and image optimisation is not just about how a picture displays or loads.
People may rely on assistive technology and screen readers to understand the content of a web page. Because alt text also displays when images fail to load, it can be useful for those with poor internet connections.
To make sure your site is accessible to as wide an audience as possible, you’ll need to write descriptive alt text for your images. These descriptions should be as helpful, succinct and clear as you can make them. Keep them to 125 characters max.
Take this image below:
Here, an example of helpful alt text could be: three people sit in a classroom with bags, laptops and notepads.
A more vague, unhelpful example of alt text could be: a picture of a classroom.
Here are a few tips.
Alt text is stored in the HTML of your site, not in the image itself. If you’re using Adobe Experience Manager as your CMS platform, you can head to Advanced image properties > Description to make edits.
It’s important to use audience-relevant keywords for your image titles — not just the titles your camera assigns to the file.
Using analytics tools like Moz, Google Analytics or SEMrush can help you research keywords and find a title that fits with your audience’s search habits. For example, if your website sold wool scarves, you could name a given image red-woollen-scarf, rather than DCMIMAGE22.jpg. This not only describes the image, but will help search engines and your on-site search functions find your image.
Simply save your file on Adobe Photoshop with the name of your choice. To rename an existing file, you can use the Organiser window.
If you’ve got a high-res image that’s slowing down your site performance, it’s easy to convert it to a smaller file. To do this, you can use a number of Adobe Creative Cloud programmes, including Photoshop, Lightroom and Adobe Express.
To convert a PNG to a JPEG file on Adobe Express:
Adobe Creative Cloud can help you get the best from your images.
You can optimise a JPEG with Adobe Photoshop simply by clicking Optimise for web when you save your image. However, Photoshop and other Creative Cloud programmes also offer a wealth of more detailed optimisation options — where you can toggle image size, resolution and quality too.
When it comes to image file sizes, 200KB to 500KB is generally held to be the largest range you should use for websites. In terms of proportions, images can be as large as 2400x1600px if you want them to fill the screen, but 1000x1500px max is generally considered a fair limit for pictures on the web.
Adobe Creative Cloud programmes like Photoshop have the ease and precision you need to get your images to exactly the right level of optimisation. For quick conversions and easy image editing, you can also choose Adobe Express.