Winning Strategies for Online Success!

Resize Your Photographs So Your Web Pages Load Faster

When asked to review a website created for a non-profit organization that teaches martial arts, the first thing I noticed was that the photographs took a long time to load.

Even the small icons that displayed on the home page were slow in loading, so I downloaded a couple images and took a look at the file sizes. They were in megabytes instead of kilobytes, and when opened up in Adobe Photoshop, I found that the images were the same size that the camera had originally created.

We have talked before about the importance of optimizing your web pages to load fast and here is a perfect opportunity for improvement.

At this point you might be wondering, “How did the large files display small on the website?” Well, the answer is in the html coding. You can set the coding to display image files smaller (or larger) than they really are, however, this does NOT actually resize the file.

Take a look at these two photographs. They are both the same file but the html coding has been changed to resize one of the screen images.

Image 1: Pixel Size - 560 pixels x 372 pixels

<img src="http://webtipswednesday.com/tips/_images/32-sample-photograph-560x372.jpg" width="560" height="372" alt="WebTips Wednesday Sample Photograph – 560x372" />

WebTips Wednesday Sample Photograph – 560x372

Image 2: Pixel Size - 560 pixels x 372 pixels

<img src="http://webtipswednesday.com/tips/_images/32-sample-photograph-560x372.jpg" width="320" height="213" alt="WebTips Wednesday Sample Photograph – 560x372" />

WebTips Wednesday Sample Photograph – 560x372

This next image has been resized using Adobe Photoshop. The pixel width and height are 320 pixels by 213 pixels instead of 640 pixels x 425 pixels, and thus, the file size is smaller, which means it loads faster.

Image 3: Pixel Size - 320 pixels x 213 pixels

<img src="http://webtipswednesday.com/tips/_images/32-sample-photograph-320x213.jpg" width="320" height="213" alt="WebTips Wednesday Sample Photograph – 320x213" />

WebTips Wednesday Sample Photograph – 320x213

Resizing your photographs is one of the easiest ways to optimized your website. If you have many photographs, you may be able to use the batch processing function in Adobe Photoshop to shorten your production time.

P.S. If you know the location in the photographs above, use our “Just Ask!” form to tell us where. The first 5 people who mention the correct location will receive a free web home page optimization review!

Posted on April 17, 2013 | Permalink | Join email list

More WebTip Posts