When optimizing a website, we usually think of code compression asynchronous loads, reducing calls, but the simplest and most effective optimization option is to optimize the images on our website.
Today no website does not have images or multimedia content, it does not matter its heading or base code in the same way.
Very few web pages consciously optimize their images. Take for example the case of an online store on average for each product an online store has a minimum of three photos without counting the thumbnails, assuming that a store has a minimum of 1000 products we will obtain an average of 3000 photos.
These images are usually taken by professional services and delivered in printing quality, we can say that in the best of cases if they are not optimized these images weigh on average between 5 and 10 MB in png or jpg format with a density of approximately 300 points per pixel. We can say then that on average this online store has between a Giga and a half and 3 gigabytes occupied only with images of its 1000 products.
These same images correctly optimized should not reach 700 kb in the worst case, their density of dots per Pixel should not exceed 80 and can reach 75 and in the same way, the metadata attached to the image should be eliminated.
Regarding the format, it is currently recommended to use web images, which allows greater compression without apparent loss of quality.
In short, we are talking about a reduction of between 10 and 20 times the original size, making with the worst case the total of images not able to occupy half a gigabyte.
To apply these optimizations to a new site, just be aware of some standard rules for optimizing images on websites when loading images, such as:
- No image for the web should have a quality index higher than 85 higher indexes apply to printing but when displaying an image on the screen it is simply information that is not used and takes up space.
- On average, no image for a website should exceed 1200 or 1500 pixels in width. It is ideal to take into account for the desktop a maximum width measurement and depending on its calculation for images that occupy half or a quarter of a screen.
- Optimal use must be made of existing image formats, this implies using jpg for images with a background, png for transparent images.
The problem is when you have a site that takes a long time to live, and the images have never been optimized or have been optimized incorrectly. In that case, it is best to use a service like Ewww that allows batch optimization of images. For WordPress, we will use the free EWWW Image Optimizer plugin that allows us to optimize in an agile and practical way all the images on our site.
We will assume that you are already a WordPress user and you know how to install a plugin so we will go directly to the settings.
First, in the settings menu, we will find the EWWW Image Optimizer option and within this, we will have a series of information and options to apply. Next, I will detail which is the most optimal configuration for me, but keep in mind that depending on the rotation of the site some configurations can be changed.
In the basic configurations, the important thing is to activate the elimination of metadata, the metadata of an image is extra information that the file contains, such as the day the photograph was taken, the GPS coordinates from where it was taken, and many others that we really do not know. matter. The other fields can be left as they are by default.
This is a subscription service, it is recommended but not mandatory, if you have not bought a license, ignore these options, if you have, activate the ones you think are wise, or all.
Here’s where the good stuff starts:
- JPG quality level: I recommend it between 75 and 80 depending on the site and the images it contains.
- Parallel optimization: I don’t usually activate it since it generates a higher consumption on the server, although in some cases it has given me good results.
- Scheduled optimization: this option allows you to periodically schedule optimizations to images that we have on the site. If your site is from a community or similar where users can upload their own content, I recommend them. You will avoid many problems trying to indicate to each user the ideal parameters of an image.
- Include Media Folders – This makes it easy to optimize images uploaded to the site by applying scheduled optimization to the last 2 uploaded folders in your library.
- Folders to optimize and Folders to ignore as their name indicates in these fields indicate the paths to the folders on your server where images will be searched and optimized and which ones will be ignored.
As mentioned before, it is important to define a maximum width for the images that are uploaded to the site. I recommend a maximum width of 1200 to 1500 pixels with a variable height depending on the width. Personally, I usually deactivate the option to Resize other images to avoid any problem with the images in the template.
This option allows you to convert images between png, jpg, and gif, depending on your site it is advisable to transfer png files to jpg and leave the background-color field unfilled so that pngs that have transparencies are ignored.
This is the option that makes this plugin really worthwhile, in these options we will activate the JPG / PNG to WebP options so that it converts our images to a new generation format recommended by Google.
After that, we are ready to optimize our images.
Performing a batch optimization
In the Media option in the menu on the left we can see that we have a new option called Batch Optimization in that option we will find some settings, but first of all, it is important to take into account the warning that the plugin itself gives us:
Mass optimization alters your original images and cannot be undone. Please make sure you have a backup of your images before continuing.
Knowing this, if we agree, we will proceed to optimize our images, for this the first thing is to click on the blue button of Search for non-optimized images so that it identifies the new images and we do not repeat work with images that have already been optimized.
Other options that we will see are Force reoptimization which as its name indicates is to optimize all the images found, whether or not they have been optimized before and The pause time between each image this option will depend on your server and your site, the more time there is between each image, the slower the final process will be, in the same way, the faster the more resources consumed and in some cases the more likely that errors will be generated.
Once we define these values, we can start our optimization by clicking on the blue button and we will be shown a kind of log view where we can see image by image if optimizations were made and what the original and new weight was.
Once this process is finished, all you have to do is browse our site to confirm the results.
For website maintenance service contact us.