You must have come across some slow loaded websites. They make you leave earlier before the whole page content loads. This week I want to start from <a href=””>optimizing logo image</a>, to ensure essential elements such as logo is loaded in no time. Below is a list I will be discussing in the following weeks:

  • pre-load logo image: logo image and background should be the first elements displayed on the website, avoid empty space and without background;
  • combine logo into background: to reduce page requirements;
  • optimize compressed logo: keep the file size to the minimum;
  • define alt text for logo image: increase page usability and compatibility;
  • define logo size: to improve browser rendering efficiency;
  • turn off logo tag: to improve browser rendering efficiency.

Pre-load logo

Before anything else, load necessary images first: in this way, logo can be displayed first on the page (unless you do not want it to show first). Google homepage uses this method to combine logo and background, do a right click on the logo, you can only view background image, but not logo as a separate image. On the search page, the original image around logo should look like this:

Images around logo

Images around logo

Optimize compressed logo

  1. png8 is the first choice
  2. fireworks does a better job in compress image than photoshop
  3. at last, compress with dedicated compressing tool (e.g. PngOptimizer)
  4. if you do not have this tool, install firebug onto firefox, then install page speed, as a performance analyzer, and directly save compressed image.
  5. too complicated? Go for online compressing tool then