110 likes | 210 Vues
Learn best practices including optimizing formats, reducing file sizes, and combining images into sprites. Discover tools like PNG crush and JPEG optimization. Join the discussion to enhance web performance.
E N D
Image Optimization: 7 mistakes Nicole Sullivan, Stoyan Stefanov Ajax Experience Boston, Sep 30th, 2008
On the agenda 7 best practices demo
What % of page weight is images? • Average 45.6% • some say 50%+ • amazon.com is 71% • huge potential
Best practices No GIFs Crush PNGs Strip JPEG meta Avoid truecolor PNG, use PNG8 Avoid AlphaImageLoader Optimize and cache dynamic images Combine images into sprites
Best practices – automation, lossless No GIFs Crush PNGs Strip JPEG meta Avoid truecolor PNG, use PNG8 Avoid AlphaImageLoader Optimize and cache dynamic images Combine images into sprites
Top 10 sites save No GIFs – 20.42% Crush PNGs – 16.05% Strip JPEG meta – 11.85% Avoid truecolor PNG, use PNG8 Avoid AlphaImageLoader Optimize and cache dynamic images Combine images into sprites
GIF to PNG8 Crush PNGs Strip JPEG meta Bonus: Optimize GIF animations
Let’s keep talking... Stoyan Stefanov http://phpied.com Nicole Sullivan http://stubbornella.org
URLs: Tools PNG crushers pngcrush http://pmt.sourceforge.net/pngcrush/ pngrewrite http://www.pobox.com/~jason1/pngrewrite/ OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ PNGOut http://advsys.net/ken/utils.htm Truecolor-to-PNG8 pngquant (http://www.libpng.org/pub/png/apps/pngquant.html) pngnq (http://pngnq.sourceforge.net/) JPEG jpegtran (http://jpegclub.org/) CSS Sprites Tool: http://csssprites.com