One of the first challenges I faced as the webmaster of this blog was related to images. Needed compress images (JPG, PNG, GIF) with a very high level of demand if you wanted to optimize server resources and also load fast.
Today I am going to explain the 2 methods I use to edit and compress images like a real ninja. For the last 3 years I have tried everything, but in the end, this is what works best for me, so I want to share it with you.
How to compress one or more images at once in the simplest way possible
What many people recommend to compress images is to use programs like Photoshop or other multimedia editors of the style. Something that is very good, but this type of application they are not usually cheap precisely and they also bring a lot of pro functions that I personally have plenty of - I just want to make a couple of tweaks and compress a few pictures, not create an 8-minute animation short-.
How to edit and compress an image without installing any application
When all I need is to compress an image and adjust its margins and size I use a web tool called Pixlr express. It is an online application that saw the light of the hand of Autodesk years ago –the same of Autocad-, and that has now been acquired by another company (123RF). But let's get to the point ...
The thing is, it's still free and it works just as well. Not only that, but no registration required and it allows us to edit images, add filters, fonts and a good handful of effects. I have had it in the "favorites" folder of my browser for a long time.
To compress an image with Pixlr Express we just have to load the image in the editor and hit "Save”. When saving it, the tool will allow us to apply the desired compression level (from 0% to 100%).
At the time of saving is when it allows us to compress the imageOf course, the quality of the image will be in line with the level of compression that we apply. As a personal recommendation, I would advise you to apply a compression level of 65% compared to the original. It is that point where the image still looks good and its weight is drastically reduced.
How to compress multiple images at once and cascade
If we have several images, working with Pixlr can be a bit tedious. For these cases, I use a free program called RIOT (Radical Image Optimization Tool), specially designed to compress JPG, GIF and PNG images.
RIOT allows us to load an image, adjust the compression level and see a preview of how it would look once the compression was applied. This is great for us to adjust it as much as possible and still look good.
But the real magic of RIOT is in its “Batch” function. From here we can load several images at once (for example, all the images contained in a folder or subfolders) and compress them in cascade. To do this we just have to click on the icon "Batch”, Select the destination folder (Output folder) and the source folder (Add images -> Add all images from folder). Once we have everything to our liking, just click on "Start”To perform bulk compression for all selected images.
That's nice, you hear ...The difference between compressing images one by one and doing it this way is simply abysmal. Imagine that you have to optimize all the images of a university job, or worse, all the images on your website.
The perfect compression level for images on a blog or website
As I mentioned a little above, the perfect compression level is 65% for web pages. But this is only a personal recommendation ...
But if we have a web page and we want the “perfect” level of compression, we will surely want something more than the personal recommendation of a nut who calls himself “the happy android”.
For these cases, Google has the well-known page for webmasters Pagespeed Insights. This tool, in addition to telling us the loading speed of our website and giving us some other advice, also allows us to download a copy of all the images that a specific URL contains. These copies of the images will be 100% optimized.
To download the images we must enter the URL where they hang, and click on the "Analyze”. Once the analysis is completed, from the tab "Computer"We scroll almost to the end, and click on the link"Download the image, JavaScript and CSS resources optimized for this page”. We will automatically obtain a ZIP file with these resources already optimized.
It is a bit hidden, but it is a function with a brutal utilityI hope this tutorial is helpful for you. If I could have read something like that when I started this project, it surely would have saved me a lot of headaches.
P.D: Post dedicated to my "me" from the past. See if you learn, kid!
You have Telegram installed? Receive the best post of each day on our channel. Or if you prefer, find out everything from our Facebook page.
