Selecting and Preparing Images for a Website
Selecting images for a website may seem like a straightforward task, but image dimensions, quality, and format play a major role in speed, performance, mobile responsiveness, accessibility, social media engagement, and search engine rankings.
In order to maintain agency standards for design and performance, images for use on the web should be selected and prepared with the following best practices in mind.
File Names
Be sure that image files are named in a way that provides context. This not only helps our team understand how to place images, but it also helps with search engine indexing and makes your website more accessible for users with visual or cognitive impairments.
Image Size & Format
Images that do not meet minimum web standards will not render properly under certain conditions and may appear blurry, distorted, or poorly cropped as the website adapts itself to different browsers and screen sizes.
In order to keep your site looking clean and professional, and to maintain industry standards for design and performance, images should meet the following criteria:
| Minimum Width: | 2500px |
| Min. Resolution: | 72dpi |
| File Format: | .jpg, .png or .webp |
| Orientation: | Landscape (Horizontal) |
Images with Text and Graphics
We strongly advise against using images that include text and graphics on websites for the following reasons:
- Images will be cropped in unpredictable ways as the website adapts to different screen sizes and environments. In that process, text and graphics may be clipped, rendering them unmeaningful to the user.
- Text in an image is hard to read on small devices, and inaccessible for those who rely on assistive technology (screen readers, etc.) to experience the web.
- Search engines do not index text in images, which can be a wasted opportunity in terms of search engine optimization. Live text is always preferable for accessibility and SEO.