Are Your Images Web-Ready?

When using images on your website, and it’s a very good idea to do so, you want to make sure your images are “web-ready”.

What does it mean to have images that are “web-ready”?

Images that are “web-ready” are images that have been optimized for quick download.

The Nuts and Bolts of Image Resolution

Images are made up of tiny dots. How many dots there are in every inch can be expressed as ‘dpi’ or dots per inch. This is known as the image’s resolution. Obviously, the more dots you can pack into an inch, the better the resolution of the image will be and, therefore, the higher quality.

For example, an image that has a resolution of 300 dpi has a much better resolution and quality than an image with a resolution of 72 dpi.

However, with increased resolution also comes increased file size. When it comes to images for the web, ideally you want to have the smallest file size possible.

Print vs. Web

It’s important to distinguish the difference between image resolution for print and that for web. Typically, for print, image resolution is set to 300 dpi. For the web, however, image resolution of 72 dpi is all that is necessary.

Another important difference between print and web is that normally print is measured in terms of inches, whereas images for the web are measured in terms of pixels.

A typical 4×6 photographic image with a resolution of 300 dpi can have an image size anywhere between 5 and 10 MB (megabytes). An 8 x 10 print document can have a file size of anywhere between 25 and 50 MB or higher. This is way Way WAY too large of an image size for the web.

Ideally, your images for the web should be between 5 and 50 kb (kilobytes). There are 1024 kb in 1 MB. A 5 MB image is the equivalent of  5120 kb! That’s anywhere from 500 to 5000 times larger than what you need!

The important thing to know here is that larger file sizes slow your website down considerably.

Okay, now what?

“Okay”, you say, “you’ve convinced me that I need to do make sure my images are web-ready. How do I do that?”

First, start with an image editor. In my next article, 3 Free Image Editors Compared, I will review some free image editor options out there, so you don’t have to worry about spending hundreds of dollars on an image editing software program.

Once you’ve decided on an image editor that’s right for you, here’s 3 main things you want to adjust when it comes to your images:

• Image Resolution. Adjust the dpi resolution of your image to 72 dpi. 
• Image Size. The width of your image usually will not need to be more than 600 to 900 pixels wide, depending on what you’re using it for. If it’s a header image or an image for a slider that takes up most of the screen, it will probably need to be around 900 to 1000 pixels wide. Images that you will post on a page should usually be no more than 600 pixels wide, max.
• Image Quality. When you are saving, or exporting, your image, there is usually some way to adjust the quality. This is usually measured in percentage. What I’ve found is that 65% is usually a good number that will give me the balance I need between small file size and a good looking image. Results will vary.

Happy Editing!