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.
<img src="http://webtipswednesday.com/tips/_images/32-sample-photograph-560x372.jpg" width="560" height="372" alt="WebTips Wednesday Sample Photograph – 560x372" />
<img src="http://webtipswednesday.com/tips/_images/32-sample-photograph-560x372.jpg" width="320" height="213" alt="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.
<img src="http://webtipswednesday.com/tips/_images/32-sample-photograph-320x213.jpg" width="320" height="213" alt="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!