6 Ways To Optimize An Image

One of the biggest problems on the web today are slow-loading websites. The usual cause? Unoptimized images.

In most cases, users will not be affected by unoptimized images because of today’s high speed internet connections. However, not all web surfers have fast internet connection speeds. Some, for example, are still on dial-up, and others use smart phones or PDAs to access the web. Additionally, if there are multiple images on a single page (such as in a gallery or album) image optimization is necessary for a good user experience.

Here are six ways to optimize images.

1. Resize

The images that come out of most cameras are huge. In fact, the dimensions greatly exceed the size of most monitors. So what most people do when incorporating these images into web pages is scale them. If you take a look at the image tag, it allows you to set the height and width.

Consider the following image:

scaled image As seen in the code sample below, we have set the image height to 21 pixels and the width to 149 pixels. But the actual size of this image is 28px by 197px. To view the actual image, click here. (It will open in a new window.)

<img src="/web-design-images/velvet-blues.gif" height="21" width="149" alt="scaled image">

The problem with the method we used above is only exasperated for really large images. Scaling affects the visual display of an image but does nothing for load time. But by resizing, you can significantly reduce the filesize.

2. Crop

Cropping — which refers to the removal of the outer parts of an image — is another way to minimize filesize. With many images, for example, there are portions that we’d rather not see. If these areas are close to the borders, we can get rid of them by cropping.

3. Change Image Format

Sometimes you can significantly reduce the filesize by opting for a different image format. For more information on different image formats and choosing the one which is best for your graphic or image, see our article Image Formats: JPG, GIF, and PNG.

4. Reduce Quality

The preferred method for optimizing images is by reducing image quality. And depending on the image format, there are a few different ways to do this. For jpeg images, this is done by directly reducing the quality. And in most cases, a quality setting of 80% – 90% will show no significant changes from the original version. And you can go even lower depending on the type of image, the detail, and the colors. For other image formats such as gif and png, you can reduce quality by opting for a smaller color palette.

5. Define the Height and Width

One simpler method for optimizing images is by setting the height and width attributes in the image tag, whether or not you plan to scale your image. Sure, the browser will output your images regardless of whether you define the height and width, but doing so will minimize load time.

6. Opt for CSS

Sometimes, CSS can help optimize background images. For example, if your website has a background image which is repetitive, instead of using one huge image, you can use CSS to tile your images. A CSS code sample is given below.

body{background:#ccc url(images/diamond-bg.gif) repeat;}

In the example above, the image "diamond-bg.gif" would be repeated as a background for the body element. Some other options are repeat-x and repeat-y for repeating images only horizontally or only vertically.

 

If you only have one or two images per web page, you probably might neglect optimizing your images. But one additional benefit of optimizing images is that it reduces bandwidth. And if you are on a shared hosting plan which limits your daily or monthly bandwidth usage, image optimization can save you a lot of money in hosting charges.

Tags: , ,

3 Responses to “6 Ways To Optimize An Image”

  • Miri April 18, 2010 at 1:25 am

    Great information. It is always tricky to work out what format you should be using when you are not a grahpic artist. I only wisht their was IE support for transparent pngs.

  • Rene @ The Easy Cash September 25, 2010 at 3:05 pm

    I was not aware of that css code so thank you for the the info. On the other hand, it seems that the program of choice when editing/optimizing photos is Adobe Photoshop. Still, my program of choice is GIMP because it’s free.

  • Chris Quinn July 24, 2011 at 3:05 am

    Great article. I’m currently trying to utilize a background image for a web site I am working..no luck though, but this article kind of helped. Thanks.

Trackbacks

Trackback URL:

Leave a Reply

Want us to work on your project?

Contact us today for a quote. Click here to submit details regarding your project.

If you are making a general inquiry, send an email to info@velvetblues.com

Go Daddy Deal of the Week: Cheap .COM Domains! Offer expires soon!