Ask Doc: Make an Image Ready to Use on your Website

There are several things to consider when you want to prepare an image for your site. The first and most important, of course, is to be certain that you have the right to use that image. People are being sued right and left for using images they find in a Google Image search or on some “free” image site. You don’t want to get wrapped up in that kind of mess!

Once that’s out of the way, you’ll normally be working with a JPG or PNG image. If you want to display it at 500 pixels wide, you’ll want an original image that is at least that wide. You can shrink an image down without losing image quality, but you can’t make it larger without it getting pixelated, which will ruin the quality.

For top quality, I like to start with a JPG that’s larger than the final size I want. For example, I recently found a free image on morguefile.com that was 2136 x 2848 (width x height), at 3.93 MB – much too large for my purposes, in terms of dimensions and file size.

I downloaded it and used Photoshop to resize it. If you don’t have Photoshop, I recommend Gimp, which is free. First, decide what size you want to display on your page. Let’s say you want it to show at 500 px wide. So you resize it proportionally to 500 x 667 to keep the same aspect ratio.

After reducing the image size, the file size is still 977 KB, which would result in a terrible pageload speed, so I want to adjust the quality of the image downward to the least necessary quality level. There are several options, depending upon the software you’re using. In Photoshop, I’ll want to save it for web use, which will let me look at various image types, file sizes and image qualities to determine which will work for me.

Normally, I like to use PNG-8, at 32 colors. However, for your purposes, a lower quality jpg may be just fine, and will normally be a significantly smaller file. You can select one of the options presented in Photoshop and see the effects, as you adjust quality.

When you have your image the way you want it, save it and you’re ready to upload it to your site. Don’t forget to assign it an alt attribute, title and, if you want, a description. The alt attribute is particularly important for SEO purposes.

Have fun!

Do you have a question? Simply go to our contact page and submit it there. I’m more than happy to help!

Facebooktwittergoogle_pluslinkedin