About Proper Image Delivery on the Web

Describes how to properly serve images to displays of all resolutions.

At a Glance

Your goal as a web developer is to configure your website to deliver content in the most efficient manner possible. Delivering high-resolution images is not exempt from this goal. By minimizing the number of images transferred over the network, and serving only the images necessary to build each page, you will be able to fully support Retina displays without sacrificing website robustness.

Optimize Image Delivery for Retina Displays

Text and HTML forms are already optimized for Retina displays. However, it is up to you to supply high-resolution versions of all your images, otherwise they’ll look blurry on Retina displays.

Relevant Chapter: Serving Images Efficiently to Displays of Varying Pixel Density

Consider Vector Alternatives for Your Raster Images

Reconsider if the image files on your website need to indeed be image files. Solutions such as CSS, SVG, and icon fonts can be used to replace the need for image files, while maintaining clarity on all resolutions at all levels of zoom. Your site will benefit from having less HTTP connections and less bytes to transfer.

Relevant Chapter: Substituting Raster Images for Vector Alternatives

Speed Up Pageloads with Sprite Sheets

A good practice many web developers follow is to concatenate scripts and style sheets. Likewise, you should concatenate images where appropriate. When you combine images, there are fewer files to download, which makes your website load faster.

Relevant Chapter: Reducing HTTP Requests with Sprite Sheets

Prerequisites

This document assumes the reader has an understanding of HTML and CSS.

About Proper Image Delivery on the Web

At a Glance

Prerequisites

See Also