How to optimize images to speed up the website
No one wants to make Google hate their website, fortunately, you can improve the performance of your website by optimizing images. One of the problems in formatting images and photos is the severe quality reduction after reducing the size of the images, which in turn is very important and affects the view of users towards your website. Optimization is good as long as you do not reduce the quality and ugliness of the image by reducing the volume. In this article, we provide you with tips that allow you to optimize images and photos to a small size so that they do not lose their high quality and you can proudly display them on your website.
So let’s take a look at how to format images without making them ugly, as well as how to optimize photos to speed up the website.
Note Note: We held a very useful and professional course to optimize the size and size of photos as well as SEO images in a principled way, you can click on the photo below to view the course topics:
The benefits of image formatting
It’s best to know the answers to these questions first: Why should we format our website images? What are the benefits of this?
There are several different benefits to photo SEO. According to the HTTP history of September 15, 2017, on average, 65% of the size of a web page depends on its images and images. So, when you want to optimize your WordPress website to increase SEO and site speed, according to these statistics, you should put an important element called images in the first step of optimization. This element is much more important than scripts and fonts.
And ironically, one of the easiest and best ways to optimize a site is to improve the size of the images, but most webmasters do not pay attention to it.
Here’s a look at some of the main benefits of photo optimization:
- Improves the loading speed of your page and as a result leads to better SEO and a successful result in search engines. . Decreased views, fewer daily visitors, and can be due to slow speed and too long for users to load the website. If you want to improve the speed of your website, you can use the unique services of increasing the speed of SEO teaching site.
- Backup files are made much faster.
- Increases the site’s ranking in Google. Your website ranks better on search engine pages than ever before. Heavy files slow down your website and search engines hate slow websites. Google likes to sort and index your images as quickly as possible. Ever wondered how much of your website traffic comes from Google Images? Log in to Google Analytics on your website and according to this tutorial, check the incoming traffic from your Google Images section.
- Smaller images consume less traffic, which the Internet and browsers welcome as well.
- It takes up less space on your server. (Depends on the number of your optimized index images)
How to optimize images for the web and better website performance
The main goal in improving the site images is to find the balance between the least volume and the best acceptable quality. There is almost more than one way to optimize methods. One of the best ways to optimize images is to compress the image before uploading it to the site, which is often possible with software such as Adobe Photoshop and Affinity Photo. Some optimizations are also done by plugins, which we will discuss in the rest of this article.
The two main things to consider when optimizing images are the file format and the type of compression you use. By choosing the best type of image format composition and the best type of compression, you can significantly reduce the size of your images. You should test any image or any format of images to see which type of compression is best for that type of image or format.
Select the correct image file format
Before you start modifying your images, you need to know which type of image format is right for your images and make sure you choose the best format. Here are some of the formats you can use on your website:
- PNG format – Delivers the highest quality image type but with a very high volume. Uses lossless only for compression. Of course, sometimes the PNG format has less volume and better quality than other formats and should be tested, especially in images that have fewer colors.
- JPEG format – uses lossy and lossless compression. You can control the quality level of your images until you get good quality and acceptable volume.
- GIF format – uses only 256 colors. It is the best choice for moving images and uses only lossless compression.
There are other formats such as WebP and JPEG XR, but unfortunately not all browsers support them. Ideally, you should use the JPG (JPEG) format for large, full-color images, and the PNG format for simple, transparent images, or images with fewer colors.
Quality and size of compression
The image below is an example of overcompression. The first image is an image with a very low compression ratio and receiving the best quality (but with a high volume). The second image is one with maximum compression and very poor quality (but low volume).
As you can see, the initial image is more than 540 KB in size. As an image, it is a very beautiful and high quality image. If you can keep your page with other images less than 1 or 2 MB, it is an acceptable size for one image. Also keep in mind that 590 KB is a quarter longer than the original image. The second image, which is terrible in terms of quality, but is 39 KB in size. What you need to do is create a medium quality image with the best and worst quality.
So we re-compressed the image, but this time we set the compression ratio to normal (Medium in Photoshop). The image quality was acceptable and its size was 132 KB, which is acceptable for an image with such a high quality. This image is approximately 4x smaller than the original low-compression image and 8x smaller than the original image.
Typically, plain PNG images should be 100 KB or less for the website to perform at its best.
Lossy and lossless optimization method
One of the most important things to consider when optimizing images is knowing and choosing the best method for optimizing images by choosing one of the two methods, lossy and lossless.
Lossy: A filter that removes part of the image data when optimized. This method weakens the image and you should pay attention to the quality of the images when optimizing. The size of the images in this method is greatly reduced. In software such as Adobe Photoshop, Affinity Photo and other available software, you can use this method by making settings and also control the image quality. For example, in Adobe Photoshop, when you get the JPEG output, it asks you for the output method, which you can use the lossy compression and lossless compression methods.
Lossless: A filter that compresses data when optimized. This method does not reduce the image quality, but the images must not be pre-compressed to work best. They do this with software such as Adobe Photoshop, Affinity Photo and…, as well as some WordPress plugins with the Gzip method.
It is best to check out different compression techniques for each image to find the best quality and volume. If your software has a Save for Web option (Save for Web in Photoshop File menu), be sure to save it as a web. This option is available in most image editors and allows you to optimize the image as needed. You lose some image quality in compression, so be careful to control that amount and choose the best one.
Image optimization tools and software
Here we introduce you to several tools and software, some of which are paid and some of which are free and with which you can optimize your images. Some of them leave the optimization to you manually and some of them do the optimization for you automatically. Personally, I am a fan of Affinity Photo software, which is both cheap and has most of the features of Adobe Photoshop software.
Some good image optimization tools and software:
- Adobe Photoshop
- JPEG Mini
Resize images for scaling
Another problem with optimizing images occurs when you have to upload them for comparison or scale (Scale) and do not allow CSS to resize them. This section is not as important as compression, but it is another point to run your images as fast as possible on all devices. If you use WordPress, your images will be resized by default by the system. In Settings> Media, you can set the maximum length and width of the images. By doing this, CSS will no longer shrink your images with its encodings.
By default, the WordPress media section creates thumbnails according to WordPress settings. However, the original image remains the same without resizing. If you want to save volume on your website and not save the original images, you can use a free plugin called Imsanity.
The Imsanity plugin allows you to limit all images on your website to one size, so that images larger than one size do not remain in your media and are deleted. The Imsanity plugin connects to WordPress immediately after uploading the image, but before WordPress can execute the image, it examines the image in relation to the settings you have created and applies the settings. So depending on what the plugin does, you will notice that WordPress does the same by default, but only resizes the original image before it is fully uploaded.
Optimization plugins you can use
Fortunately, in WordPress you do not need to do any compressions and resizing manually. You can automate a series of image optimization tasks by installing plugins. Below are some plugins that will start optimizing images immediately after downloading and deliver the desired and optimal images to you. Also, these plugins can optimize images that you have already uploaded. This is a very useful feature, especially if you have a website full of uploaded images. In this article, we will introduce you to some of the best image plugins with which you can have the best performance on your website.
Just keep in mind that you should not rely on plugins alone. For example, on some low quality hosting servers you are not allowed to upload images and files larger than 2 MB, and in addition to considering low quality hosting servers, you generally should not upload more than 2 MB images in the WordPress media section. Upload, because these images will quickly fill your website volume and force you to increase the size of your website.
Imagify Image Optimizer plugin
The Imagify plugin was created by the Wp Rocket development team, which provides great plugins for optimizing website speed. This plugin is compatible with Woocommerce, WP Retina and NextGen Gallery. Also with the Bulk feature (high number optimization) you can compress your images with 3 different levels of compression, normal (normal), aggressive (aggressive), ultra (ultra).
This plugin can also be rebuilt, and if you are not satisfied with the optimization, you can request the rebuild of the images again to return your images to their original state and re-optimize. This plugin has a free version and a commercial version. With each free account you are allowed to optimize 25 MB per month.
Getting rid of original images and resizing large images is also possible in this plugin.
ShortPixel Image Optimizer plugin
ShortPixel Image Optimizer is a free plugin that lets you optimize up to 100 images per month and supports several different formats such as JPEG, PNG, GIF, WebP as well as PDF format. It can use both lossy and lossless methods. This plugin can convert CMYK images to RGB and help you optimize your host processor and RAM by moving your images to the cloud and then returning them to your WordPress website, as well as backing up your original image. Returns the original image if you are not satisfied with the quality. There is no volume limit in optimizing images in this plugin.
Optimus Image Optimizer plugin
Optimus Image Optimizer uses the lossless method to optimize your images. As mentioned above, in the lossless method, no information is deleted from your image. This plugin supports WooCommerce, Multi-Site plugins and has a great bulk section to optimize old uploaded images as well. This plugin also supports WP Ratina.
A free version and a commercial version are provided for this plugin. In the commercial version where you have to pay an annual subscription fee, you have the right to infinite image optimization. If you combine this plugin with the Catch Enabler plugin, you will also be able to use the WebP format, which is an image optimization format recently developed by Google.
WP Smush plugin
WP Smush plugin is probably one of the most popular and most used in this list and is also available in both free and commercial versions. This plugin reduces the hidden information in the images so that the image is reduced in size without reducing the quality. The smush plugin scans and optimizes images quickly after uploading images, and can also optimize your old images.
In the free version, you can optimize 50 images in normal mode, and if you need manual optimization, you can also manually optimize any image you like. Smush can optimize JPEG, PNG and GIF formats. In free mode, Smush optimizes images below 1 MB.
TinyPNG Plugin (also compresses JPEG format)
The TinyPNG plugin, which can optimize 100 images per month for you under the TinyPNG and TinyJPG cloud, is also one of the best WordPress and can optimize your PNG and JPEG images.
This plugin automatically optimizes your new and old WordPress images. The plugin also converts the structure of CMYK to RGB, according to the plugin, optimizes JPEG images by up to 60% and PNG images by up to 80%, without compromising the original image quality. This plugin has no limit on the size of the images, you can use the services of this plugin only with an email.
ImageRecycle Plugin is a plugin that automatically optimizes your images and PDF files. This plugin focuses not only on optimizing images but also on optimizing PDF files. One of the best features of this plugin is the ability to set the minimum image size for optimization. For example, if you do not want images that are less than 80 KB in size to be optimized, it is sufficient to set the minimum size of 80 KB. And this will make sure that your images are not over-compressed. This plugin also includes Bulk for old images (possibility of group optimization of pre-uploaded photos) as well as the possibility of automatic resizing. Note: This plugin gives its users a 15-day test as a gift, but it is generally considered a commercial plugin and you have to pay to use it. In this plugin, images are uploaded and optimized on intermediate servers. You do not need to pay collectively to purchase this plugin, but you will need to purchase special packages that specify the number of images you are allowed to compress, with packages starting at $ 10 per 10,000 images.
Impact of image optimization on the web
After a complete explanation of how to reduce the size of the photos, it is time to examine its impact and changes in the loading speed of the site. That’s why we decided to do an experiment to show you how image optimization affects your website.
Un optimized JPEG images
We first uploaded 6 non-optimized images to the website, all of which were more than 1 MB in size. We repeated this experiment 5 times to make sure the results were not random. As you can see below, the loading time of our website is 1.55 seconds while our page is 14.7 MB in size.
Optimized JPEG images
Now, after optimizing the images using the Imagify plugin and the violent mode, as you can see, our page load time is 476 milliseconds and the page size is 2.9 MB. (We repeated this review 5 times to make sure)
After comparing the results, we found that our website load time decreased by 54.88% and page volume by 80.27%.
There is almost no other optimization that can reduce the loading time of your website by 50%. This is why optimizing images is so important and not a difficult task, as all of these operations are done using plugins, although it must be admitted that it is not as powerful as manual work, but it is not bad. This method is one of the best ways to speed up WordPress. Another way to optimize the speed of your website is to use a dedicated WordPress-related web host.
By optimizing your images, you can easily fix the errors of Optimize Images and Serve scaled images while testing the page load speed in Google PageSpeed Insights or GTmetrix tools.
If you have any other optimization alerts in the site speed test alerts section, check out the site analysis articles with GTMetrix and the site analysis section with Pingdom on the SEO teaching website.
Use SVG format
Another recommendation we can give you is to use SVGs next to your images. SVGs are a type of vector format used for logos, icons, text files, and other simple images.
Here are some reasons to use SVGs:
- SVG files in image editors and browsers can be scaled and designed for web designers and dream graphic designers.
Like PNG and JPEG, Google indexes SVG files, addressing your SEO concerns, unlike images with base64
- technology, which they have not indexed to date.
- SVG files are often (but not always) smaller than JPEG and PNG files. This will increase the loading speed of the website.
The best methods
Here are some common ways to optimize your web images:
- Use vector images instead of PNG and JPEG images as much as possible.
- Use CDN to increase the loading speed of images by users anywhere in the world.
- Optimize your images using Gzip compression.
- Remove unnecessary parts of images.
- Delete the white sections of the images and create them with CSS.
- Use CSS3 effects as much as possible.
- Load your images with their own dimensions in the html and css of the site (refer to the serve scaled images error).
- Use web fonts to write text on images. (They make the photo more optimized and allow you to resize images and text)
- Use checkered images only in areas where shapes and details are available.
- Use bit-depth to reduce the color plot.
- Where you can use the lossy method for compression.
- Use GIF if you need animation.
- Experiment with images in different formats to find the best setting.
- Use PNG format if you need the best quality and the best details.
- Use JPEG for original images and screenshots.
- Adjust the scale of the images relative to the screen to reduce the number of pixels.
- Delete any unnecessary metadata.
- Automate compression operations as much as possible.
- In some cases you need to be lazy to display images (read the comprehensive article What is lazy loading).
- In a tool like photoshop, output the images as Save for Web, this option is available in the File tab.
- Once you have used the best way to optimize images and format them. Your site will load faster in browsers, search
- engines, networks as well as users.
Have you ever optimized your images? Did you work to optimize your images manually or through a plugin or both? Do you know better SEO tools or plugins to improve site speed? Do you have anything to add to the article? Let us know about these issues by posting your opinion in the comments section.
Some images and text are taken from kinsta.