Embed Size (px)
DESCRIPTION
Check out the hangout at: https://plus.google.com/events/cf4egqaif1dutok02idrj8ma3c4 As images increase in importance as part of Web design, optimizing those images through compression becomes a critical skill for Web designers and developers to learn. To this end, we’ll be hosting a Google® Hangout on Friday, June 13, entitled “Thinking Small About Image Compression.” This Hangout is part of our monthly series on optimizing site performance. This month, we’ll discuss how image optimization can speed up page loads for new and returning customers to a website. To help demonstrate the difference this can make, Kyle Mauch, CEO and founder of AthletesBrand.com, will join GoDaddy’s Dave Koopman and Marcel Verkerk for the hangout.
Citation preview
How To Make Your Website Faster
Episode 2) Image Optimization
The Goal
Smallest filesize;still looks great
1.01MB 92.76 KB
What Format? When? How?
JPEG (JPG)Use for
● Photo
Tips● Resize WxH● Remove all metadata● Progressive always● 75 quality, try lower
PNGUse for
● Graphics (logos, graphs)● Transparency
Tips● Resize WxH● Remove all metadata● Interlace size tradeoff● Try 8-bit (256 colors) and lower
○ 24bit okay
GIFUse for
● Very small image (1x1 pixel)
● Animation needed
JPEG - Quality vs File Size!
Tools of the trade[GENERIC TOOLS]RIOT Windows GUI based and CLI based + batch processing
ImageOptim GUI based tool for Mac
ImageMagick Multi-platform command line utility
[ONLINE TOOLS/SERVICES]Smush.It Yahoo’s free JPEG and PNG optimizer
tinypng Free drag & drop tool for PNG optimization (reduces color palette to 8-bit!)
kraken.io Supports JPEG, PNG and GIF - free and paid service
JpegMini JPEG optimization; free and paid services
[OTHERS]PNGOptimizer, PNGcrush, OptiPNG, JpegOptim, JpegTran
Athletesbrand.com - Before/After
0.7 MB!2.8 MB!
BEFORE AFTER
