Every once in awhile I look in on my client’s websites in order to help them run the best website possible. Training is usually necessary, and together I can help them learn some best image practices. By following the image use guidelines below, you can
- Increase website load times
- Save bandwidth (bandwidth costs money)
- Help the website look more professional
- Help visitors have a much better experience
Here are some general image-use guidelines:
- Never re-size images in the content manager.
The image must be sized properly in a graphic program such as PhotoShop before it is uploaded into a website. The reason is that when you scale down an image that is too big, the user still has to download a big image even though they only see it small. This slows down the website and harms the user experience. In addition, the image will appear “jaggy” and looks unprofessional. - Don’t use a transparent image saved in “24-bit PNG” format.
A lot of people still use Internet Explorer 6, and it doesn’t support that image format. Images saved in this format also tend to have a large filesize. Unless you are a web developer and know what you’re doing, don’t use this image format. - Compress your images properly.
No normal image should be over 100K. If it is, then you can usually optimize it by compressing it a bit more. This is often seen as a percentage slider when making JPG files – set this to 80 or less. There are exceptions to this rule, such as showing a large photograph.
Here is a general guideline to help you decide what image type to use:
- JPEG: Good for photos, bad for logos, text and artwork with hard edges
- PNG: Good for text, logos, and images with hard edges or solid colors, bad for photographs. Also the preferred format for images with transparency (PNG-8).
- GIF: Good for small animations, text, logos, and hard-edged artwork.
artwork bandwidth_costs_money format_images image_format image_type png_format transparent_image web_images best_practice
