An enemy of the speed of your blog are images, a website that does not optimize images is losing positioning and visitors.
In addition to occupying more space than text, photographs depending on the format or compression can be more or less complicated to load, being a factor that slows down a website a lot, so it is advisable to give them an appropriate size, compression and treatment.
There are many ways to optimize an image for your website or blog and in this post I am going to give you some basic advice and others much more pro so that you can fix in one day what you have spoiled for years, this sounds good, doesn’t it?
Choose the best format to save your photos
The optimal formats for saving images are very clear in this post about image formats and when to use each one.
Use the correct image size
It is very important that you do not use huge image sizes, it is rare that any screen can show more than 1200px wide so 1200px is a good measure even less depending on whether you have a sidebar for images.
The ideal is to measure the size that you are going to need in your blog with the property inspector to know what size the image should be so as not to go too large or small since it would pixelate it too much.
To discover the optimal size for our photo we have a simple method:
We put the mouse over the element that we want to inspect, right-click and we are going to inspect the element, the console will open and it will tell us the measurements:
In the case of the photo, the ideal size is 662 px and I had given it 700px because if I ever change the template, it is not a bad measure for interior images.
Save for the web in the right quality
If you use a Photoshop style editor you can choose the compression of the image or the quality in which you are going to save the image.
In the option to save for the web you can indicate if you want medium, high, low or very high quality, you will see that in the example the original image weighs 4.98 MB which is too much and the optimized one in high quality with 60 quality 275.3Kb is much smaller
Now the image will be reduced in size to only 71.89 KB which is lighter and will make it load better on the web than in the original image size.
Depending on the type of image you can use a more or less aggressive compression method.
Apart from Photoshop there are fabulous editors that allow you to select the size you need for the images and also online programs to optimize in batch such as Befunky or Canva
Use Thumnails
The thumbnails are image thumbnails, if you see in this blog the same image appears in 5 or 6 different sizes, I upload it once large (optimized) and the regenerate thumbnails plugin creates the appropriate thumbnails for each space, the mini ones that come out in the sidebar, the medians of the related posts…
This saves a lot when loading and makes the page weigh much less, I recommend this plugin 100%.
Don’t download the giant sizes if you don’t need them
If you use photographs directly from a stock of photos and you don’t want to work a lot, you can download them in the most approximate resolution, then there is always the possibility of cropping it in WordPress from edit image.
Let’s optimize the images even more
So far the less aggressive part and as I have always been optimizing the images for the blog, with Photoshop…
But in the WordCamp17 Pablo López from @desarrollowp said that it was not enough since there are much more effective methods, also aggressive and in batch… yujuuu by the way it is valid for Blogspot too.
