There is no doubt that images are an essential part of any website. They can enhance the user experience, create a more compelling design and even help with getting found in Search Engines. However, if not done correctly, they can also harm your website’s performance. Image optimization should be a priority for every website owner or developer because it has far-reaching consequences.
In this article, we will examine why image optimization is essential for websites and the different methods you can use to optimize your images.
What are images?
Images are essentially pictures that appear on a web page. These pictures, however, may not just be the images of things you see. For example, on a meet our team web page, you’d expect pictures of the team members of the company you are looking at. But you might have other pictures that a web designer has used, such as a background image that may be a gradient, for example, as part of a header.
What does Image optimization mean?
Image optimization is the term used to describe taking image files and making the image file size smaller.
By reducing the size of image files, website load times can be significantly decreased. Various methods are used for image optimization, such as compression techniques and selecting the suitable image format.
Image compression techniques include reducing the resolution of an image, deleting unnecessary data from an image file and reducing the number of colours in an image. In terms of file formats, you should use JPEG images, PNG images or newer image formats like WEBP, depending on the type of image.
There are other things we need to do to get your images for the web ready, but we cover this a bit later.
Lossless compression vs Lossy Compression
There are two methods for compressing images, so you’ll need to decide on the method depending on what you want to achieve.
Lossless compression reduces file sizes by removing unnecessary metadata in images, such as when a photo was taken and by which camera.
Lossy compression reduces file size by permanently removing some of the image and metadata data.
Why do I need to optimize images?
First, let’s look at the impact of large, unoptimized images on website loading times and performance. Images take up a large chunk of space on your website, and if they are not adequately compressed, they can drastically slow down your website speed.
According to a study by Kissmetrics, 47% of people expect a web page to load in two seconds or less (page speed). If it takes longer, most users will leave the page without engaging further with the content.
Optimising images
There are a few steps to optimise images for the web, all need to be done to keep on top of website performance.
Image Compression
As mentioned earlier, image compression is taking large image files and reducing their size.
Image compression removes and merges information within an image without reducing image quality too much. It is important to know though, that any compression does lose some quality of the original image file.
However, compressed images do have a lower image quality. Although it’s not usually noticeable on most screens that people use to view web pages, it’d only make a difference on high-end screens used by people like photographers when they’re editing photos.
You’ll need image editing software such as Adobe Photoshop to compress images.
Resize Images
You should always resize images to fit the area you are placing the image on your website. That also includes saving the same image with smaller image dimensions for mobile and tablet screens.
Image File types
There are many different image formats. The most common image format is probably jpeg files, closely followed by png files for the web.
Jpeg images are usually used for photos, and png is usually used for logos as they can have a transparent background.
Now there is a more modern format that should be used, although older browsers don’t support it’s called WebP, so you may still have to save images in multiple formats.
WebP provides superior lossless compression and superior lossy compression, for example, a WebP image that uses lossless compression is 26% smaller than the same .png file.
As you can imagine compressing images and turning them into WebP file format, reducing the file size by 26% on each photo will significantly impact site speed and save disk space across your website.
Image Optimisation Tools
There are several ways that you can edit photos and optimize them for the web, especially if you haven’t got the money to pay for expensive photo editing software, although it is always best to optimize images in dedicated photo editing software such as adobe photoshop.
- TinyPNG – TinyPNG is an online tool that allows you to upload a photo and they run the conversion process for you letting you download the compressed image. The free version is limited to 20 images a day and with a maximum size of 5 MB per image. You can upgrade to their pro plan if you wish which has no limits for $39 per year.
- Imagify – Imagify is a great tool if your website runs on WordPress. Imagify is a WordPress plugin that allows you to optimise photos from your media library atomically. It’s free for up to 20 MB per month and then is $9.99 per month for unlimited. the great thing about Imagify is that it’ll optimise images and save multiple versions so you can have jpeg images for older browsers and WebP for newer browsers. If you don’t have a WordPress website, you can also use their online portal to upload images.
- Canva – Canva is a cloud-based graphic design tool. You can use it to make presentations and other content like social media posts. It has a limited set of file export options but allows you to save as a png file or a jpeg file, and you can resize images to fit what you need. Canva’s free to use but if you want some of the more advanced functionality is £10 per month.
Other image optimization tips and tricks
Ultimately, websites would be very boring if they didn’t have images but if not optimised correctly hurt your website, sales and search engine rankings. With some thought, you can have a beautiful website.
Image Quality
Always start with an image that’s really good quality. That way you’ll always have something useable at the end of the compression process.
Use the right image size for the device.
Always use the right image size for the device. For example, if you have a banner image have three different versions one for desktop, one for mobile and one for tablet.
That means that any large images are the right image file size for each device and you are not using more bandwidth than necessary helping with page speed on different devices.
Image Dimensions
Always add the image dimensions to your web pages code. That way your web browser doesn’t have to guess what size an image is. if you use the Imagify WordPress plugin, make sure this setting is set so you don’t have do do it manually.
Image alt text
image alt text is used by Google to understand what an image is and screen readers to describe what an image is for people who can’t see it. It should be a descriptive text to add context to the image.
Image file names
Like alt text, using keyword-rich file names should be descriptive and is another way to help with image SEO (helping Google understand what your image is)
Use a Content Delivery Network
By using a CDN (Content Delivery Network), you can ensure that your images are delivered quickly and efficiently across different devices and locations. This will further help optimize your website’s loading times and performance.
Conclusion
In conclusion, optimizing images for web usage is essential if you want to create a good user experience and maximize conversions. It is worth creating different image files for different screen sizes to help with website speed.
Choose the best image format for your audience, but try using Webp where possible. always add descriptive text in both the alt text fields and image file names to help search engines understand what your picture is.
