Big images are a big problem! They bog down page load times and gobble up massive amounts of page space, signaling to Google that your page is slow, broken, and should be avoided. This can send your website into no man's land: page two. Yikes!
To help you avoid getting lost in the wilderness, I’ve come up with some best practice tips for resizing images. Here you’ll find guidelines for image size along with advice for image usage and optimization.
4 Questions to Ask Yourself About Image Size
- How wide is my website? Website widths vary, so if you’d like to add big images, you’ll want to know how wide your content area is. There have been many times when we speak with business owners who are unhappy with how slowly their website is loading, only to find that they added a 5 megabyte image onto a site that’s only 3 megs—talk about load lag!
- How many columns are on the page where the content will be displayed? If your website is a single column design, you have approximately 980 pixels to work with. However, if you have two columns you’ll want to keep the image no larger than 640 pixels. This way it won’t eat up the page and valuable real estate for content.
- Is the image the focus of the content, or is it an enhancement? When you’ve created (or are sharing) an infographic, the image will be the focus of the page. In this case, it’s perfectly acceptable to leave the image large, allowing it to sprawl across the page. However, if it’s just an image meant to add visual interest, keep the image small, about 200 to 250 pixels wide. You want it small enough so that it doesn’t take up the entire column, with enough room for text to wrap around it.
- How will the image look on a mobile device? Just as with desktop website sizes, the size of a mobile website can vary. Because of this you’ll have to customize your image size to your site. To determine if your images are too big for your mobile site, pick up your phone and open the page with your image. You’ll know right away if it’s too big, as it may affect load time and it will take up the entire page. If this is the case, go back, shrink, and look again. Also evaluate if the image is necessary to the content. If it’s not, it may be best to leave it out, making the written content on the page easier to read.
Fixing Proportion Distortion
Below, we have a case study on how images display on mobile devices. On the left is a 5000-pixel wide image. Not only does it slow the page load time, but you can see how it stretches and tries to squeeze into the mobile view. On the right, the image was resized to 250 pixels and set to display at 100% width on any device, so it looks great both on a desktop and on the mobile version here.
Pro Tip: As a general rule, never place a huge image at the top of your content. This will distract the reader, making him more likely to stop scrolling and move on…perhaps to your competitor!
Shrinkage (A Good Thing in This Case!)
Before you begin shrinking down your image, be sure you save the original. This will allow you to come back to it, should you accidentally make it too small. While you can always shrink an image down, it’s impossible to enlarge it once it’s shrunk. What you’ll end up with is a grainy, pixilated image. No good!
So if your image starts at 2000 pixels, reduce it to 500. Have a look, ensuring you haven’t made it too small; then, if necessary, shrink again. What you’re looking for is the perfect balance between pixel size and quality of the image: What use is a dinky image that nobody can see?
A note to clients of Foster Web Marketing: If you’d like more detailed instructions, check out our step-by-step instructions on adding, optimizing and resizing images. Find this information and more in the User Forum in DSS. Or call me up! I'd be more than happy to walk you through the process.
Other Image Considerations
When done correctly, images can help boost your search ranking. To properly optimize your images we recommend that you:
- Rename the file. Whether you use a stock image or your own, original image, you need to think before you name the file. Instead of “image4,” try something more descriptive such as “car crash Dallas.”
- Add an ALT tag. This short piece of text (generally under 20 characters, or about three words) will be used to help the visually impaired and Google bots to understand what the image is.
- Include a caption. Image captions are among the most read content on a website, so don’t forget to add an interesting, relevant caption.
- Check for relevance. Images help engage the reader and can add depth to written content. But adding images for the sake of adding images is a waste of time.
To dig deeper into how to get more out of every image you post be sure to read our article, Unlock the SEO Potential of Your Website.
If you found this article helpful, be sure to share it on Facebook or anywhere you think it will reach the most business owners. Together we can help prevent slow load times!