Image compression is found in every native media format. However, the difference between GIF, PNG, and JPEG is how the information is compressed and display on-screen.
There are so many tips for composing great image media published on the web, and yet many designers still do not understand some of the fundamentals.
In this guide I’d like to share a few ideas for proper JPEG compression. You want to optimize your images to decrease webpage load times while also holding a decent level of quality. It’s all about finding a balance between file sizes and screen depiction. There is no perfect solution for designers to follow.
It takes some initial practice, but once you understand JPEG compression it becomes much easier developing websites in the future.
Recommended Reading: Tips & Best Practices for Web Optimization
Avoid saving at 100%
You should almost never save your JPEG images at 100% quality. This will not produce the most possible “optimized” image. It actually calculates through an optimization limit formula which increases your file sizes exorbitantly.
Even compared to 90% or 95% quality you’ll see a significant drop in file size.
Most times you’ll be recommended to save images much lower than 90% quality. If you open the Save for Web dialog box in Photoshop you’ll notice they offer preset values you can choose from.
I added the possible JPEG values below – notice the inherent naming conventions.
- Low – 10%
- Medium – 30%
- High – 60%
- Very High – 80%
- Maximum – 100%
Even in Adobe Photoshop 60% image quality is considered ‘high’. Many web developers will vouch between 50% – 70% is a safe range to stick with.
How low is too low?
The values you choose for optimization are completely dependent on the project at hand. You’ll have to consider which types of graphics will output the highest file sizes – these are the ones which really need compression.
I would argue that below 30% you’re really chopping off fundamental picture quality. Other designers will swear 50% as a “limit” to decreasing the optimal value.
But the best advice here is to just try out different settings and see what looks best! You can’t go wrong with a few test studies optimizing JPEG images for the web.
Compression options
We should first clarify the two terms ‘compression’ and ‘quality’ which are the inverse of each other.
This means if you save a JPEG at 40% compression you’ll get 60% quality (compared to a maximum of 100% quality with no compression).
These are the most basic options to utilize – and they should be enough when saving for the web. General users do not get into much deeper customizations.
Subsampling gets into more complicated matters where you’re converting RGB images into YCbCr (Luminance, Chroma Blue, Chroma Red).
The luminance or brightness setting is always held at the highest possible value in JPEG compression. With this brightness value on a separate channel it’s easier to optimize the individual color values of Red and Blue.
This is also known as chroma subsampling. Designers interested in getting their hands dirty will love to read a bit more about this compression algorithm.
Check out this great blog post on chroma sampling specifically focused on JPEG images.
As an interesting side note Adobe Photoshop does not always utilize subsampling for compression. Any images saved via the “Save for Web” dialog will only use chroma subsampling below a 50% quality value.
Differing web media
The web is also full of different kinds of image media. You can have photographs, icons, buttons, badges, and tons of other graphics. But it’s notable that comparing quality between a button and a photograph just doesn’t make sense.
When using photographs or detailed images consider linking to a separate lesser-compressed JPEG file. Then you can setup thumbnails on your site with a higher compression ratio and much smaller file sizes.
The only downside is that you’ll need to provide two sets of images for a media gallery. Take notice of the many different graphics you have sewn throughout a website and consider optimization techniques for each one individually.
Using Compression Tool
You want may have organized the image files that’s easy to rummage through on your site. You may also host their photos on a Cloud service such as Amazon S3, Google Cloud Storage, or through a CDN that would make faster delivery for the image. Still, you’ll want to use some compression tool to reduce image sizes. Any extra bytes you can shave off each file’s size are crucial. And here are some of the tools you want to check out:
TinyJPG
TinyJPG is a browser-based web app where you can upload an image and it all unnecessary extra bytes to optimize file size. It’s 100% lossless meaning the image quality will not degrade at all. You can upload upto 20 images with 5Mb all at once.
If you’re using WordPress for your site. You can use its official plugin, Compress JPEG & PNG images. This plugin also connects to its sister site TinyPNG that would allow you to optimize images with PNG format.
IrfanView
This free software for Windows allows you to view and optimize any set of large images. I especially like this software because it supports batch conversion from images in multiple directories. You can apply the same functions over hundreds of JPEG images automatically.
What’s even better is the plugin support from 3rd party developers. One such example is RIOT (Radical Image Optimization Tool). This plugin works for other similar open-source graphics editors such as GIMP.
It offers a dual-image view where you can manually adjust compression parameters for each of your images.
Software support is wonderful and the RIOT features are very easy to use. Along with image compression you also have access to removing additional metadata such as EXIF and Adobe XMP. These extra bits of data can only add onto your total filesize and they are rarely needed.
ImageOptim for Mac
If you are running OS X and need a powerful compression app then look no further. ImageOptim is a powerful tool to compress images for the web – at times even better than Photoshop.
The whole application supports drag-and-drop functionality so it’s easy to optimize large sets of images. You can similarly run commands right from within the Terminal and setup shell scripts.
6 Ways to Save .WebP Images as JPG and PNG
Google’s proprietary image format WEBP is arguably better than the standard JPG or PNG format. It creates a… Read more
Conclusion
Even though our modern Internet connection speeds are increasing with 4G and the upcoming 5G, we’ll need to reduce the size of our webpages. Every byte will eventually cost some fortune to your users, and in some countries this cost may be quite significant.
In this article, we’ve seen how to to compress images to reduce image size on the webpage. Compressing image used to be tricky since you need to find the proper balance between quality and substance. There wasn’t also that many tools to choose from, but now the options are more advanced and easy to use.
If you have similar tricks or ideas on JPEG compression please share with us in the post discussion area below.
The post JPEG Optimization Guide for Web Designers appeared first on Hongkiat.
