JPEG Optimisation Guide for Web Designers
Understanding JPEG compression requires some initial experience, but subsequent website development becomes much simpler with practice.
Avoid saving at 100%
Avoid saving JPEG photographs at 100% quality, as it will not create the most “optimised” image. What it does is that it calculates using an optimisation limit method that often dramatically expands file sizes.
The file size will be significantly smaller compared to 90% or 95% quality.
Most of the time, it is recommended to save photographs with significantly lower quality than 90%.
Preset values are available when clicking on Photoshop’s Save As Web dialogue box.
Below are the potential JPEG values; take note of the naming standards.
- Low – 10%.
- Medium – 30%.
- High – 60%.
- Very High – 80%.
- Maximum – 100%.
In Adobe Photoshop, 60% of an image’s quality is regarded as “high.” Many web developers agree that a safe range to stick with is between 50% and 70%.
What is the minimum acceptable level?
The values selected for optimisation should be decided based on the current project. The visuals that will result in the largest file sizes should be considered because they require the most compression.
When the percentage is below 30%, and if the visual quality is compromised. A solution would be adjusting the “limit” of 50% when lowering the optimal value. Experiment with various settings and discover what looks best for the overall design.
Options for compression
The two concepts, “compression” and “quality,” which are the inverse of one another, should be defined first. If saving a JPEG with 40% compression, the quality will be 60% rather than the maximum of 100% with no compression.
These are the simplest methods to use when saving for the web and should be sufficient as most users rarely engage in complex alterations. When transforming RGB photos into YCbCr, subsampling becomes more challenging (Luminance, Chroma Blue, Chroma Red).
In JPEG compression, the luminance or brightness level is always maintained at its maximum value. Optimising the Red and Blue colour values is simpler when this brightness value is on a separate channel.
This practice is referred to as chroma subsampling. Additional information about this compression technique will fascinate designers who want to get their hands dirty. Visit this blog post on chroma sampling concentrated on JPEG photos.
A fascinating aspect is that Adobe Photoshop does not always use subsampling when compressing images. Chroma subsampling will only be applied to photos saved using the “Save for Web” window if the quality value is less than 50%.
Various online media
There are many distinct types of image media on the web. Pictures, icons, buttons, badges, and many other visuals are all possible. Do note to avoid comparing the quality of a button to that of a picture.
Consider connecting to a different, less-compressed JPEG version when using photos or intricate illustrations. Thumbnails with a higher compression ratio and significantly smaller file sizes can then be added to your website.
The only drawback is that two sets of pictures are required in the media gallery. Pay attention to the overall graphics used on the website and think about how they can be optimised separately.
Compression Tool Use
It is recommended to arrange image files that are simple to browse on the website. An option is to use a CDN or a cloud storage provider like Amazon S3 to store photographs for quicker image delivery. However, to reduce image sizes, use a compression tool. It’s vital to reduce the number of bytes in each file. Here are a few tools you might want to look into:
TinyJPG
TinyJPG is a browser-based web application which removes extraneous bytes to reduce file size. There will be no loss in image quality because it is completely lossless. With 5 MB, it is possible to upload up to 20 photos.
Its official plugin, Compress JPEG & PNG images, is available on WordPress. This plugin also connects to TinyPNG, a sister website that allows PNG image optimisation.
IrfanView
Any collection of large photographs can be viewed and optimised with the free Windows program IrfanView. This software is particularly appealing because it allows for batch conversion of photos from several directories. The same operations can be carried out automatically on hundreds of JPEG photos.
The third-party developers’ support for plugins, for instance, RIOT (Radical Image Optimization Tool), is even better. Other comparable open-source graphics editors like GIMP are compatible with this plugin.
The program allows manual change of the compression parameters for each photograph in the dual-image view it provides.
The RIOT features are simple, and the software support is excellent. It allows deleting extra metadata with picture compressions, such as Adobe XMP and EXIF. This additional information will only increase the size of overall files and is rarely required.
ImageOptim for Mac
OS X and require a robust compression tool. ImageOptim is a good tool for web image compression, sometimes even outperforming Photoshop.
The entire application has drag-and-drop support, making optimising extensive collections of photographs simple. The ability to set up shell scripts and execute commands directly from the Terminal is similar.
Conclusion
Even though 4G and the forthcoming 5G will increase the speed of our modern Internet connections, we still need to ensure that websites are optimised for speed. Speed optimisation will also help with Search Engine Optimization.
Compressing images is challenging but is now a thing of the past with the new user-friendly tools available to help web designers can create creative visual media.
