Smashing Magazine
Clever JPEG Optimization Techniques
When people talk about image optimization, they consider only the limited parameters offered by popular image editors, like the “Quality” slider, the number of colors in the palette, dithering and so on. Also, a few utilities, such as OptiPNG and jpegtran, manage to squeeze extra bytes out of image files. All of these are pretty well-known tools that provide Web developers and designers with straightforward techniques of image optimization.
In this article, we’ll show you a different approach to image optimization, based on how image data is stored in different formats. Let’s start with the JPEG format and a simple technique called the eight-pixel grid.
[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]
Eight-Pixel Grid
As you already know, a JPEG image consists of a series of 8×8 pixel blocks, which can be especially visible if you set the JPEG “Quality” parameter too low. How does this help us with image optimization? Consider the following example:
32×32 pixels, Quality: 10 (in Photoshop), 396 bytes.
Both white squares are the same size: 8×8 pixels. Although the Quality is set low, the lower-right corner looks fuzzy (as you might expect) and the upper-left corner looks nice and clean. How did that happen? To answer this, we need to look at this image under a grid:
As you can see, the upper-left square is aligned into an eight-pixel grid, which ensures that the square looks sharp.
When saved, the image is divided into blocks of 8×8 pixels, and each block is optimized independently. Because the lower-right square does not match the grid cell, the optimizer looks for color indexes averaged between black and white (in JPEG, each 8×8 block is encoded as a sine wave). This explains the fuzz. Many advanced utilities for JPEG optimization have this feature, which is called selective optimization and results in co-efficients of different quality in different image regions and more saved bytes.
This technique is especially useful for saving rectangular objects. Let’s see how it works with a more practical image:
13.51 KB.
12.65 KB.
In the first example, the microwave oven is randomly positioned. Before saving the second file, we align the image with the eight-pixel grid. Quality settings are the same for both: 55. Let’s take a closer look (the red lines mark the grid):
As you can see, we’ve saved 1 KB of image data simply by positioning the image correctly. Also, we made the image a little “cleaner,” too.
Color Optimization
This technique is rather complicated and works only for certain kinds of images. But we’ll go over it anyway, if only to learn the theory.
First, we need to know which color model is being used for the JPEG format. Most image formats are in the RGB color model, but JPEG can also be in YCbCr, which is widely used for television.
YCbCr is similar to the HSV model in the sense that YCbCr and HSV both separate lightness for which human visual system is very sensitive from chroma (HSV should be familiar to most designers). It has three components: hue, saturation and value. The most important one for our purposes here is value, also known as lightness (optimizers tend to compress color channels but keep the value as high as possible because the human is most sensitive to it). Photoshop has a Lab color mode, which helps us better prepare the image for compression using the JPEG optimizer.
Let’s stick with the microwave oven as our example. There is a fine net over the door, which is a perfect sample for our color optimization. After a simple compression, at a Quality of 55, the file weighs 64.39 KB.
990×405 pixels, Quality: 55 (in Photoshop), 64.39 KB.
Larger version.
Open the larger version of the image in Photoshop, and turn on Lab Color mode: Image >> Mode >> Lab Color.
Lab mode is almost, but not quite, the same as HSV and YCbCr. The lightness channel contains information about the image’s lightness. The A channel shows how much red or green there is. And the B channel handles blue and yellow. Despite these differences, this mode allows us to get rid of redundant color information.
Switch to the Channels palette and look at the A and B channels. We can clearly see the texture of the net, and there seems to be three blocks of differing intensities of lightness.
We are going to be making some color changes, so keeping an original copy open in a separate window will probably help. Our goal is to smooth the grainy texture in these sections in both color channels. This will give the optimizer much simpler data to work with. You may be wondering why we are optimizing this particular area of the image (the oven door window). Simple: this area is made up of alternating black and orange pixels. Black is zero lightness, and this information is stored in the lightness channel. So, if we make this area completely orange in the color channels, we won’t lose anything because the lightness channel will determine which pixels should be dark, and the difference between fully black and dark orange will not be noticeable on such a texture.
Switch to the A channel, select each block separately and apply a Median filter (Filter >> Noise >> Median). The radius should be as small as possible (i.e. until the texture disappears) so as not to distort the glare too much. Aim for 4 in the first block, 2 in the second and 4 in the third. At this point, the door will look like this:
The saturation is low, so we’ll need to fix this. To see all color changes instantly, duplicate the currently active window: Window >> Arrange >> New Window. In the new window, click on the Lab channel to see the image. As a result, your working space should look like this:
The original is on the right, the duplicate on the left and the workplace at the bottom.
Select all three blocks in the A channel in the workplace, and call up the Levels window (Ctrl+L or Image >> Adjustments >> Levels). Move the middle slider to the left so that the color of the oven’s inside in the duplicate copy matches that of the original (I got a value of 1.08 for the middle slider). Do the same with the B channel and see how it looks:
990×405 pixels, Quality: 55 (in Photoshop), 59.29 KB
Large version
As you can see, we removed 5 KB from the image (it was 64.39 KB). Although the description of this technique looks big and scary, it only takes about a minute to perform: switch to the Lab color model, select different regions of color channels and use the Median filter on them, then do some saturation correction. As mentioned, this technique is more useful for the theory behind it, but I use it to fine-tune large advertising images that have to look clean and sharp.
Common JPEG Optimization Tips
We’ll finish here by offering some useful optimization tips.
Every time you select the image compression quality, be deliberate in your choice of the program you use for optimization. JPEG standards are strict: they only determine how an image is transformed when reduced file size. But the developer decides what exactly the optimizer does.
For example, some marketers promote their software as offering the best optimization, allowing you to save files at a small size with high Quality settings, while portraying Photoshop as making files twice as heavy. Do not get taken in. Each program has its own Quality scale, and various values determine additional optimization algorithms.
The only criterion by which to compare optimization performance is the quality to size ratio. If you save an image with a 55 to 60 Quality in Photoshop, it will look like and have the same size as files made with other software at, say, 80 Quality.
Never save images at 100 quality. This is not the highest possible quality, but rather only a mathematical optimization limit. You will end up with an unreasonably heavy file. Saving an image with a Quality of 95 is more than enough to prevent loss.
Keep in mind that when you set the Quality to under 50 in Photoshop, it runs an additional optimization algorithm called color down-sampling, which averages out the color in the neighboring eight-pixel blocks:
48×48 pixels, Quality: 50 (in Photoshop), 530 bytes.
48×48 pixels, Quality: 51 (in Photoshop), 484 bytes.
So, if the image has small, high-contrast details in the image, setting the Quality to at least 51 in Photoshop is better.
(al)
Sergey Chikuyonok is a Russian front-end web-developer and writer with a big passion on optimization: from images and JavaScript effects to working process and time-savings on coding.
- 125 Comments
- 1
- 2
July 1st, 2009 2:27 pmAnyway, JPG is not for design. PNG FTW!
- 3July 1st, 2009 2:29 pm
Very interesting… However a little hardcore manipulation and treatment to apply to a whole lot of jpegs…
Anyway thanks for the tip !
- 4July 1st, 2009 2:31 pm
sh has just proven the next article should be gif vs jpg vs png and their usages in modern web design explained in a case study :)
- 5July 1st, 2009 2:35 pm
Interesting article. Thanks, SM!
- 6July 1st, 2009 2:38 pm
Wow, this was very interesting. I’m not saying I’ll go in to these depths when optimizing, but really nice read. Thank you!
- 7July 1st, 2009 2:40 pm
@Floris (#4): nice point! We would like to welcome authors who could write a very solid, professional article “GIF vs. JPG vs. PNG” – please contact
editor {]at[} smashingmagazine point com
only if you have experience and you are sure that you can write a profound and useful article that would help the community. We pay well. Thank you.
- 8July 1st, 2009 2:50 pm
Interesting techniques, look forward to the PNG follow up.
These minor adjustments may not look like much but every bit helps when slimming down heavily trafficked images or sites, and a few kilobytes is easier to shave off of jpgs then it is on markup.
- 9July 1st, 2009 3:01 pm
Great stuff! This should help in my day to day work. The real optimization troubles i have, deal mostly with GIF and transparency’s.
I just don’t know how to optimize the use of the format and end up using PNG-24
- 10July 1st, 2009 3:02 pm
waste of time. this much work for a few bytes. with the way speed is increasing, a few bytes in a jpeg are no big deal.
- 11July 1st, 2009 3:18 pm
I agree with Steve, those tiny bits should not make a difference in modern webdesign… I would like to read a more general article about this subject, focussed on the differences with jpg, png, etcetera and the best way to use the different image types. This is probadly too much in depth for me…
- 12July 1st, 2009 3:39 pm
I have never commented before in this page.. But this post, this post deserves it. Amazing, thankyou.
For the ones commenting about the bytes, its not only about lowering the size, its also about getting better quality.
- 13July 1st, 2009 3:56 pm
Although reducing file size by a 100bytes is not going to make any noticable difference to download times, I enjoyed finding out more about how JPG compression actually works.
A rundown of the best methods for optimising PNG-24 would be very welcome, since Photoshop doesn’t offer any tools for this.
- 14July 1st, 2009 3:57 pm
Very Interesting techniques. They’re pretty complex, but I’ll have to try these out sometime.
- 15July 1st, 2009 4:12 pm
Dial up is still quite common in regional areas and any saving is worth the effort! Good article.
- 16July 1st, 2009 4:39 pm
Very helpful! thank much.
- 17July 1st, 2009 5:33 pm
Very interesting. Although I doubt I’ll really ever need these techniques, it never hurts to learn something new. Thanks!
- 18July 1st, 2009 5:50 pm
Great explanation of the theory behind jpg compression. And I did the LAB exercise, too. …don’t totally understand it, but it’s enough to stick in my craw, and make me finally delve into it a bit more. Gracias.
- 19July 1st, 2009 6:03 pm
Individual mentality… 100 bytes per image per person per site amounts to millions of bytes per day that end up clogging the pipes.
- 20July 1st, 2009 6:17 pm
Shaving 10% off of loading time is a worthy goal for a heavily used production site. Like Samsung’s, for example. It all adds up. There is a reason Netflix has a $1MM bounty for “only” a 10% improvement in its movie-recommendation algorithm.
Great article, fascinating, and an expert description of how JPEG compression works in certain particulars. Thank you!
- 21July 1st, 2009 6:30 pm
As alwalys, very usefull, you’re great.
- 22July 1st, 2009 7:06 pm
Good but too short – only 2 techniques. Then I doubt the first will actually work – “real life” images have lots of elements, so when you try to arrange A into grids, you fail it with B or C and vice-versa.
I won’t see me spending time with these practices just to save 5KB. Nice tutorial as always though.
- 23July 1st, 2009 7:30 pm
Sweet article. A good read. Thank you!
- 24July 1st, 2009 8:12 pm
this is a very useful when it comes to designing web icons.. Great post! :)
- 25July 1st, 2009 8:31 pm
Nice tutorial.
Keep posting gud tutorials :)
- 26July 1st, 2009 9:03 pm
With bandwidth and storage getting cheaper and cheaper, this is kind of a useless guide. Basically, save with whatever level looks ‘good’ and try both “Optimized” and “Progressive” to see which one is smaller. Aside from that, all that extra effort to save a few KB seems like a drastic waste of time.
That said, it was interesting to learn exactly how JPG works. I never thought of it before.
- 27July 1st, 2009 9:05 pm
wow and i thought I knew all about JPEG optimization… I have a lot to learn from you guys.. thank you..
- 28July 1st, 2009 9:30 pm
Got Samsung microwave too…
- 29July 1st, 2009 9:45 pm
Very usefull, thanx for this article.
- 30July 1st, 2009 9:57 pm
Intrstn artkl 2 falow-up….
Nyc & 10x.
Rgads,
VRVIP - 31July 1st, 2009 10:02 pm
Nice article – thanks! Takes me back to the “good old days” of trying to save every last byte on an image with my own compression algorithms. It also reminds me of one particular project where we used Fractal Image Encoding to compress photographic images down to incredibly small sizes which could then be “zoomed in on” beyond 100% and the decoding software would attempt to recreate detail without pixelation or distortion. It was extremely cool. We had to use a ridiculously expensive hardware card to do the encoding but the decoding could be done in software. This was around ‘92/’93 and ours was the first commercial CDROM application to use Fractal Encoding – we were able to store a massive number of photos on a single CD, far more than would normally be allowed.
- 32July 1st, 2009 10:23 pm
this is a smart post
- 33July 1st, 2009 10:23 pm
This is a great article~ Great tutorial and tricks. x3
- 34July 1st, 2009 10:53 pm
Nice post thanks.
Which programs do you recommend for JPEG optimization.
How do those softwares compare to the Photoshop when it comes to JPEG optimization
- 35July 1st, 2009 11:13 pm
‘as you already know…’ No I didn’t. Now I do. :)
- 36July 1st, 2009 11:18 pm
good to know….10x
- 37July 1st, 2009 11:18 pm
This is a great article~ Great tutorial and tricks. x3
- 38July 1st, 2009 11:20 pm
hi to art.lebedev studio ^)
i use your PNG optimization techniques, tnx! - 39July 1st, 2009 11:21 pm
Great article, luv the simplicity and can’t wait for the follow up on .jpg vs .gif vs .png
- 40July 1st, 2009 11:22 pm
Adobe (at the CS4 launch tour in Stockholm) has said that use Fireworks instead of Photoshop for JPEG optimization, it has a better engine when it comes to web size (ie not JPEGs that are huge and for print) images.
- 41July 1st, 2009 11:26 pm
What about an article on Adobe(R) programs. Photoshop, Fireworks etc. Which once is best used on what application/image??
- 42July 1st, 2009 11:34 pm
Wow… I didn’t know this about JPG. Great post!
- 43July 1st, 2009 11:35 pm
Unlike many of the other articls on SM, it’s nice to see this one delving beneath the surface a little more.
Some very interesting techniques, and ones that might prove useful in a situation where every bit counts.
- 44July 1st, 2009 11:44 pm
Nice Post. ~ ~
- 45July 1st, 2009 11:49 pm
Very nice post.
OT: When I watch this page in Google Chrome the article ist incomplete and stops loading in the Color Optimization part. can anyone confim this?
- 46July 1st, 2009 11:55 pm
@rogerpfaff
Yeah I had the same result the page stops loading in the Color Opt. I reload the page and everything looks fine. Maybe its a bug or something. Anyway very nice article. Keep it up. - 47July 2nd, 2009 12:39 am
To those saying it isn’t worth it because you only save a few bytes:
Do you only have 1 image on your page? Saving bytes on multiple images all adds up.. and if you’re viewing the site on a mobile device that doesn’t have super fast broadband; every little helps.
- 48July 2nd, 2009 12:47 am
Is it worth it for 5kb?
- 49July 2nd, 2009 1:25 am
Which programs do you recommend for JPEG optimization.
How do those softwares compare to the Photoshop when it comes to JPEG optimizationI recommend to use xat.com image optimizer. It has a nice selective optimization engine, but it Windows-only.
It is also possible to do selective optimization in Photoshop, but it’s really buggy.
What about an article on Adobe(R) programs. Photoshop, Fireworks etc. Which once is best used on what application/image??
I prefer to use Photoshop for my daily work, because I do a lot more with images when exporting them for web (and you’ll see it on my next PNG article). I was looking for PS alternative for a few years, but all the software I tried didn’t contains even 20% of needed tools.
- 50July 2nd, 2009 1:45 am
I saw this article on site, but it was in Russian :( Looking forward for next articles.
- 51July 2nd, 2009 1:46 am
I have a question, don’t know related or not related to this article (thank you for it, a lot of useful information), what goes on with red, pink and similar dominating gamma of colours of an image when it is uploaded somewhere where restricted size or weight of file is unavoidable? For example photoalbums on myspace, facebook etc which compress the image seriously (up to their own norms). Nothing bad happens to images (jpgs as a rule) created in any other gamma of colours, but when the dominant is red something awful happens with the image, I am sure you know how it looks. Is there any method to avoid this catastrophe? Recently I made a poster (for Internet, not for print, that is why it is jpg in RGB), to be honest it looks very good in viewer, photoshop, everywhere else in its original quality and weight, but I uploaded it on facebook album (which of course makes some compression) and as a a result—strongest pixelation, and looks ugly of course. This is a real puzzle for me and headache… If somebody knows what to do with red images in order to avoid such the troubles, please share your secrets, thank you in advance.
- 52July 2nd, 2009 1:49 am
really interessting…. some very good tips
- 53
- 54July 2nd, 2009 2:07 am
this is all very boring
- 55July 2nd, 2009 2:13 am
so…. wait a minute… all this to squeeze 1 KB out of an image?
- 56July 2nd, 2009 2:14 am
Nice and useful article.
However, there is quite serious typo in line (just sounds stupid):
RGB is similar to the HSV model
at the beginning of Color Optimimization section.
should be:
YCbCr is similar to the HSV model
in the sense that YCbCr and HSV both separate
lightness for which human visual system is very sensitive from chroma. - 57July 2nd, 2009 2:17 am
thanks, it’s refresh brain article.
- 58July 2nd, 2009 2:31 am
Really really reaaaaaly nice post.
:)
- 59July 2nd, 2009 2:53 am
It got too technical for me there, I’d rather read an article about best export settings for different types of images, common situations etc!
- 60July 2nd, 2009 2:54 am
That was such an interesting post – well done. I had no idea about these techniques, I’ll be using them first thing tomorrow!
- 61July 2nd, 2009 3:00 am
Jaypegg is a silly format for design where shapes and shit need to stay in one colour. Save it for the office ladies who e-mail attachments of their desktops to their co-workers.
- 62July 2nd, 2009 3:33 am
@Jubal: A 10% reduction in filesize, and a 10% improvement in a suggestion algorithm are two completely different things, that can’t even be compared.
- 63July 2nd, 2009 4:16 am
great article! Looking forward to the PNG article :)
- 64July 2nd, 2009 4:28 am
wow. This is a level of insight I haven´t found anywhere else so far. And yet all very relevant to practical usage.
Truly excellent. - 65July 2nd, 2009 4:56 am
Thanks so much for this article.
I agree, this is a bit techie in order to save a few bytes. And the people who would do this amount of work are probably already conscientious of their file sizes. However, it does help in the understanding of the compression techniques. I try to be thoughtful of file sizes, considering my personal website has limited storage space.
Although I know the generalities of compression (the JPEG blocks, GIF compression) a good comparison of JPEG, GIF and PNG would be very helpful. I *thought* PNG was developed to be the replacement for GIF back when there were patent issues with GIF, but it seems like PNG files are always larger than GIF and JPEG files. And what about JPEG2000? What ever happened to that format? - 66July 2nd, 2009 5:01 am
Jaypegg2000 got SMASHED by the Y2K-bug! :O
- 67July 2nd, 2009 5:04 am
This article is a tremendous help! I can’t wait to read the PNG article!
thank you!
- 68July 2nd, 2009 5:33 am
I agree that saving a few bytes here and there does add up and for that reason I’ll back this up. Theres only one problem though. What if you have thousands of images? I don’t fancy sitting there doing all that work. Might save on bandwidth but doesn’t save on my time. Oh and if I’m paying someone to do it – well I don’t need to know this. Just my opinion.
- 69July 2nd, 2009 5:37 am
Really cool article! It is really useful for web designers like me.
- 70July 2nd, 2009 5:58 am
I *thought* PNG was developed to be the replacement for GIF back when there were patent issues with GIF, but it seems like PNG files are always larger than GIF and JPEG files.
JPEG is good for photographic images, while PNG is the best format for storing line-art (like logos, vector graphics, gradients, etc.) images. JPEG almost always introduce image quality degradation, while PNG saves image data “as is”, without changing image.
And PNG is better than GIF in every aspect. There are some cases when GIF is smaller than PNG (because of some overhead used to store image data in PNG), but the image must be too small.
And what about JPEG2000? What ever happened to that format?
JPEG2000 doesn’t have enougth support in web-browsers, so this format is rather useless for web graphics.
- 71July 2nd, 2009 6:01 am
Very easy to tell the professionals from the people who have only designed their own site.
Are some of you serious?
Only a few bytes?
Not only will these few bytes make a HUGE difference on a graphics heavy page, but it will add up in the end with bandwidth.
Go try and get a job working for a heavily trafficked site, or tell a client that wants to save money on bandwidth that it’s “just a few bytes”.
That is a horrible way to think as well as terrible work ethic.
As for image files, I use PNG and TGA files, mainly because of embedded alpha channels. GIF files have a very limited number of colors, and JPG degrades.
Key word here is LOSSLESS. Google that shiz.
- 72July 2nd, 2009 6:04 am
Nice approach to the nitty-gritty details Sergey. This is especially helpful on stylized controlled images and backgrounds. Keep them coming. I host a lot of sites on my server, and this sort of optimization can help keep them under storage and bandwidth limits.
- 73July 2nd, 2009 8:10 am
As far as application goes, I see a marginal number of people making use of this tutorial more than occasionally – despite the value it can provide. From the theory side of things, however, this was fascinating and worth the read. For those of us without art or graphic design backgrounds, every little piece of this helps us better understand digital processes and overall design technique.
- 74July 2nd, 2009 8:12 am
@greg: I think the issue here is workflow and considering the merits of spending a minute per image on a process that has a relatively limited payoff.
Being a professional includes making sure that one is working to schedule and using allocated hours wisely. It’s to do with simple economics (not ethics).
BTW ‘lossless’ algorythms such as those used in the PNG-24 format result in no loss of data, but usually produce larger file sizes – which kind of contradicts your argument.
- 75July 2nd, 2009 8:23 am
Well done, Sergey! I learned these techniques back in school — from one of my professors who worked at NASA Ames doing this:
http://128.102.216.35/factsheets/view.php?id=56Thanks for the refresher course. You have an enviable way of distilling complex subject matter into easy to understand language. I’m looking forward to your follow-up article.
- 76July 2nd, 2009 8:33 am
Interesting, I have been photoshop optimizing for quite some time, its good to know the more indepth to how it all works, and some tips to do it better.
- 77July 2nd, 2009 8:34 am
I’d use PNGs exclusively if it wasn’t for goddamn IE6.
- 78July 2nd, 2009 8:41 am
“Not worth saving a few bytes”…
This is the same argument people present for not living greener – that they alone make no difference. In mass quantities, little changes make a huge difference in the overall quality of life – and in this case, user experience.
Value is a objective metric of satisfaction. What makes one person very happy may be completely irrelevant to another.
Come on, guys, the tech-web culture is supposed to be smarter than this. Don’t say something is worthless just because it doesn’t appease your personal interests.
- 79July 2nd, 2009 8:43 am
“I’d use PNGs exclusively if it wasn’t for goddamn IE6.”
LOL… absolutely!
I’ve started using an Apache redirect for IE6 clients – it takes them to the mobile version of the respective site. That’s about the only thing IE6 can digest!
- 80July 2nd, 2009 10:50 am
Can anyone clarify the difference between normal JPEG in Photoshop versus the Save For Web JPEG algorithm? Save for Web Optimized are often fractions of the size– is there a more complicated order of operations that JPEG considers other than color-down sampling at 50 percent?
- 81July 2nd, 2009 10:57 am
For JPEG optimization, you can try using punypng.
It’s a service I wrote that is kinda similar to Smushit. However, unlike Smush.it, it’s a little smarter when dealing with JPEGs, as it will try to use a lossless PNG compression (which might be beneficial if the JPEG has a lot of solid colors). If it that doesn’t produce savings, punypng will use jpeg-tran to strip out meta-data. Either way, it’ll help you produce the smallest JPEGs possible.
Give punypng a try.
- 82July 2nd, 2009 11:02 am
Despite all the naysayers of JPEG, this article is very interesting and informative. Personally, yes, I use PNG most of the time, but the insight into image data you’ve provided is worthwhile.
- 83July 2nd, 2009 11:31 am
great post and very informative… great reading through the comments here as well.
not sure, but i wonder if i’m the only one thinking that’s a pretty slick looking microwave…
- 84July 2nd, 2009 11:32 am
Can anyone clarify the difference between normal JPEG in Photoshop versus the Save For Web JPEG algorithm?
In both cases Photoshop uses the same algorithm, but when you save JPEG normally PS also generates and saves the preview image inside the original one. Thus, you get two images inside single file.
The same behavior is used when saving in PNG, GIF or any other format. So, if you create images for web, Save For Web is your best friend.
- 85July 2nd, 2009 3:19 pm
For images that really count where I’m trying to squeeze out the best quality with the smallest file size I’ve used the Photoshop alpha channel quality control. Essentially you create a new alpha channel and mask the most important sections of your image. Using Save for Web, click the icon next to the Quality slider and choose the channel. Now adjust your min and max quality and watch the file size difference. Sure it’s slow if you’re doing batches and not ideal for highly detailed images across the whole rectangle, but for images with solid fields or low detail (sky, walls, bokeh, etc.) this will allow you to selectively control image compression. You can achieve 5-10% file size reduction quite easily. If a quick write-up would help, let me know and I’ll get something posted.
- 86July 2nd, 2009 3:20 pm
Additional technique that has not been mentioned here (also from the “old days”) is to use Photoshop alpha channel to control quality settings. Think of “masking” certain areas of the image and compressing them more than other areas. This can be used to leave one key object sharp at high settings and use low settings for background.
- 87July 2nd, 2009 5:49 pm
The color manipulation trick is cool but a bit adhoc. Insightful article though–Thanks!
- 88July 2nd, 2009 8:37 pm
Tanya,
I too noticed this weird thing happening to orangey and red little images, not just compressed by other applications but by browsers as well. Not always though. It’s puzzling to say the least. I’d be interested to find out as well. - 89July 2nd, 2009 10:59 pm
You can tell there are a lot of people here that only work small. It’s not just about lowering the amount of bytes for the visitor, it’s also for reducing the load on the server.
Huge sites, that obviously most people here never work with, do care about reducing both code and images in file size. This obviously isn’t that important when you do your wordpress websites for someone that has 10 visitors in a month…
Great idea for an article series.
- 90July 3rd, 2009 12:00 am
Interesting. Thanks!
- 91July 3rd, 2009 12:14 am
Nice and in depth-analyxing article!
I’ve heard that the eight-pixels-grid-tip can be used when optimizing jpg to print as well… It’s all about “scaling” the quality so it matches the printers output-dpi/lpi… Or something like that…
:)
- 92July 3rd, 2009 12:50 am
I’d love to see some real life web case studies, with maybe the top 5 or 10 image optimisation work flows professionals are using.
For each format .jpg .pngs, That would really help me out.
(Not asking for much hey lol) - 93July 3rd, 2009 2:54 am
Wow! brilliant post! thanks a lot Smashing Team!
- GearYourFaith.com - 94July 3rd, 2009 3:46 am
.. feel like a complete rookie..
- 95July 3rd, 2009 5:29 am
Good article, I was unaware of the 8px grid. I have to think some of the uninformed comments here are from those that don’t do much professional web work. No – you probably won’t go to great lengths to optimize a jpg if you’re only uploading it to Facebook or a blog, but if it’s a site for a client, then as a professional you should always strive for the highest quality within a given file size.
Regarding PNG, those commenting that PNG is only lossless – don’t forget about 8-bit PNG, which is tantamount to GIF (256 colors; alpha channel).
Sergey, I’d love to see more; maybe covering embedded color profiles in both jpg and png?
- 96July 3rd, 2009 6:14 am
Very simple and helpfull, thx you for your article ; )
- 97July 3rd, 2009 10:31 am
The optimization is a bit pointless. The size doesn’t matter. A cleaner picture is fine, but now one corner of the microwave screen is cleaner. What’s with the other corner? Unless everything is designed on a 8 pixel grid, this optimization is useless.
- 98July 3rd, 2009 5:50 pm
One of the problems today is that a lot of people have entered the field of web design at a time when bandwidth is cheap and plentiful and there is a reliance on the IDE to do it all for you, and it is assumed that whatever is output is fine as it is. Those of us who grew into web design/development from the CDROM industry and had to deal with the problems of 56K dialup and extremely limited storage and traffic allowances (yes, there was a time when web hosts didn’t offer “unlimited everything”). At that time it was imperative that all images were optimized to their full, and saving a couple of K here and there was cause for celebration.
That mindset has carried over to this ‘new internet’ for many, and even though the bandwidth and storage are plentiful, the savings that can be achieved through selective optimization are still definitely valid.
And, additionally, for those of us who care about such things – there’s a sense of achievement in making those savings in file size. It’s the same feeling of accomplishment us programmers get from optimizing code, chopping a few lines out of a program or improving the performance of an algorithm. Most people would never notice, but we know we did it and our day is a little bit brighter for it. :)
- 99July 3rd, 2009 7:00 pm
Thank you for this post.
Some posts have said it doesn’t affect saving a few pixels. However, because I work for mobile interfaces, it is critical to save even a few pixels. People likely want to see the content as quick as possible. - 100July 4th, 2009 12:10 am
thanks for sharing,, really nice aricle
- 101July 4th, 2009 2:31 am
Interesting to see that 51 quality actually gives better result at lower byte size with those contrasts. Good post imho!
- 102July 4th, 2009 4:49 am
Great article. Does anyone have any further recommended readings?
Thank you again!
- 103July 4th, 2009 7:12 am
Thankx, this is very helpful on big graphic-heavy sites rather than portfolios or blogs.
- 104July 4th, 2009 10:00 am
The need to shave 100 b off a file may pale in the days of ‘unlimited’ storage and fat pipes, but I also think that the craft is just as important as the art. It’s about taking pride in creating a thoroughly high-quality piece of work.
I remember reading about assembly-language programmers working on microcontrollers, who would rewrite chunks of code to save three or four bytes. Now that’s craft!
I really enjoyed this article; it’s a good bit of info to put into my quiver.
One question: Are you running Photoshop on Linux in the last screenshot?!
- 105July 4th, 2009 2:54 pm
Great in-depth post! And well-written too because it’s surprisingly easy to understand. I learned a lot. Two thumbs up!
- 106July 5th, 2009 5:03 am
interesting post. The only question is if savings of a few kb make sense in times of broadband internet.
Thanks anyway for the interesting insight. - 107July 5th, 2009 1:23 pm
Congratulation Sergey! Very useful article.
From Russia ^ ^ - 108July 5th, 2009 4:19 pm
We created a tool for helping with some lossless optimization against entire folders of images. Check out TinyOptimizer here http://www.tinycdn.com/Utilities/TinyOptimizer
Currently it handles png’s, js and css.
Thanks and great article.
John
- 109July 6th, 2009 1:21 am
Great article, thank you! Like that microwave btw…
Looking forward to PNG. Be sure to include those juicy gAMA chunks! This is what I came across: I saved a PNG for web out of Illustrator (I’m working on XP, unfortunately without Fireworks…). Of course, of all browsers it was only Explorer 8 that displayed that PNG file with a darker background (i.e. not matching my background color set in CSS). Weird. So I googled “IE8 shows different colors png” and lo and behold, Illustrator and Photoshop save PNGs with gAMA chunks – responsible for the darker color value! Jeez… TweakPNG helped me out. I miss my Fireworks – for web work it really has many advantages compared to PS and Illustrator (e.g. saving Alpha PNGs, creating mock ups in due time, etc.).
- 110
- 111July 6th, 2009 8:06 am
I agree with Greg (71).
I have worked for a few very large companies and in all of them we have had debates on how to shave the most possible from the page. It saves the company server costs and allows even the slowest connections a quicker load time.
When your site is generating millions in revenue and has millions of page impressions a day even a few bytes can save thousands!
- 112July 6th, 2009 2:26 pm
One question: Are you running Photoshop on Linux in the last screenshot?!
No, it’s WinXP with custom them found on http://www.deviantart.com (I don’t remember it’s name because it’s very old screenshot)
- 113July 6th, 2009 6:22 pm
Thank you Sergey,
Helped me to optimise the BG in my site - 114July 6th, 2009 10:22 pm
great article, thank you!
- 115July 7th, 2009 4:08 am
You may find also that PNG-24 sometimes less heavier than JPG when the image contains a lot of white spaces…
Good article! Thanks
- 116July 7th, 2009 5:19 am
Amazing this tips!!!! i had no idea about the 8 grid in jpg.
Im checking my images right now to set them up better.
Thanks - 117July 7th, 2009 7:45 am
“@greg: I think the issue here is workflow and considering the merits of spending a minute per image on a process that has a relatively limited payoff.
Being a professional includes making sure that one is working to schedule and using allocated hours wisely. It’s to do with simple economics (not ethics).”
You’ve completely missed my point. If you’re wasting too much time optimizing images, then you have other issues. And as a designer, work ethic is probably my top concern. It encompasses quality, practice, AND economics… all of which end up in a product that delivers on all fronts.
Dismissing something like a “few bytes” is NOT good work ethic, and ignoring that fact or not spending a little extra time to possibly save thousands is not wise at all.
- 118July 8th, 2009 12:13 pm
I prefer to use strictly png-24 images on my designs… but, unfortunately IE6 doesn’t support it, so I’m forced to go old school and run different variations.
- 119July 8th, 2009 1:57 pm
Total garbage
- 120July 15th, 2009 12:20 pm
Re: Shir Gans comment on PNG-24 being less heavier than JPG when the image contains a lot of white spaces… FYI, punypng takes that into consideration when it processes JPGs. Sometimes it comes back with a png, sometimes as JPG. punypng just takes both routes and see which ones works better.
- 121July 17th, 2009 7:44 am
I didn’t know about the difference between quality 50 and 51 in Photoshop. In other programs you control quality (quantization) and chroma-sumbampling separately. That is very important: subsampling (e.g. YUV 4:2:0) works well and is not noticed in photographs, but degrades quality a lot in drawings with saturated colors.
Apart from Photoshop’s Save for Web I recommend RIOT for quick saving of JPEG/PNG (or its Irfanview plugin). You can change quality settings interactively, switch between JPEG and PNG, reduce number of colors, etc. and see the final result live.
- 122August 3rd, 2009 10:09 am
Hmm. As someone who does mainly retouching for web product photography, this is pretty interesting. I’m always on the lookout for methods that make a product look as good if not better than it does in reality. The info on the 8px grid is very beneficial, and explains a lot. I have to take a lot of large silo’d product images and produce many smaller collateral versions of them, and they get fuzzier the smaller they get, regardless of optimization quality readings. My goal is to have a neat small image with a crisp white background. I will try using this grid.
One thing I do to prevent pixel “bleeding”…since I do major clipping paths on these product images already, I save the path, activate it, inverse it and delete the background around the silo image every time it is reduced in size. This does a fine job getting rid of artifacts and keeps lines very clean.
Also – some product images I do – luxury pens, for example – need to be shown both in a -45 degree angle, and horizontal. Changing a -45 degree angle pen image to horizontal results in jagged bitmapped images. Therefore, I process the incoming vertical photography and save out two master versions, one at a straight angle (vertical or horizontal) and another at -45 degrees that will never be used for anything but.
Good info on the LAB color. This will require more study for sure.
- 123August 17th, 2009 9:54 pm
Browsers work faster and better with jpg, but everything has its place. We need jpg-s just as same as png-s.
- 124November 13th, 2009 10:14 am
To those who are bickering about 1kb here, 1kb there, try working on banners that have a 40kb, or worse, 30kb ceiling. And there are six images in the banner. And there’s overhead for the animation and/or code for the interaction.
Many of you, it seems, haven’t worked in the “real world” where conditions aren’t dependent on YOUR wants and desires and abilities, but on the capabilities of the system, the inhibitions of particular serving platforms, and of course, the clients’ wants, that the files have to go through. It is a very rare day that one can create, produce, and deliver in a Utopian environment.
I have sometimes spent a whole day squeezing 2kb out of every item in a banner just to come under those specs.
Awesome insight into how the algorithms work – it’s helped me understand a lot better how I can even effect the originals in order to produce a smaller end result!
Thanks!
- 125December 1st, 2009 7:37 am
You forgot to mention what are the MAIN factors for image compression, not size, resolution, nor colors, but any fine detail like graininess, sharpness and patterns.
Here I posted a short explanation of what matters when it comes to jpg compression, which also works for wordpress users, and gives you a few tips for really lower your bandwith: http://seosumo.com/right-compression-settings-to-save-jpg-images-for-wordpress
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
- CSS3 Browser Tilt-Shift: an experiment trying to create a Tilt-Shift effect on Text using only CSS3 - http://bit.ly/9Bs3nr.
- New on SmashingMag: In Defense Of Photoshop - http://bit.ly/cKmD5Y (now with a Facebook Like-button)
- The Web’s Undead - http://bit.ly/cZQQQ2 - Very nice short article.
- 40 Free Professional and Detailed Web Layout PSD Templates - http://bit.ly/bIoKWG
- Recurring Billing For Web Apps - http://bit.ly/anOcua - A closer look at recurring billing systems.
- @adam_d sometimes it's just plain hard to do it, but if you do, it's really productive.
- Getting Motivated with Your To-Do List - http://bit.ly/9O7CRJ
- New on SmashingMag: In Defense Of Photoshop - http://bit.ly/cKmD5Y (now with a Facebook "Like"-button)
- .@vukasin good question, I am all about strict separation of content and ads and social stuff. Now, it's getting kind of... blurry.
- Feeling a bit dirty adding a "Like me"-button to the last SmashingMag's post. In general, just interesting to find out how powerful it is.
Woot! First comment! Nice post…very interesting – thanks.