Working with Large Images

There are two different Siteimprove policies active on all sites in Siteimprove that flag large images:

1. Images over 1 megabyte
2. Images over 2,000 pixels wide/1,000 pixels tall

In most cases, when a large image is flagged it’s a very large image that was uploaded to the site and then sized down using HTML to make the image appear smaller.

This often happens with embedded infographics. The large infographic is uploaded and embedded on a webpage using HTML to make it appear smaller. Then a link is added to the embedded image so it can be clicked to open a larger version of the infographic.

But what happens is the entire infographic loads when a user visits the page, and then again when the user clicks on it. That’s exactly what the large image policy is designed to flag. The recommended solution is to create two images. One that’s a smaller size you upload and embed on the page and another full-size version of the image that you upload and link to from the smaller image.

So, you may have an image with a 500 pixels wide appearance, but it is really a 5,000 pixels wide image just shrunk down. When you shrink an image down using HTML it doesn’t actually change the size of the image that has to be downloaded, it just changes how it’s displayed on the page.

This can be a problem for a variety of different reasons including Search Engine Optimization (SEO). Google may negatively rank your page for having a large image. But the primary issue is the user experience.

Believe it or not, in 2021 not everyone has access to high-speed internet. I live in Reno, NV which has numerous options, but my brother, who just purchased a place about a half-hour north of Reno, does not. His only options are dial-up (super slow) or satellite (which is expensive and costs per megabyte).

Users on mobile devices (which is a large percentage of users with disabilities) might also run into issues because of limited access to bandwidth and/or monthly data limits.

In my spot-checking on Stanford sites, I found an image that’s over 1 gigabyte, and several others in the 800 MB range. Images of this size may never load on mobile or dial-up, or if they do, the user may end up paying money to see an image that is just a few hundred pixels wide and could be condensed down to a few hundred kilobytes without any loss. According to download-time.com, a 1 GB file can take a minimum of 42 hours to download over a 56k dial-up connection.

So what can you do?

Use the above Siteimprove policies to locate large images on your site. While not all images in these reports will be inappropriately sized, most should probably be resized.

You will need to use photo editing software (such as Photoshop or a variety of other programs) to create a smaller version of the image and upload a new version that is the maximum size needed, and not any larger.

Personally, I also like to use a browser extension called the Web Developer Toolbar, (this is the Chrome link, but the toolbar should be available for most browsers), which offers options to outline images that have been resized.

Additional resources

Learn more about Siteimprove

• Join our Siteimprove drop-in office hours on Zoom, Thursdays, 11 a.m. - 12 p.m. (PT)
• Pop into our #cop-siteimprove Slack channel

Learn more about digital accessibility

• Attend our weekly Accessibility Office Hours
• Pop into our #cop-accessibility Slack channel