Images

Logos

Logo files should be transparent (not set on a white background) and ideally svg (or png in appropriate cases where svg is not supported).

Icons

  • Icons will ideally be either an svg image or an icon font (such as Font Awesome) to ensure that they will be in support of high DPI displays.

  • In the case of icon fonts, this also will allow flexibility to change the color of the icon on the fly (without the need to export a new svg or other file type).

  • If a vector source is unavailable for your icon, use a raster image at a minimum of 2x size.

Photos

Photos without any need for transparency should be exported at medium optimization levels and saved to the jpg or WebP (where available) file format.

High DPI Support

High DPI devices (most modern laptop and smartphone displays) should be supported for all imagery. This entails using vector graphics for items such as logos and icons — and raster graphics at a minimum 2x size for all other images (typically photography).

A general rule of thumb worth following is to make sure that the only raster items on the page are photos — and if a vector source is not available for another graphic, use the smallest possible raster image size over 2x.

Image sizes

  • Individual large format images (slider images, featured images, other large hero imagery, etc) should not exceed 200k bin size.

  • Other smaller images (used inline in the content area, etc) should not exceed 100kb in size.

  • If exporting from your image editor, be sure to export using available Save for Web options. You may also optimize the image in TinyPNG (or similar service) to remove unnecessary image metadata.

Naming Conventions

Name your images descriptively and in plain language. This goes for both images and icons that will live in the theme's image folder as well as images that are being uploaded via the media gallery and ultimately living in S3.

This will aid in ensuring the best possible SEO potential.

For example: a hero image of a mountain should be named mountain.jpg instead of the default iStock24357.jpg name from the image source. This applies to icons as well as photos.

Image names should be all lower case with dashes between words. Do not include dimensions or numbers at end, but a descriptor can be used at the end of a name if needed (ex. -logo, -icon, etc.).