Images play a crucial role in web design, providing a website with aesthetically pleasing and visually appealing elements. However, trying to balance image quality and page speed is a problem many people experience. To help, here are 7 tips for optimising images in web design.
Why are images important in web design?
There are many reasons why images are important in web design. Aside from the obvious aesthetic appeal, images convey messages much quicker than any written copy. To put this into perspective, the human brain processes visual images in 13 milliseconds. That’s fast going!
Compare that to any written copy; you won’t have even read the first word in 13 milliseconds. Incorporating images into your web design helps users understand key messages quicker and easier. Images also convey messages more succinctly and are remembered better by the brain.
Another reason why images are important in web design is to appeal to younger users. Research indicates Generation Y (those born between 1982 and 1994) prefers communication through images rather than text. If your website aims for this age demographic, it’s worth considering!
User experience is a vital factor to any website that determines how easy or pleasing a website is for a user. The higher the user experience, the better. Incorporating images into your website is a great way to boost the user experience while delivering excellent, high-quality content.
Some other reasons why images are important in web design include:
- It helps to elicit an emotional response.
- It allows a user to see a product and increase sales, which is particularly important for e-commerce.
- Using relevant images or infographics increases page views.
- Boosts your search engine optimisation (SEO).
- Fuels your social media content.
- It’s a popular web design feature with users.
How do you choose the right images?
Your choice of images dramatically affects how much your website will benefit from any of the above. The wrong choice of images can have adverse effects. Using a professional photographer is costly, so many web designers will turn to stock image sites like Unsplash or Pexels.
But with thousands upon thousands of images to browse through in stock libraries, you can get caught up spending too much time sourcing the right images. So, how do you choose the right images for your site? Fortunately, there are a few pointers you can use to help:
- Choose images appropriate to your brand, content message, or page goal.
- Avoid cliches and images that have been used lots of times
- Where on the website is the image being used?
- What message do you want to send to users?
- Choose a balanced image that is not cluttered.
- Maintain consistency with your brand and tone.
Tips for optimising images
Now that we’ve covered why images are important in web design and the considerations for choosing the right images, here are the tips for optimising images in web design:
- Vector or raster images
- Choosing the right file type
- Compression and quality balance
- Choosing between lossless and lossy
- Adjusting the image size
- Last loading images
- Image sitemap and alt text
1) Vector and raster images
The first tip for optimising your images in web design is to pick between vector or raster images. Usually, the images you use on a website will be raster. However, some instances may be where using a vector image is better.
Raster images are made up of pixels that combine to make up an image. The higher the resolution of an image, the higher the pixels per inch (PPI). Images with a high PPI (such as 300 PPI) will take much longer to load and process than images with a lower PPI (such as 72 PPI).
Vector images, on the other hand, don’t use pixels to form an image. Instead, they are computer-generated images created through commands and mathematical sequences determining the lines or shapes within an image space.
Due to how vector images are made, these images are scalable. This means there will be no loss of resolution, however big the image is. This differs from raster images, where the quality decreases as the image is scaled larger.
Animations, graphics, and logos are suited better for vector images as they provide greater design flexibility without bloating file sizes. All the other images on your site will be a raster file type, as digital photography is naturally raster.
2) Choosing the right file type
The next step in optimising images in web design is to choose the right file type. While you may think it makes little difference, your choice of file type can affect the file size and quality. There are also different file types for vector and raster images.
Firstly, let’s cover the vector file types. The most widely used is SVG, used for most 2D illustrations. The SVG file type is the most widely used vector file type due to its web friendliness. Typically, you can use the <img> tag like any other image.
However, EPS (or Encapsulated Postscript) is another vector file type. EPS files are similar to SVG but have a much larger file size. While mainly used for printing, it is still possible to use EPS files for vector images that combine graphics and text.
When it comes to raster images, your choice of file type makes a significant difference:
JPEG (or JPG) is the most common file type used on the web and digital cameras. JPEGs have a 10:1 compression rate, meaning quality loss can be easily seen. While easy to edit, it’s impossible to regain quality lost through compression.
JPEG 2000 is like ordinary JPEGs but offers both lossy and lossless compression.
PNG, or Portable Network Graphics, is another widely popular file type. Unlike JEPG, PNG supports lossless data compression and transparent backgrounds. For those reasons, PNG is the favoured file type for web professionals.
GIF is also a raster image type you choose. The GIF file type is mainly used for light animations like memes. However, they can also be incorporated into other small animations in a web design, such as moving emoticons. GIF images have 8 bits per pixel and can support lossless compression.
WebP is a relatively new image type developed by Google to replace previous file types, such as JPG. WebP supports both lossy and lossless data compression alongside alpha transparency. This file type aims to reduce the file sizes for online images for faster loading times.
3) Compression and quality balance
Once you’ve decided on your file type, it’s time to compress the image to reduce the file size. However, you must be careful about how much you compress the image, as the quality can suffer. The greater the compression, the lower the quality will be.
Ideally, the best recommendations for compressing images for use online without any significant quality loss are:
- Keep the file size between 100 KB and 600 KB.
- Optimise images to 72 PPI.
- Decide between lossy and lossless compression.
- Choose a suitable compression tool.
Here’s an example of the difference compression can make to an image. The first image is a JPG file with a file size of 359 KB without any additional compression.
However, if we compress the image to the lowest possible quality, the file size decreases to 54 KB. However, the image quality greatly suffers and is now pixelated, affecting the quality.
Many compression tools, such as TinyPNG, ImageOptim, JPEGmini, and Image Optimizer, are available online. However, Mac and Windows photo apps have options for compressing images that suffice. You can find out how to do this from the official sites:
4) Choosing between lossless and lossy
You’ve probably heard of lossless and lossy compression exist, but what exactly do they mean? Well, this is another tip for optimising your images in web design. Just like audio files have lossless (FLAC) and lossy (MP3) compression that affects quality, images do too.
Lossless compression is a type of image compression that allows you to keep the same image quality even after compression. This method of compression will only compress data instead of removing it. This makes it possible to decompress compressed images without any quality loss.
Lossy compression, however, compresses images by removing some of the image’s data. As a result, the quality of an image will suffer depending on the amount of compression applied. As data is lost from compression, restoring the image’s original quality is impossible.
Images will be subjected to lossy compression for those who opt for JPG files. However, other file types, such as PNG, support lossless compression. In most cases, it can be hard to distinguish lossless compressed images.
Here’s another example of lossless and lossy compression. The first image here is an uncompressed PNG file at 1.3 MB.
Then, if we apply lossless compression, the PNG file is now at a smaller size, 387 KB. Can you notice the difference?
Finally, if we go all out and apply lossy compression and reduce the image to 53KB, there is a significant difference in quality:
5) Adjusting the image size
It may also be worth decreasing the image sizes alongside the file and compression type. This means adjusting the width and height of the image. Generally, the larger the image dimension, the greater the file size.
For websites where page speed is crucial, it is silly to upload a full HD image with a large file size that takes ages to load. Even after compressing the image, it still may be too large. You should upload the images to your site the size you need them to reduce the loading speed.
Adjusting the image dimensions of an image is easy, with many tools available online. There are also options for this, the default Windows and macOS image software. Experiment with the compression and image sizes until you find a suitable balance with little loss of quality.
6) Lazy loading images
Aside from changing an image, you can also implement lazy loading for images on your site. Lazy loading is where elements on a webpage are only loaded once the browser needs them. This means when a user first lands on a page, it loads much faster, helping to reduce the bounce rate.
Images are the best resources to implement lazy loading due to their impact on loading speeds. For example, images located towards the bottom of the page are not loaded straight away. Instead, the browser waits until the user scrolls to that section before rendering the image.
Add a small HTML code to implement lazy loading on your site. Adding the loading=”lazy” to your image tag is one method you can use. An example of this in practice would be:
<img src=”dreamscapedesign.co.uk/image” alt=”dreamscape design image” width=”600″ height=”320″ loading=”lazy”>
Other methods to implement lazy loading include JavaScript, CSS, or installing a WordPress plug-in.
7) Image sitemap and alt text
Our last tip for optimising images in web design is implementing an image sitemap and utilising metadata. Unlike humans, search engine crawlers cannot see images. There may also be instances where a crawler may not discover an image.
This is why it’s important to spell everything out to the crawlers: it makes their job easier, and your images stand a better chance of appearing in search results. The first thing to do is implement an image sitemap. You should already have a sitemap for your site, typically an XML file, for pages.
An image sitemap, however, is specifically for images. You can also include external domains in an image sitemap. However, if the images on your site are incorporated into content, you don’t need a sitemap. You can manually create one or use a free online tool like Angel Digital.
Something that every web designer needs to do, though, is utilise metadata, such as alternate text. This is text about an image that is embedded into an image file. Examples of metadata include alt text, image resolution, rights information, and camera type.
Most of the metadata will already be present if you have created the images. However, tags, such as alt text, will be missing. Therefore, you must add these manually when uploading images to your site. Be specific and incorporate the page’s keyword for best results.
Images are a vital part of any web design project. Finding the right balance between visual and written content can help improve your design and boost your user experience. However, not optimising or badly optimising your images can have adverse effects.
Following the steps above can help ensure the images you choose for your site are ideal and well-optimised without losing too much quality. Your page speed and user experience will thank you both for it!