Image Replacement

From Web Developer Network Wiki
Jump to: navigation, search

In the mobile-first philosophy, the size of resources sent to the browser should be as small as possible. An area of concern is with images. For the traditional desktop, full-width images (960px wide) are common and in many cases make for an excellent user experience. While the responsive template will adjust the displayed pixel size for smaller screens, it doesn't adjust the file size. So in many cases, our users are forced to download larger images than needed, causing a delay in presenting the page.

To address this, an experimental and beta potential solution has been created. The idea is to start with the smallest image and then as browser size increases, use larger images. To do this, the following items are needed:

  • Adjustment in HTML
  • Image files for each size

For example, we'll start with and image that is both smaller in pixel size and file size: test_320.jpg. Notice how the filename has the targeted media query breakpoint included. In the same directory, I'll include images for each of the other media query sizes I plan to target. The options are:

  1. 320
  2. 430
  3. 600
  4. 768
  5. 960
  6. 1040 (experimental, may be removed)

In the HTML, the image element should contain the src of the image file and a special class name:

<img src="images/test_320.jpg" alt="this is a test image" class="wdn_image_swap" />

Then, as the browser size changes, the appropriate file will automatically be chosen based on the width available.

Personal tools