Programmatically set maximum file size and dimensions for images that can be uploaded to the site if possible. For a CMS, this can be done with an add-on that optimizes all newly added images, such as the E When possible, use SVG instead of PNGs for web graphics because the file size tends to be much smaller and they look crisp on all sizes of screens and devices.Īnimated GIFs, if used, should be optimized as well (see this article).īuild in an image optimization tool. Run the image through an optimizer like ImageOptim (OSX and Linux, free) or Caesium Image Compressor (Windows, free), or TinyPNG (online). Provide guidelines for the content creator on maximum file size and dimensions for images that will be uploaded to the site.

Within the “Save for Web” options, make sure to specify an appropriate image size and choose the desired image quality (60% is generally a good bet). If using Photoshop, make sure to crop the image where possible, then use the “Save for Web” feature for saving all images that will be used on the site. PNG-8 can be used for graphics like logos with simple colors, resulting in a smaller file size than PNG-24 (see this table in Lara Hogan’s “Designing for Performance” book). For example, PNG files should not be used for still photos (JPGs are the better choice), but they should be used for web graphics with transparency. Train the content creator on what type of image files to use in different situations.

With the ever-increasing percentage of users on mobile devices, properly sizing and optimizing images to provide a good mobile experience is even more important. Unoptimized images can be incredible bottlenecks that turn an otherwise well-built web page into a slow loading, bloated one.

Gifsicle too many colors