You hardly can build a website without any images. But improper optimization can be a burden and increase your page load time. And both search engines and users hate slow websites.
What is image optimization?
The main goal of image optimization is reducing the file size without losing the required quality. This is important because good optimization lets your website load faster which results in better search engine optimization (SEO) since Google (and other search engines) ranks faster websites favorably.
How to optimize images in Joomla?
It is never a good practice to just take the image you want to upload without optimizing it first. Follow the tips below to serve images more efficiently.
Use the correct file format
It is never a good practice to just take the image you want to upload without optimizing it first. Follow the tips below to serve images more efficiently.
Whenever you can use WebP format. WebP is a modern bitmap format Google introduced in 2010 that can dramatically fasten your website. It provides lossless and lossy compression for the images on the web. According to Google, WebP lossless images are on average 26% smaller than PNGs and between 25-35% smaller than JPEG images in equivalent quality.
Just as PNG or GIF, WebP supports transparency. The only downside is that older browsers don't support this format and you need to provide some kind of fallback for these users. This means you need to have a different copy of the image in JPEG or PNG.
Another rule is: JPEG is better than PNG.
PNG images are much heavier in general than JPEGs. So if the transparency feature of PNG is not necessary, choose the JPEG.
And last but not least: Don't use GIFs. Never. If you need an animation on your website, use video in the right format instead.
Use the proper dimensions
Always crop or scale the image to the maximum width or height of the parent div. There is no point in using a 2000x1200px file when the image will never exceed 400x400px.
The difference between those files can be a few hundreds of kilobytes. And this is only one file. If you sum up all of the images with incorrect dimensions, it can lead to megabytes of data you can easily save.
You can set the maximum width globally in the W7 SEO Uplifter. Then you can be sure the image never passes the required value.
Compress the images
Image compression means that you reduce the file size to the absolute minimum. If it is done right you don't need to compromise on the final quality.
You can choose between many online services that take care of your image files. We decided to show you these two since we have our own experience with them and use them on daily basis.
Set the right quality
In most cases, you don't need 100% image quality for websites. It always depends on the specific image, but you should set the value around 80%.
This percentage is a good compromise between file size and the clarity of the picture.
Use vector graphics when possible
Vector graphics have many advantages when it's used correctly.
Let's take a look at the following images. One is raster graphics in JPEG format, the other one is a vector in SVG. The difference is significant - 95kB. Which means we saved 94 % of the file size.
JPEG - 101 kB
SVG - 6 kB
And not only that you saved file size. The vector will also always look great on every display and in all sizes.
