Forty percent of visitors will leave if your site takes longer than three seconds to load, and each second of delay increases customer dissatisfaction by 15%. You need fast loading — you need to boost your website performance. One cause of slow loading web pages is big, fat image files. Since images are the top user of site space, performance optimization starts with images.
Size right: start by matching image resolution to display size. Even when you double the size for high-definition displays like Retina, there’s no reason to load big files when the right size speeds loading. So does using the right file type.
JPEG is the basic file type that digital cameras produce. It’s a “lossy” format, meaning that image quality is lost as file size is dramatically reduced. You’re able to control the amount of loss when you define quality from 1 to 100. As a rule, a setting between 30 and 60 balances quality and file size. Images with large areas of color may show speckling at lower settings, but they’re probably better saved as PNG files anyway. Optimize JPEGs using Photoshop or go online for JPEG-Optimizer.
PNGs are lossless and provide the best quality web images. PNG-8s are smallest with a limited color palette. PNG-8s are ideal for images with few colors, like a logo or graph, and can be optimized with tools like TinyPNG. PNG-24s use the full gamut of colors in your original, so they’re higher quality and much larger. Both formats support transparency, so the logo can be on a transparent background rather than a white box, as with a JPEG.
GIFs are lossless, allow transparency and can handle from 2 to 256 colors. Want a smaller file? Reduce colors. Want a mini-video animation? GIFs do that and are widely used online for comedy, illustration and, occasionally, instruction. Say GIF like gift without the “t,” everyone knows Jiff is a peanut butter.
For something completely different, use an SVG. They’re actually vector graphics, as created in Adobe Illustrator, incredibly small, render as sharp as the viewing device allows (even Retina) and can be animated using CSS and JavaScript. They’re best for simple visuals with few colors. SVG-Optimizer reduces file sizes even further.
Too much to remember? Here’s a handy wrap-up for optimal efficiency:
- If you want transparency in an image, use PNG
- If you want animation, use GIF
- For simple icons, logos and illustrations, use SVG
- If image has few colors, use PNG-8 or GIF with low color count
- Use visually simple illustrations rather than detailed photographs for speedy loading
- For colorful images, use JPEG at image quality setting of 30-60
- Size the image close to display size
- Minimize animations – they are a big processing load for any browser