Images are ubiquitous, whether on Facebook, Flickr, Instagram, etc., in presentations, lectures, or even on websites. Pictures have the advantage that we usually immediately recognize what they are about.
The saying "A picture says a thousand words" will therefore not lose its validity. Images are used on private websites and social media accounts, but are of course just as often found on business websites. The use of images is standard on the Internet. The digitization of cameras, the ability to take photos with smartphones, the option to take screenshots on the computer, etc., ensure a flood of images on the Internet.
To clarify a problem, e.g. with a software, with pictures is easier than with a pure text description. You take a screenshot, add one or two arrows that point to the specific problem and everyone understands what is meant. Screenshots or pictures do not only illustrate possible problems, but can also be used for presentations, e.g. of software.
So we have images in great abundance at our disposal. But now the question arises, should the images be used as they are in the source?
There are numerous reasons why image optimization is a good idea:
- Lower bandwidth consumption for servers
This is very important because some servers do not have unlimited bandwidth and operators have to pay per gigabit of data packet sent. - Lower bandwidth consumption for a user
Optimized images load faster. When using optimized images on a web page, there is less risk that the user will abort the page load before it is finished. - More disk space on your server
It's often forgotten now with the amount of storage available with cloud servers, but still, optimizing storage space, code and resources is an important consideration, at least economically. - SEO advantage
Image optimization can be used to increase the loading speed of the website. This is a secondary SEO aspect, but it is still possible for web pages that load faster to rank higher in search results than pages with similar content that have a higher load time.
Image optimization thus helps the browser to download the really important page content faster and display it on the screen faster.
The optimal settings for your image then analyze factors such as the properties of the format, the quality, the dimensions of the image, etc., and change them if necessary. The goal, simply put, is to discard all unneeded image information and use the image format that is appropriate for the image.
Up to this point we have dealt with why image optimization is useful, now we will deal with the question of how to solve the listed problem of image optimization.
Since we have already used a quote at the beginning of the article, we can refer to the saying "Many roads lead to Rome". Of course, there are several ways to optimize images.
- You optimize the images when you edit them with your image editing software and then save them - this solution can be very problematic for large image collections, because it takes a lot of time and a graphic designer has an extra task to do.
- They use a script that checks and edits unoptimized images every now and then! This is already a better solution than solution A, if only because the optimization is automated. However, you have to record all your files in a database, change their status and the work is done after a few hours.
- You have a script that is executed when the image is created or changed on your server! This is the solution we chose for SoftGuide, because the script is fully automated and does not require any additional resources (people) and, what's more, it is executed in real time.
Even though solution A and B are quite easy to implement, the completely automated solution C is preferable. What do you need to do for this?
For the detection process we use inotify-tools, which seems to be the most suitable after a proper research about possible tools. Inotify is composed of inode (index node) notify. inotify-tools detects event-based changes in the file system via the Linux kernel. The tools are suitable for use in scripts and on the command line. One of the advantages of this tool is that it can also monitor individual files and not just complete directories.
This way we get notification about the files that actually need to be optimized. One problem was that inotify-tools wanted to trigger the event again immediately after we saved the optimized version. This would have resulted in a loop. Once inotify-tools detects that a file has been created or modified, we use either optipng (PNG), gifsicle (GIF), or imagemagic (JPEG) to optimize it.
A difference in the view is hardly noticeable, because the optimization is done as so-called Lossless Compression.
When we saw how perfectly it works for our images, we added another option to the inotify-tools, so that our CSS and Javascript is also optimized on fly. This allows our programmers to disregard any optimization needs and upload everything when the project is ready. The system does the rest and optimizes the code.