post

Make Your Images Web-Ready

web ready images

Image Resolution, Image Size, and File Format

Have you noticed images that verrry slooowwly display on a website? We’ve all seen it. What that happens, that is a prime example of an image that is not, what I call, web-ready or, in more technical terms, it is not optimized. In this post, we’ll talk about what makes an image web-ready. Next week, I’ll show you the steps in Photoshop how to make an image web-ready.

There are three main concepts that make an image web-ready: Resolution, Image size and File Format. Let’s take a look at these in detail.

Resolution

Resolution is the amount of detail you can see in an image. Technically, resolution defines the number of dots per inch. The more dots you have per inch, the more detail you will see in an image. This is very relevant when you are printing an image. Printers can often handle 300 to 1200 dots per inch (DPI). However, monitors don’t have that range. In fact, they don’t really have any range. Their resolution is 72 dpi. Period. (Mac monitors are 96 dpi.) If you display a 4×6 image on a computer monitor that is 300 dpi, it shows up 4 times larger (300 is approximately 4×72.) That’s why when you’ve printed an image that was really big on your screen, it suddenly shows up much smaller on a printer. The printer can handle the 300 dpi, whereas the monitor just spreads the dots out, making the image 4x larger.

So, what’s this have to do with making images web-ready? A lot! When it comes to web pages, you want your images on your web pages to download fast. If you’re downloading an image with a resolution larger than 72dpi you are wasting precious download time.  Set your images to 72dpi resolution before you add them to a web page. Next week, I’ll show you how to do this.

Image Size

The other big factor in making your images web-ready is to make them the same size you want them on your web page, before you add them to the web page. You can use a large image and make it smaller after it’s on our page, but again, going back to maximizing download speed time, that would be a waste of precious download time. Use an image editor to change the size of your image to match the size on your web page, then add it to your web page. Next week, I’ll show you how to set your image size within an image editing program.

File Format

Another concept to be aware of is the file format. The two main types are .gif and .jpg. Another one that is used more and more is .png. For best results (visually and file size), follow the guidelines below:

# of colors type of image/graphic transparency file size
.gif 256 line art, logo, special text yes good
.jpg millions photo no good
.png millions photo yes large

The main difference between these file formats is # of colors it can handle and whether or not it handles transparency. Have you noticed how your logo always has a white box around it? That’s because, if it’s a .jpg, it can’t do transparency. (It may also be that it ‘came’ with a white box. This can be removed and then saved as a .gif  to retain the transparency.) Tune back next week to see how to do these steps and save the image in the best file format.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>