Web
Optimize pictures for your website → free and fast
May
How to optimize images for your website, a complete guide!
You who run a website have a lot to gain from optimizing your images for your website. Many people associate image optimization with lowering the quality of the images and therefore not having as “nice” images on their website, this does not always have to be the case.
In this guide, we first go through why it is so important to optimize your images for your website, as well as how to optimize pictures for your website step by step.
Why is it important to optimize images for my website?
The two main reasons why it is important to optimize your images for your website is that your website will be faster, and that it in the long run will drive more traffic to your website via higher rankings on Google. This is because Google rewards fast-loading web pages.
These alone are reasons enough to optimize your images, but below are even more benefits of doing so.
6 benefits of optimizing images for your website 2021
Images affect your website very much, below is a list of the 6 most important benefits of optimizing the images for your website.
- Faster website. As much as 21% of the total website’s weight consists of images. Optimizing images is more important than fonts and scripts. If you have a slow website, it is very likely that visitors will cross down and leave the page. Since images are among the biggest elements that make websites slow, they must be optimized.
- More mobile-friendly website. A mobile-friendly website must have optimized images and be fast. The image below clearly shows how much the images on your website affect the speed of the website compared to many other components.
- Higher ranking on Google. Since the speed of websites is very important for visitors, Google also thinks this is important. Faster website leads to higher rankings on searches. As early as 2018, Google announced that they have started using charging time as a ranking factor.
- Higher ranking with visual search. After the introduction of Google Lens, it is possible for people to do searches with images instead of words. This means that the images on your website drive more visitors to the website, so it is important to optimize them.
- Easier to back up. If you want to back up certain pages or the entire website, this is much faster with optimized images.
- Uses less bandwidth. Smaller files (optimized images) require less bandwidth, which both networks and browsers will appreciate.
Below is a breakdown of how much which elements weigh on your website.
How to optimize images for your website 2022
The primary goal of optimizing your images for your website is to find the right balance between low file size and acceptable quality. By choosing the right combination of file format and compression type, you can reduce the image size by as much as 5 times without losing too much quality.
Whether you already have a website with images on it, are building a new website, are considering buying a website, or are simply curious, here is a complete guide with best practices for how to optimize your images for the web 2022.
Use the correct file format
Which format is best for your image, depends on what type of images it is. The most common formats are JPEG for images with a lot of color, this format provides reasonable quality and fairly small size. Instead, use PNG for images with fewer colors, such as logos or images with transparent backgrounds.
Below we describe what the different file formats mean.
- JPEG uses destructive and error-free optimization. It is possible for you to adjust the quality level to find the right balance between file size and desired quality.
- PNG has a larger file size, and produces higher quality images. PNG uses non-destructive compression and is mainly used for icons or logos instead of whole images due to the large file size.
- GIF is the best choice for animated images. It uses only flawless compression, and uses only 256 colors.
Name your files correctly
Google and other search engines use, among other things, the file name to understand what your image represents. Therefore, they are important for naming your images according to what they represent, it can also be beneficial to use keywords for SEO purposes. Also skip strange characters like “!,?, Å, ä, ö”.
Compressing your images
Compressing images means you reduce the size of images. This is important to get a faster website. You can easily compress your images using image editing software like Photoshop, or through various free online tools. Unfortunately, this often results in a lower quality of the images, but it depends on how much you compress them.
Destructive or error-free optimization
There are two types of compression you can use, destructive and error-free. Destructive compression is a filter that eliminates data, this results in degraded image quality if you reduce them too much. Flawless compression is a filter that compresses data, it does not reduce the quality but must be performed before the images can be reproduced.
Both of these compression techniques can be performed in editing programs such as Photoshop, FileOptimizer or ImageOptim, the best thing is to test yourself with the different techniques to see what suits each image and format best. Make sure you save them in the “for the web” format when experimenting with them. It will give you the prerequisite for optimal compression for your images.
12 best tools for image optimization 2022
We have previously mentioned that you can optimize your images in, for example, Photoshop, but there are many other programs you can use as well. There are both free tools and premium tools. Some allow you to perform your own optimizations, while some perform them for you.
- Adobe Photoshop
- Gimp
- Paint.Net
- GIFsicle
- JPEGtran
- JPEG Mini
- OptiPNG
- Pngquant
- FileOptimizer
- ImageOptim
- Trimage
- ImageResize.org
5 best WordPress plugins to compress image 2022
If you run a WordPress website and want to compress all images automatically when uploading images on the website, here is a list of the best WordPress plugins for it.
- Smush Image Compression and Optimization
- reSmush.it Image Optimizer
- EWWW Image Optimizer
- Compress JPEG & PNG images By TinyPNG
- ShortPixel Image Optimizer
Choose which plugin suits you best, then install it, after that go to media settings and choose to set it so that all images are compressed automatically when uploading. You can also choose to compress already uploaded images.
Save images in the right size
Find out what pixel size the image will have on your website, this varies depending on whether it should be a product image, an image for slider, profile image or another type of image. When you see the pixel size, you scale the image to the right size via a tool such as Photoshop and use the function “save for the web”.
When you know what sizes you need for your images, you can in WordPress, for example, specify these sizes as preset choices when you upload images in the media library. To do this, go to settings -> media and then click save.
Use alt texts
Alt texts mean alternative texts and are an attribute of the HTML language’s image tag. You should write alt texts that describe your images, just like when you name your files. Its original function is that the screens of disabled and visually impaired people should be able to read the image. But this is also important for SEO purposes to help search engines understand what your images represent and are about, which in turn makes them visible in searches.
As previously mentioned, it is important to make Google and other search engines happy by, for example, using alt texts in the right way. This is because you want your content to be displayed in searches, which in turn leads to you getting more traffic to the website.
Now that you know why it is important to optimize your images for your website and know what steps you need to take and how to proceed, this is just the beginning. If you still feel unsure about what suits your website best, or do not have time to implement all this yourself, you can contact us and we will help you.
Frequently Asked Questions
Why is it important to optimize my images for my website?
The two main reasons why it is important to optimize your images for your website is that the website gets faster, and that it drives more traffic to your website via higher rankings on Google. This means that visitors stay longer on the website and it drives more traffic to your website.
What does it mean to compress images to a website?
Compressing images simply means that you reduce the size of the images. You can easily compress your images using image editing software like Photoshop, or through various free online tools that are almost always free. It is common for this to result in lower quality images.
Why does my website load slowly?
The most common reason why you experience your website as slow is because you have too many images, or too large images on the website. The size of the images significantly affects the speed of the website. It is therefore important that you optimize them (reduce the images) so they do not make your website slow.
Related Articles: How Much Does a Web Developer Cost?
