All About Images

Accessibility

It’s important that all images have alternative text, or alt text. This ensures that visually impaired visitors on your website are able to understand what is in the image. This is especially true if the image contains any text! On most platforms, you can edit the alt text by clicking on the image, and editing the field marked with alt/alternative text in the image details. Or, there may be a predetermined field next to the image for you to write in alt text.

Image compression

Image files are huge. Straight out of a camera, they can be 10MB or more, and on a small data plan of 250MB, that’s only 10 images to blow through almost half of the plan. Coupled with the fact that larger files load slower, this just is a recipe for disaster.

We get around this by ensuring the website is choosing the smallest image size based on the screen size when possible. When this isn’t possible however, we have image sizing guidelines below.

All the sizes are marked with “compressed” for good reason. Resizing an image file isn’t enough, we can further squish down that size with free or paid compression tools. Some sites have image compression built in, and some don’t. We like to use Squoosh for manual single-image compression as we find it works the best. Our favourite bulk compressor is linked below in the guidelines.

A quick note about image compression. Our Website Care clients have image compression automatically done. You may not need to manually compress your images. Contact us if you are unsure.

Image sizing guidelines for web

Hero, or full bleed images

These images have no space around them and fill the entire, or 90% of the screen on desktop. These automatically crop as centered and fill the whole container that needs to be filled.

Desktop image size recommendations (landscape)

Height needs to be shorter than the width

• Min W 1400px compressed
• Ideal W 2000px compressed
• Max W 2400px compressed

Mobile image size recommendations (portrait)

Height needs to be longer than the width

• Min H 800px compressed

Half of full width on desktop

These images are usually inline images on blog posts or general pages, or half of a call to action or other feature. They fill about half a desktop page and usually convert automatically to a full bleed image on mobile.

Image size recommendations

• Min W 1000px compressed
• Ideal W 1600px compressed

Quarter or third of full width on desktop

These images are usually a square and can be found on blog/news or category feeds. There are usually columns of them on a page. These automatically crop as centered and fill the whole container that needs to be filled.

Image size recommendations

• Min W 400px compressed
• Ideal W 800px compressed

If you found this post helpful, consider subscribing to our newsletter for monthly updates and posts about digital design and development.