Because of mobile, site-loading times are again a major concern for a web developer. In order to deliver fast loading fully optimized sites there are a series of steps which must be taken. Before we get started, it is important to make sure your images and graphics are correctly compressed and optimized.
Usually images are the biggest files – excluding other types of media like videos – in a website. And, they often outnumber other kinds of files. This means that most of the loading time is actually spent requesting and downloading images.
Let’s get to it:
To save an image for the web you can use the finger-twisting shortcut: cmd + alt + shift + s (Photoshop and Illustrator). There are 3 main types of image extensions:
jpg or jpeg
Jpegs are the most common format and offer the best compression for photographs. However, they do not support transparency and won’t render a graphic perfectly.
Pngs are the most versatile format and should be used to save most graphics. Photoshop lets you choose between png-24 and png-8. Use the 8-bit format with caution. Pngs-8 are usually smaller files than pngs-24 but they don’t have the same support for transparency. When using pngs-8 with transparency matte the graphic to the background color.
Gifs are used in loading icons and other graphics that are animated. They should only be used when animation is required. Gifs have a limited number of colors.
The easiest way to describe a sprite is to say that it is a big image of many small graphics. Sprites are useful because instead of loading a bunch of small files, we can download just one big image that contains all (or most of) the necessary graphics and icons. It is faster to load one image of 500kb than 5 images of 100kb. Sprites generate fewer requests therefore they make your website faster.
*Don’t group photos in a sprite.
A simple sprite resembles a table. Each row contains an icon, each column a state representation of this icon.
Ex.: In your design there are links to Facebook, Twitter and Youtube. These icons should ‘light-up’ on mouse over. Your sprite table would look like this:
| f | F |
| t | T |
| y | Y |
The size of the files used in your site depends on the dimensions and quality you want. A good rule of thumb is:
- Only banners and headers should be more than 100kb.
- Photo thumbnails should be between 30kb and 50kb.
Live text or image?
Live text is generally preferable, but sometimes it is wiser to use images instead. Images are a better replacement for text when:
- The text is overstylized.
- The text is in a particular font that is used only for a few words that are unlikely to change over time. Ex: Submit, Save, Call, etc.
Combine sprites with highly optimized images and you are going to notice a considerable impact in the loading time of your site, especially when it is loaded in a 3g network. Happy saving!