On your website, images are an invaluable way to convey all kinds of information to your users*. Choosing the right images is an important step in styling your website. Choosing the correct sizes, file types, and export settings are imperative to making your site look sleek and professional, all while keeping load times to a minimum.
Image Dimensions
- Logo: at least 500px wide | png or svg
- Hero photo: 1920×1280 | png or jpg
- Rectangle photo: 16:9 ratio: 1920 x 1080 or 3:2 ratio: 1920 x 1280 | png or jpg
- Square photo: at least 500×500 | png or jpg
- Graphics (icons, charts, infographics, logos): size depends on element and use.
- No smaller than 200px wide if using svg or png
Image File Sizes
Try to keep all image file sizes under 100Kb or as close as possible. Use .jpg, .png, or .svg formats for best results.
Depending on the content of your graphic, the file types here can result in varying file sizes. Large images will slow your site’s/page’s load time. Best practice is finding the right combination of smallest file size with best visual results.
For tips and information on image dimensions for your website, Click Here.
General Rules
Start big, go small
Images can go from large to small, but not the other way around. You can create a slice from a whole cake, but you can’t create a whole cake from a slice.
Sending files to a designer:
Bigger is better. If you are sending image assets to your designer to prep for your site, it’s best to provide the largest, highest resolution images possible. Photos from your photographer or those purchased from stock photo websites will most likely be 300dpi. However, let your photographer know that you’d like high resolution images (not web size). And be sure to select a high resolution download option from your stock photo site.
For logos, graphics, charts, etc., original layered files (.ai, .eps, .psd) are best. If these are not available, .png or .svg files can suffice. .jpg should be used only as a last resort.
*Note on images, alt tags, & accessibility: Search engines like Google do not “see” images the way a human does. Furthermore, many human users have some type of visual impairment: full or partial blindness, color blindness, etc. Keeping this in mind, be sure your images have alt tags and that the text of the webpage contains all the information that you want the user to read. Images alone should not contain important text or messaging. For more info on this and other accessibility standards, see https://developer.mozilla.org/en-US/docs/Web/Accessibility