All About Website Photos

Have you ever seen pictures on a website that appear to be blurry, distorted, pixellated, or “bitmappy”? This happens when the photos are not properly sized, dimensioned, or optimized.

Taking a photo from a camera and adding it to a website without optimizing the photo will generally result in a substandard looking image on the website. Optimizing a photo for a website includes the following:

1. Adjusting the Photo Size – In order to get the photo to fit in a certain spot on the web page, the photo size (number of pixels) and dimensions (height and width) will need to be changed. A photo file from a camera can be huge. Let’s say a photo from your camera is 2000 pixels high by 6000 pixels wide. A typical web page is 900 pixels wide. The space where you want to place the image may be, say, 200 pixels high by 600 pixels wide. In order to get the photo to fit in that space, you have to reduce the number of pixels. Many web designers make the mistake of keeping the image the original size but using web code to dictate the size of the photo. This is incorrect, as it can cause the photo to look blurry and put too much of a load on the web page when it has to resize the photo.
2. Adjusting the Photo Dimensions and Cropping – Suppose, in the example above, the space where you want to place the image is 200px high x 800px wide instead of 600px wide? Now the photo is going to have different dimensions, so you’ll have to be creative and either crop out the portion of the photo that is not needed, or stretch or squeeze the photo to fit within those dimensions. Depending on the content of the photo, either solution may work, but it’s a trial and error process and one solution does not fit every image.
3. Reducing the File Size – A photo file from a camera can be several megabytes in size. The web page will have trouble loading a photo of such a large size, which can stall the page or cause it to take too long to load. Not only will visitors to your site grow impatient, but slow loading pages don’t do as well in search engine rankings as those that load quickly. The best way to reduce the size of a photo file is by using photo editing software. The smaller the photo size, the grainier or blurrier it will become, so it’s best to reduce the file size visually, saving the photo at the lowest file size in which the photo quality is still satisfactory.
4. Other Optimizations – Often a photo coming from a camera may be too dark, or slightly blurry, or the colors may be muddy. Optimizing the photo for brightness, contrast, color saturation, sharpness, etc. assures that the photo will look its best on the website.

If you’re unable to view the photos and text below, you can read this blog on our website at http://www.tbrooksconsulting.com/blog_photos.html.

This photo is almost 800K in size, with 2023px x 902px dimensions. This is too large. The size has been edited in the web code to 300 x 200, which is the wrong way to resize a web page photo. On a slower computer, you may notice that this photo takes a little longer to load than the others. Now imagine having 5 or 10 of these large photos on the page, and you can see how much it can slow the page. This photo may also appear distorted or pixellated in some browsers. You can tell if the photo itself is resized or if the code is resizing it, by right-clicking on the photo and selecting “View Image”, “Show Picture”, or something similar (depending on your browser) to view the original photo. The original is much larger and wider than the ones on this page.

This is the same photo as the one on the left, but the photo itself has been correctly re-dimensioned to 300px wide by 200px high. Reducing the dimensions of the photo automatically reduces the file size, but not completely. The file size is 60K, which is much smaller than 800K, but we can do better. In addition, simply re-dimensioning the photo results in the picture looking a bit “squashed” horizontally. Right-click on the photo and selecting “View Image”, “Show Picture”, “Open Image in New Tab”, or something similar (depending on your browser), and you’ll see that it looks the same as the photo on this page.

This photo has been re-dimensioned properly, by cropping out the portions of the photo that are not needed. This results in the photo having the same dimensions as the original, where nothing looks “squashed” or “stretched”, although it does cut out parts of the photo.

This is the same photo as the one on the left, but it has been optimized for brightness, color saturation, and sharpness. Also, the file size has been reduced from 70K to a more efficient 24K without sacrificing quality.

---