Every editor or administrator of a site / blog know the importance that images have on each page of a domain.
But to have an accessible site, you need to go beyond the simple task of selecting images and upload to the platform.
In this post, we’ll talk about:
First of all, we need to broaden the vision and trying to understand an image file as a set of data and pixels.
Within each image file JPG, JPEG, PNG, GIF or other extension, there are metadata and repeated information. The compression of the job is to remove these redundant information to reduce file weight.
For example, let’s imagine a pixel of an image any. Possibly the color or the value of that pixel is equal to a number of other elements within the same image.
When the image is compressed, instead of her own multiple equal and repeated pixels, it saves only a value that pixel, which is played for like, saving load time.
There are two forms of image compression:
Compressing images in lossless is the perfect option for those who need the highest quality at all costs. Commonly used by photographers, the lossless image compression is made with file extensions with more features, such as TIFF and PNG.
The recommended compression format for web results in a small decrease in quality. So small that it is hardly noticed by the human eye. In lossy, you can optimize the image up to 90% of its original size, depending on the case. JPG, JPEG and GIF are the most popular image formats with this kind of compression.
If you need a high resolution image for printing, but will affect the quality.
However, if the use is only for the website or blog of your company, is to compress indicated for the reduction in quality is barely perceptible to the naked eye.
Want to see? We made a simulation below. Try to find the difference:
There are several benefits to anyone who maintains a website with images with optimized size.
First, the lighter your page, the more quickly it will be charged to visitors. And it’s important to keep the pages always as light as possible, considering that connection speeds vary greatly.
It may be that your site is opening fast for you, but it is recommended to do a test online tools to find out how fast is their actual page.
Google offers a tool Page Speed Insights in Search Console. Other platforms like WebPagetest and Pingdom also allow you to analyze your page response time and what are the files that are demanding a greater load time, from images to scripts and plugins.
To learn more, read the post Site speed: learn to test and let your fastest page .
slow and heavy with highly image sites. Except that the image is the focus of the business as photographers and studios sites, it makes sense to leave the files consuming a larger space.
On the other hand, even photo sites can optimize your load time. If the option is still to keep the images in supreme quality, you can optimize your site using smaller thumbnail images that can be enlarged, then yes for high quality visitor intervention.
Still, the differences can be incredibly subtle. Unless you are in need of an image for printing, there is nothing stopping you to compress those images.
To prove the theory caption above, we will bring one study by Mozilla in 2010.
The company, at the time, realized that the conversion rates on landing pages were also associated, in a way, the page load time.
In an A / B, the company noted that an increase of 1 second on page loading time corresponded to a 2.7% decrease in conversion rates.
Read our other posts on A / B tests to learn more about the topic.
Thus, the Mozilla cut 2.2 seconds from the landing page of Firefox. The result was an increase of 15% – or 60 million – the number of downloads of the browser.
It is proven that as SEO strategy, have a light site assistance in the Google ranking.
The site loading speed is one of the criteria taken into account by Google and you can set – fair or not – their position in SERP.
The criterion is officially relieved by Google since 2010. According to a post on the Webmaster Central Blog , fast sites generate greater satisfaction from the audience, which facilitates conversions and possible returns. Another detail, according to internal Google study, is that visitors spend less time on sites that are slow.
Another proof that Google takes seriously this aspect is regarding the new company logo, released in 2015. In addition to the visual characteristics, which have had a significant change, which caught the eye was also their weight. The new logo Google has 305 bytes , a considerably lower weight compared to 14,000 bytes of the old logo.
Therefore, it is easy to conclude that the fact that Google be worried notably in this regard proves the high degree of relevance is to optimize the images on your site.
Reducing the weight of images is an important factor for a complete optimization of any sites. But not enough to save to JPG.
There are some tools that further compress the weight of the images. In this post, we give seven tips:
The Kraken is a compressor platform that provides an easy way to do the optimization of images, direct from the browser. The Kraken web interface lets you upload any image to be compressed and downloaded soon after, both Lossy as Lossless.
The tool has a free plan that allows the upload of images to 1mb. There are also paid plans that offer other perks like images and cloud storage scaling.
If you have a website or a blog on WordPress, you can download the plugin from the Kraken and make bulk optimizations already published images. The tutorial below (video) shows how:
The JPEGmini is another platform with webinterface free. The difference is that you after uploading the file, can compare it with the original before you download.
There is also a paid plan JPEGmini, allowing upload files up to 50mb and integration with Adobe Lightroom.
The WP Smush is a freemium plugin for WordPress with various image compression options.
With this plugin, you can optimize all images that are already in your directory with a few clicks.
The advantage of the paid version is that there is a “autocompressor” unlimited, which allows to compress all images on your site at once. In the free version, the limit is 50 images (up to 1MB each) at a time.
Despite the nomenclature, the platform also accepts other image files as well as PNG. The TinyPNG allows you to upload up to 20 files simultaneously, with a maximum weight of 5mb each.
Like previous platforms, Compress PNG has a web interface for uploading files. With up to 20 simultaneous files, after compression you can download all images in a compressed file.
In addition to PNG, minimalist platform optimizes JPG, JPEG, and PDF.
The iLoveIMG is an online tool that allows you to resize, crop and compress images, and convert file “from” or “to” jpg format.
The tool enables the upload is done directly from the computer or via Dropbox or Google Drive.
At the end of the compression, the tool displays the results of the action.
The Compressnow tool is ideal for those who want to customize the maximum compression level of an image. This is because it offers a rule that can be adjusted for more or less compression (from 0% to 100%).
Furthermore, the tool displays a preview of how the image would be compressed after.
It is highly recommended the use of any of the above platforms to keep your site without light images lose quality too much.
However, even before this process, you can optimize images in well-known software and used in the middle, like Photoshop.
To compress the images in Photoshop, use the command “Save for Web” (Alt + Shift + Ctrl + S) . This command lets you export images optimized for internet. You can make a very fine – grained control over the image to analyze the previews before you export it to web format.
Treat quality, since these tools depending on how low the level, visible loss may occur. So do the tests and see up to what point the image size reduction will not compromise the final product.
Another important detail is taking care of the dimensions of the images. There is no need to save images with larger dimensions to the maximum that the layout allows.
Using compressed images and in certain dimensions can save you a good time to load your website and thus improve the user experience and performance in the Google ranking.
Continue to study and check our eBook here Creating a corporate blog – of the strategy practice , a comprehensive guide to everything you need to know to start producing quality content and generate business opportunities through your blog.
This post was originally published on September 14, 2015 and revised and updated on May 29, 2017.