CLCMS02

Images
On the Web & You

scroll

Image Optimiza-
tion
for your site

This guide explains how you can manage your website's images and keep load times fast.

Image bitmaps (.JPG, .JPEG, .PNG, .GIF, etc…) usually take up the bulk a web page’s size. Our sites are designed to serve the smallest images needed to the user and lazy loads them (only loading them when the user scrolls to the image. This reduces load times greatly. While the server will transpose image dimensions, reducing their size, it cannot compress the image. This is were we have to do a little work make sure that a page loads as fast as possible.  

Photoshop's "Save for Web"


APPS

Image optimization can be accomplished though Photoshop’s “Save for Web” or “Image Processor” dialog, but for ease, we’ve found the following apps work well:

ImageOptim

https://imageoptim.com/mac

Image
optim

This app works well for reducing the size of about any image though compression. It will not change the resolution of the images. Simply drag and drop images into the app, and let it work it’s magic.

ImageOptim's Settings

ImageOptimize

Download from the App Store

We use this app to shrink and compress an image. If your images need their resolution reduced, this is the program to use. Except in very rare cases, no images on your site longest side will be over 2500px. The general rule is to reduce the longest side to 2048px. This can be accomplished through Optimize Images’ Custom size dialog.

squoosh

squoosh.app

While the previous apps are only available for Mac, Squoosh can be accessed via any web browser regardless of OS.

General Image Guidelines

  • Max 2048px longest side
  • Min 980px longest side
  • less than 500KB overall size. Aim for 100-ish KB by decreasing the quality.
  • Only use .PNGs if a transparent background is needed (will generally be larger than .jpgs)
**Most of the icons and logos will be .SVGs. These are vector graphics and resolution independent. These do not need optimization.

Say Hello

THANKS!
Oops! Something went wrong while submitting the form.

BRAND ENGINE™