Image optimization – 7 mistakes
The slides from my talk at the Velocity conference
This entry was posted on Thursday, June 26th, 2008 and is filed under images, performance. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
June 26th, 2008 at 3:17 pm
[...] Good content on image optimization from Stoyan Stefanov, something most people often forget. We have a build system that does this automatically, but we should also have something in there to make sure we use PNG8s instead of GIFs whenever possible. Added to my TODO list. [...]
June 27th, 2008 at 1:20 am
[...] 资源链接：原文，原PPT，译PPT [...]
June 27th, 2008 at 9:50 pm
Interesting stuff – those are certainly some big numbers. Doesn’t setting an expires: time far in the future for static images reduce the gains you’d get from turning your gifs into pngs? Also, I suspect that the page weight for YouTube doesn’t include the easy-to-overlook contribution of the video file…
June 28th, 2008 at 10:00 am
Thanks! Useful presentation!
It says though that PNG8 supports alpha transparency, is that true?
June 28th, 2008 at 11:02 am
Hi Lea, thanks. PNG8 does support alpha transparency. Full alpha in Firefox, Opera, Safari, IE7+ and GIF-like transparency in IE6 and earlier
You can check this article, pretty useful stuff http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
Unfortunately, I don’t think Photoshop allows you to do this, but Fireworks does.
Jake, Expires header does help, but as Yahoo research shows empty cache experience happens more often than we think, more specifically 20% of all page views and 50% of all page visits http://yuiblog.com/blog/2007/01/04/performance-research-part-2/. About youtube, I don’t know, I looked at the pies in YSlow stats. The FLV is streamed, so maybe it’s not included, because YSlow/Firebug cannot tell the size of streamed stuff.
June 29th, 2008 at 10:17 am
PNG8 doesn’t support animations, does it? well, I almost never use them, i’m just interested in it.
June 29th, 2008 at 11:39 am
Thanks so much!
I never thought it was possible because Photoshop’s & Illustrator’s Save for Web only allow alpha transparency for PNG24s.
June 29th, 2008 at 3:11 pm
Hi Boštjan, PNG animation do exist (here: http://www.libpng.org/pub/png/png-sitemap.html#animation, but it’s not widely supported, so you do need gif when you want to do animations
June 30th, 2008 at 4:00 am
[...] Stoyan from Yahoo! presents some surprising facts. [...]
June 30th, 2008 at 4:01 am
[...] Stoyan from Yahoo! presents some surprising facts. [...]
July 14th, 2008 at 5:02 am
[...] Stoyan Stefanov, de l’équipe Performance de Yahoo! a donné une présentation fin juin sur l’optimisation des images. J’ai déjà parlé de plusieurs choses, il en rajoute d’autres, avec des chiffres percutants et des explications concices. [...]
July 16th, 2008 at 5:01 am
[...] Je vous avais rapidement parlé de pngcrush pour optimiser les images PNG, sans aucune perte de qualité. Stoyan Stefanov nous propose jpegtrans dans sa dernière présentation sur l’optimisation des images. [...]
September 4th, 2008 at 11:52 pm
[...] online image optimizer, using the free command line tools I talked about at PHP Quebec, Montreal, O’Reilly’s Velocity and the Yahoo! Performance pages. The tool will be free, of course, and hosted on Dreamhost. OK, [...]
January 5th, 2009 at 8:12 pm
[...] Links: 7 Image Optimization Mistakes [...]
June 1st, 2009 at 10:06 am
[...] Optimization – 7 mistakes (and how to correct them)’, http://www.phpied.com/image-optimization-7-mistakes/ [...]
June 17th, 2009 at 12:15 am
Hi Stoyan,
after reading the last months everything you’ve written about image optimization, and Nicole Sullivan’s presentations on YUI Developer Theater, I began using PNG8 more and more.
However the problem is that only Fireworks can export such semi-transparent PNG8, which is kind of a restriction. I saw that the uploaded .gif files on smush.it are returned as 8 bit PNGs, but they are with full transparent pixels, which is normal when you convert them from a GIF.
Here’s a link of a pngquant : http://www.libpng.org/pub/png/apps/pngquant.html which pretends to export semi transparent PNG8 and it’s fully open source.
I hope that may be the missing step between PNG8 and noFireworks developers.
September 17th, 2009 at 5:19 pm
Check out ultimate guide How to Optimize Images for Web with all tools and techniques for PNG, JPEG and GIF optimization in one place. Free Photoshop action for download is included.
November 1st, 2009 at 2:01 am
[...] 图片格式上除了有帧动画的用gif外，其它都用png8/128色。png无损优化的效果确实好。更多关于图片优化的内容可以关注Stoyan Stefanov的文章。 [...]
November 6th, 2009 at 12:38 am
Good advice. I recently found that using Fireworks for optimization is better than Photoshop. You get a smaller file size with better quality. It adds up when thinking of bandwidth.
November 12th, 2011 at 2:39 am
Commercial Property…
[...]Image optimization – 7 mistakes / Stoyan’s phpied.com[...]…
November 29th, 2011 at 7:27 am
Image optimization is using the most compressed yet visually acceptable image in the proper file format for the specific role of the image.Optimizing images for the web is a tricky business. You have to get the right balance between file size and picture quality.