Images usually take up the most space on a page in terms of file size. The loading speed is therefore strongly influenced by them. So they can slow down your site considerably if you don't optimise them properly.
Fortunately, you can reduce the file size of your images with a few smart adjustments, without losing quality. This ensures that your website loads faster, which is not only nicer for your visitors, but also better for your findability in Google.
In this article, you will learn how to optimise images, what to look out for and which tools can help you do this.
Choose the right file format
Before customising an image, it is smart to choose the right file format. There are different types of image files, and each has its own advantages and disadvantages:
PNG - This format produces high-quality images, but the files are often larger. PNG was originally created not to lose quality, although you can also save it in a smaller way.
JPEG (or JPG) - With this format, you can choose how much quality you want to keep. The lower the quality, the smaller the file. Useful if you want a good balance between looks and loading speed.
GIF - This format uses only 256 colours, so it is less suitable for photos. It is, however, perfect for simple animations, such as moving pictures. GIF does not lose quality when you save it.
- WebP is a newer image format developed specifically for the web. It is super convenient because it creates smaller files than JPEG and PNG, while still maintaining good quality. WebP also supports transparent backgrounds (like PNG) as well as animations (like GIF).
- SVG stands for Scalable Vector Graphics. It is a special image format that does not consist of pixels, but of lines and shapes. This means that an SVG image always remains razor-sharp, no matter how big or small you make it. SVG is not suitable for photos or images with lots of details and colours, but images such as logos often lend themselves perfectly to the SVG file type.
To optimise your website, you can convert images (such as JPEG or PNG) to WebP. This format makes the files a lot smaller without losing much quality. And good news: almost all modern browsers support WebP nowadays.
For logos, icons and simple illustrations, it is better to choose SVG. This type of image always stays sharp, even on large or retina screens, and is often even smaller than other formats.
You can convert your images very easily online. For example, try:
cloudconvert.com - for converting to WebP or other formats
Compressing images
Image compression means reducing the file size of an image without (or with as little) loss of quality as possible. The purpose is for the image to take up less space on your website or device, making pages load faster and using less bandwidth.
There are two main types of compression:
Lossless compression (lossless):
In this process, the image is reduced in size without losing quality. All details remain intact, but the file size is usually reduced less than with lossly compression. This is useful if you want to edit the image later.Lossy compression (with loss of quality):
In this process, some details are discarded to make the file size much smaller. This can sometimes cause a small loss of quality, such as less sharp details or slight colour differences, but often you hardly notice this if it is done properly.
To compress images, you can visit the website tinypng.com use. You upload your images and get optimised images in return.
Adjust the size of the images
By using images in exactly the right dimensions, you can also gain a lot. With the right format, you keep the file size smaller without compromising on image quality. In this blog read more here.
Conclusion
Optimising your images properly, for example by converting them to the compact WebP format and using SVG for logos and icons, will make your website faster. Useful tools like TinyPNG and CloudConvert let you compress and convert your images for free.
It is smart to teach yourself to optimise images immediately while building your website, or while posting a blog, for example. This will ensure that your website stays fast and that you don't have to do a lot of work to optimise it afterwards.
