All websites feature a combination of text and images. With all of the do-it-yourself website builders available, more and more people are taking to creating their own websites. This is great, but far too often people size their images incorrectly, which can cause slow loading times, grainy or distorted images. Let’s look at the right way to size your images.
The Three Common Problems with Images
Most problems with images on websites fall into one of three categories: graininess, distortion or improper file sizing. Let’s look at each image issue a bit more closely.
Grainy images
When people call me for website help, the most common problem I encounter is grainy images. It’s impossible to have a professional-looking website if your images are grainy. There are no exceptions to this rule.
An image becomes grainy when it is stretched to a larger size. How does this happen? You upload an image to your website and specify a width or height that is larger than the original image. The image then gets stretched out to meet your new size requirements, and it looks ugly. Here’s an example:
The above image is sized at 150px by 150px. This is how it appears when inserted properly into a page. The image below is the same image, but stretched to 300px by 300px. Notice how it becomes grainy and loses its clarity and professionalism. This problem is compounded with images that include people and try to convey meaning to a web page.
Distorted images
The next most common issue that arises with website images is distortion. While the image in the above example was stretched too big and appears grainy, the problem is even worse when an image is stretched disproportionately. Here’s an example:
When we lay out our web pages, we often want our images to fit into a certain space. While it’s tempting to just stretch the image width or height to get it to fit nicely into this area, we do it at the cost of clarity and professionalism. When faces, text or scenery are in the photo, it makes the distortion even more pronounced.
Improperly (un)sized images
The last issue that tends to arise often with regard to image sizing is improperly sized images. While we can specify the width and height of an image in our web page, our website visitors still have to download the original image before it can appear on the page. Here’s an example:
While this image appears how we want it to, the original image is actually much larger, and takes up more space on the server. If you right click the above image and select “View Image”, you can see for yourself what I mean.
This happens all the time when people take a 5 megabyte image from a camera and place it on a website. Sure, they get the image sized how they want it on the web page, but they’re often confused as to why the page takes 10 seconds to load. The reason is, the browser has to download the entire original image in all its massiveness before it can render the smaller version.
How to Size Your Web Page Images Correctly
Now that you’ve seen everything that can go wrong with your improperly sized images, let’s talk about how to do it the right way.
Size your images before hand
Before you place an image in your web page, consider how large you want the image to appear on the page, and size it in Photoshop, Gimp or another program/website before hand. If you’re downsizing a large image, this is easy to do. If you want to up-size an image, you’ll need to make sure you’re using a vector or Photoshop based image that can render the text or other illustrations correctly at a larger size.
Crop your image, if necessary
If you need your image to be narrower or shorter than it currently is, the correct approach is to crop the image. Don’t re-size it and stretch it out, but rather, select an appropriate area within the image that looks good and cut off the unnecessary edges.
Make sure your images load on the page at their true size
Lastly, make sure your images appear on the web page at their true size. Don’t upload huge 5 megabyte images from a camera and size them down in your web builder. Re-size the image in Photoshop to the size you want it to appear at, and then upload it to your server. Your pages will load much more quickly as a result.
Taking a little care to size your images correctly will improve your web page appearance and loading time. Enjoy.
Zachary Coyne is a freelance website designer and developer in Tucson, Arizona. Zach has been designing, developing, fixing and updating websites for the better part of a decade. He enjoys helping people learn how to fix and update their websites, and offers one on one 