JPEG Optimization for The Web – Ultimate Guide
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 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.
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.
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.
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.
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.
I found an interesting article discussing JavaScript JPEG encoding which would happen in your frontend code. The original post is dated back to 2009 which explains the process more in detail. There isn’t much benefit to high-quality image galleries but it can shave off loading times for your mobile visitors. It would also be a useful technique when hotlinking images or re-cropping thumbnails dynamically.
Another fancy tool to check out is Yahoo! Smush.it. It’s a browser-based web app where you can upload an image and Smush.it will remove all unnecessary extra bytes to optimize file size. It’s 100% lossless meaning the image quality will not degrade at all. And even better you can batch-upload images from direct URLs if you have them hosted on your website or a 3rd party server.
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.
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. Check out the Google code page for more information and technical support.
There have been some minor issues with the latest 1.3.3 stable release in rendering pixelated JPEG images in Opera. Try checking all your optimized images in the 4 major browsers – Chrome, Safari, Firefox, and Opera (and maybe IE). If anything looks skewed you can try downloading ImageOptim 1.3.0 which converts a bit cleaner.
I still have to recommend Adobe Photoshop as my premiere image editing software. There are other examples possibly better for the JPEG optimization process. But web designers can get by with even lesser-known open source solutions. If you have similar tricks or ideas on JPEG compression please share with us in the post discussion area below.
Avoid Always 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%
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.
Planning a Graphics Model
You want to have an organized file system that’s easy enough to rummage through. Some webmasters will choose to host their photos elsewhere on the web – such as Flickr or Picasa. Yet you’ll still want to use some compression tool to reduce image sizes, but how you display them on your site will vary. This is especially true with the popular rise of mobile devices with access to the Internet.I found an interesting article discussing JavaScript JPEG encoding which would happen in your frontend code. The original post is dated back to 2009 which explains the process more in detail. There isn’t much benefit to high-quality image galleries but it can shave off loading times for your mobile visitors. It would also be a useful technique when hotlinking images or re-cropping thumbnails dynamically.
Additional Tools
There is plenty of software to try in regards to image manipulation. Any extra bytes you can shave off each file’s size are crucial. There isn’t a whole lot of software out there, but the options which are available are amazing.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.
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. Check out the Google code page for more information and technical support.
Helpful Resources
- JPEG 101: A Crash Course Guide on JPEG
- Right compression settings to save JPG images for WordPress
- Clever JPEG Optimization Techniques
- How-to optimize JPEG images for websites
- Everything You Need to Know About Image Compression
Conclusion
JPEG compression is tricky since you need to find the proper balance between quality and substance. Even as our modern Internet connection speeds are increasing there is still a need to reduce the size of webpages. New frameworks like jQuery and Typekit can tack on hundreds of additional kilobytes, even on a well-optimized design.I still have to recommend Adobe Photoshop as my premiere image editing software. There are other examples possibly better for the JPEG optimization process. But web designers can get by with even lesser-known open source solutions. If you have similar tricks or ideas on JPEG compression please share with us in the post discussion area below.
+ comments + 1 comments
This comment has been removed by a blog administrator.
Post a Comment