Website Image Optimizer / Pre (post?) Processor

Let’s face it. The biggest loads and cause for slow performance of most websites comes from images. While there are many projects that offer automated ways to optimize and process CSS like Sass and Less, these optimizations result in a much smaller performance gain compared to what you get from optimized images. The problem with optimizing images is finding a balance between optimization and maintainability. You want to use sprites to minimize the number of requests but you want to reuse images in multiple pages to simplify maintenance (not have multiple copies of the same image). Assuming that most people view 2 or 3 pages per website during any visit, following is a proposal for an image optimization algorithm. This algorithm would generate two types of image sprites as follows:

  • global.png / global.jpg (for images that appear in all pages, e.g. in the header and footer like the website logo)
  • page-path.png /page-path.jpg (for images that appear in a single page, e.g. about-us.png, about-us.jpg, products-computers.png, products-tvs.jpg, etc)

If a web page is at the URL www.somedomain.com/products/computers/index.html, then the sprite for that page would have the file name products-computers.png and/or products-computers.jpg (slashes are converted into dashes).

The rule for PNG vs JPG sprites is

  • If an image contains transparency, then it should be a PNG.
  • If an image does not contains transparency, then it should be a JPG.

Following is a walkthrough of the process and optimization algorithm:

  1. Write an HTML page as usual with the following exceptions
    1. add a reference to <link rel=”stylesheet” type=”text/css” href=”page-path-sprite.css”>, e.g. products-computers-sprite.css
    2. use <img> tags specifying the width and height of the image, a unique ID for the image, e.g. id=”logo”, and adding a data-global=”true” attribute if the image will be displayed in all pages, e.g. in the header.
  2. Run a script that does the following:
    1. reads the HTML and finds all image tags
    2. loops over all image tags and
      1. read the image from the src attribute
      2. if the img tag has the data-global=”true” attribute
        1. if the image is a PNG, append the image to global.png along the left side of the sprite (X=0) below all other images, if any.
        2. if the image is a JPG, append the image to global.jpg along the left side of the sprite (X=0) below all other images, if any.
      3. otherwise,
        1. if the image is a PNG, append the image to page-path.png along the left side of the sprite (X=0) below all other images, if any, where page-path is the file page of the web page, e.g. products-computers.png
        2. if the image is a JPG, append the image to page-path.jpg along the left side of the sprite (X=0) below all other images, if any, where page-path is the file page of the web page, e.g. products-computers.jpg
      4. update the page-path-sprite.css file to show a background image from the image sprite in place of the default behavior of the <img> tag by targeting the element using its unique ID.
▲