Tuesday, January 28, 2014

Why you should "optimize" your photos

The most common problem with websites created by non-professionals is that the photos placed on the website aren't optimized for the web. What optimizing a photo does is make it loads as quickly as possible without reducing the quality of photo as seen online. Not optimizing photos causes the following problems:

1. Your web page will load slooooowly. Everyone who visits your site doesn't have high speed Internet as many connect through 3G, 4G or a weak wifi signal and a few have dial-up. Even those with high speed Internet expect your entire site to load instantly and it won't without optimizing the photos.

2. Search engines, Google included, take into account how quickly your website loads when they determine ranking. You don’t want your website penalized because you failed to spend a few minutes to optimize the photos.

3. In rare cases your site has so many photos that aren’t optimized that you go over the resources allowed by your hosting company. Even for unlimited bandwidth providers (which isn’t really true), this is typical of their terms of service: We expressly reserve the right to review every Account for excessive space and bandwidth utilization, and to terminate or apply additional fees to those Accounts that exceed allowed levels.

So, that’s the “why” you want to optimize photos and the next question is “how”. First, web pages deal in the width and height of a photo in pixels. Those dimensions are critical. The concept of “dpi” (i.e. dots per inch) doesn’t apply in the online world because the concept of an “inch” is only for printing. Therefore, only changing the dpi of a photo without changing the width and height in pixels actually does literally nothing online.

The first step to optimize a photo is to reduce the width and height to the actual dimensions at which you’d like to display it. That should be done by a combination of cropping the photo, if needed, and “resampling” the image. To get technical for a second, there’s difference between resizing an image and resampling an image. When you resize an image, you do not change the number of pixles in the width and height but change the “dpi” (which does nothing online). When you resample an image, you change the number of pixels in the width and height (which is what you need to do).

So once you have the photo the correct width and height in pixels, you’ve done most of the work to optimize it. The next piece is to change the “quality” or “compression” of the photo. Naturally, you’d think that the higher the “quality”, the better the image would look online but that’s not true. Maximum quality is overkill. We recommend “high” quality. There are a number of pieces of software that ask you about the quality when you save an image (e.g. photoshop) and you should pay attention to that when you save the image. If you don’t have that type of software or want to take an easy method, clients of DomainNameSanity.com can simply use the online image optimizer that’s part of the “settings” on the file manager to automatically optimize the photo after you have set it to the proper width and height in pixels.

Finally, I’d like to demonstrate what we’ve been talking about to show three photos. Below is a photo we took in Glacier Bay in Alaska. We’re going to show them all to you as 400 pixel wide by 300 pixel tall images.

No comments:

Post a Comment