Looking to improve the performance of a responsive site? Begin by funneling your efforts into image optimization. The average website devotes 70% of its data-size to images, which means attention spans and data plans everywhere will thank you for putting your imagery on a digital diet. Consider the following five tips to improve responsive site speed.
1. Responsive Images
Half a decade ago, during the first wave of responsive design, we were swept off our feet by fluid grids and flexible images. These techniques allowed a single image to squish and stretch to fit any device size. Luckily, our industry eventually looked in the mirror and asked "Do we really want to serve a pocket-sized smartphone and a 30 inch desktop monitor the same image?"
No. No, we don't.
We don't want to burden a smartphone (possibly in a poor reception zone) with the heavy data payload of an image designed for larger screens. Conversely, we don't want to cheapen the desktop experience by using smaller images that don't make the most of a larger digital canvas.
The solution is to send different images to different device sizes. This allows for custom cropping, and more importantly, site performance is boosted through the roof because data payloads are now tailor fitted for each type of device.
2. Lossless Optimization
We can make our image file size smaller without losing any image quality (lossless). When you export an image file from Photoshop all sorts of nonessential data gets added into the mix (your name, the software version, date, time, etc.) Your website visitors do not need this information; they just need the data that creates the image itself. We can also remove any unnecessary characters or spaces in the code that creates the image. This process of trimming the fat from file code is referred to as minification.
A popular way to make minification an automatic part of your workflow is to leverage a build tool like Grunt and use the “imagemin” plugin. Chris Coyier has a post on the brilliant 24 Ways website that will help get you started using build tools. If you prefer a drag'n'drop workflow, be sure to check out the "ImageOptim" standalone application.
3. Trade Resolution for Compression Quality
We can also make our image file size smaller by losing a bit of image quality (lossy). When you save a JPEG, Photoshop lets you choose a compression quality value from 0 to 100. Larger numbers result in slower load times but higher quality images. Choosing a smaller number results in lightning fast images that don't look particularly sharp.
Every website needs high quality imagery, but choosing a high compression quality may not always be the answer. For example, instead of saving an 800x600 image at 90-quality compression, consider saving a 1600x1200 image at 20-quality compression and let the web browser handle the resizing. This will often result in smaller data payloads AND sharper images on high pixel density screens (e.g. Retina). The fine folks at Filament Group have conducted a study on this technique.
4. Reject Photoshop's PNG Binary
When you need an image with transparent portions, you reach for the PNG file format. However, Photoshop only lets you save 8-bit or 24-bit PNG files. The former looks like it's from 1992 and the latter can result in disgustingly large data payloads. Did you know that there is a Goldilocks-approved way of saving transparent PNG files that lives between these two extremes? Try the TinyPNG website or download the free ImageAlpha application to begin experimenting with lossy PNG compression.
5. Choose the Right Format
When we work to keep image files lightweight, we must remember that the efficiency of different formats excel with different types of imagery. Traditional "photograph" images should be saved as JPG files. Imagery with clean lines and/or solid blocks of color should be saved as PNG files. Icons and logos are especially sharp and lightweight if saved with the SVG (scalable vector graphics) format. For best performance keep raster (bitmap) graphics out of your SVG files (think Adobe Illustrator instead of Photoshop). Using the best tool available for a job is critical when creating physical goods and the same applies in the digital world.
Putting It All Together
In short, if you send visitors tailor fitted (i.e. responsive), minified images that use the correct file format and optimal compression settings your responsive site performance will skyrocket. Stay tuned for more posts detailing our top responsive performance tips.
