I admittedly fall for the mantra of “bigger is better” more often than I’d like to admit. Burgers? Stack em high! TVs? Take up my entire living room wall, please. But when it comes to finding imagery for blogs, I know better than to upload the highest quality file I can find. But wait…don’t our dear readers deserve the biggest and best?
Well, yes–yes they do. But ginormous (scientific term) images come at a price and provide little benefit past a certain point.
How Oversized Images Can Ruin User Experience
Though larger images are of higher quality, that quality can be wasted on your website. Why? Oftentimes, the naked eye can’t tell the difference between an oversized image and one that’s been appropriately resized; however, you’ll be able to feel it. Oversized images take longer for users to load, and if your blog post has multiple massive files, your site can slow to a crawl. Knowing the average modern attention span is next to nil, this can be bad news for your content and website.
According to a handy article from OM4:
- Images should be about 80Kb-100Kb or 20Kb-30Kb if the image isn’t the full width of the page
- 2Mb-3Mb images can be resized to 80Kb-120Kb without too noticeable a dip in quality in most situations
- Image quality can often be dropped by 30-50% without much consequence to the naked eye
- When in doubt, after lowering the size of your image, test it side-by-side with the original to ensure your resized image isn’t becoming too pixelated
It’s great to understand that images can be lowered in quality for the web without much consequence to the naked eye, but how, exactly, can you accomplish that?
As a Mac-based agency, it’s extremely simple for us and the rest of the Apple fanboys/girls (cult). Simply open your image in Preview, select Tools, Adjust Size and export/save as needed. PC (and Mac users, if so desired) can use third-party image editing tools or Photoshop if available.
If your website is on the popular WordPress platform, resizing your images is just as simple. Once you upload an image to your desired page, it is automatically loaded with options for Full Size, Medium or Thumbnails–essentially, large, medium and small. This makes choosing a smaller version of your selected image as easy as selecting Medium and moving on. Again, just ensure that your medium-sized image isn’t suffering from blurriness before hitting publish.
Uploading images to your blog post (and site in general) is all about balance. Finding the perfect size that looks good and “feels” good by avoiding massive photo files that slow down your site is paramount to user experience. So, if you want people to read your content, make sure supporting imagery isn’t making your site a slog.