studio1c

Optimizing Images for the Web

Key factors to successfully integrating images into your website only takes a few minutes when you know the guidelines - keep image files sizes to a minimum and save it in the correct format.

Optimize Image Size
Non-optimized images or high resolution images will load very slowly, thereby slowing down your site and making visitors unhappy. Check the following to keep image resolution down and optimized for your site:

  • Physical size – images should be scaled down to the size you plan to utilize them on the site. Don’t upload and use a 3008 x 2005 pixel image when you only need it to be a 600x400 pixels
  • Resolution – Once you’ve made the image the right physical size, also be sure the ppi (Pixels Per Inch) are at 72ppi. No need to have anything more than that because monitors only display at 72ppi.

Images Saved in the Wrong Format
Ever wondered how to get a transparent background for your images? Or why your beautiful photo has bands of color on it when it shouldn't? When saving your images, the file format really depends on what the image is of. The following images help illustrate this point:


Multiple colored image saved as JPEG - 35kb file size


Multiple colored image saved as GIF - 50kb file size


Multiple colored image with transparent background save as PNG - 397kb file size


Multiple colored image with transparent background save as GIF - 34kb file size


Simple 1 or 2 colored image with transparent background saved as PNG - 33kb file size


Simple 1 or 2 colored image with transparent background saved as GIF - 2kb file size
  • JPEG format is used for photos and the like with multiple colors
  • GIF format is best for 1 or 2 color images or when a transparent background is needed
  • PNG is great for mostly any amount of colors and when a transparent background is needed. Downfall is pngs can produce large file sizes.

Once your photo is added to your website, don’t forget to add in a description in the ALT tag. This is for search engines and text readers (for blind people) to be able to tell what the images are. You can use keywords here to help describe the article or your site as well as the image.

 
You are here: Home Website Design Blog Optimizing Images for the Web