Image Style Guide
Image deliverables need to be optimized for their use case. Implementation of these images needs to be consistent.
We want to make our pages as optimized as possible and that includes a comprehensive strategy for optimizing and implementing images. Some of these rules come from Google, others are our own.
Don't embed important text inside images
Avoid embedding important text in images for elements like page headings and menu items because not all users can access them. To ensure maximum accessibility of your important text based content, keep it in regular HTML.
Text embedded in images is also not i18n compatible.
Create optimized file sizes
Suit is able to request different images depending on the viewport size. So it doesn't make sense to request an image with a width of 800px when the viewport is only 600px. When exporting an image, create the appropriate image size for the appropriate context.
Here are some good widths to target for each image you create:
- Small to Medium: 640px
- Medium to Large: 1024px
- Large to Extra Large: 1280px
File type is important
PNGs, especially with hi-res images, can be very large. Unless there is a valid use-case for why your hi-res image needs a transparent background, please use a JPG instead.
Running your exported images through a program like ImageOptim is absolutely necessary. If it's possible to optimize your images through a build process, even better.
Icons
We do not use images for icons. If you need an icon that Suit doesn't provide, please email us or file a Jira ticket.
Give your images detailed, informative filenames
The filename can give Google clues about the subject matter of the image. Try to make your filename a good description of the subject matter of the image. For example, my-new-black-kitten.jpg is a lot more informative than IMG00023.JPG. Descriptive filenames can also be useful to users: If we're unable to find suitable text in the page on which we found the image, Google will use the filename as the image's snippet in their search results.
Create great alt text
The alt attribute is used to describe the contents of an image file. It's important for several reasons.
- It provides Google with useful information about the subject matter of the image.
- Many people-for example, users with visual impairments, or people using screen readers or who have low-bandwidth connections—may not be able to see images on web pages. Descriptive alt text provides these users with important information.
Bad example:
<img src="sub.jpg" alt="">Better example:
<img src="sonos-black-matte-sub.jpg" alt="Sonos Sub">Great example:
<img src="sonos-black-matte-sub.jpg" alt="Sonos Black Matte Sub">Don't ever do this:
<img src="sonos-black-matte-sub.jpg" alt="Sonos Black Matte Sub Sonos Play1 Speaker Wireless Speakers Play3 Play5 Playbar">