Images are a pretty important part of your website.
The right images will help create the look and feel that you want from your website. The wrong images or poor quality images will detract from that desired look and feel and may convey a negative message to your visitors.
Take the time to find good quality and attractive photos and images. It’s time well spent. I actually took this photo at sunset at a baseball game. The original photo was almost 4mb, but this optimized photo is less than 17kb – but that sunset is just as gorgeous as the large version!
Once you’ve found that perfect photo, you need to optimize it for the web before you publish it. Images formatted for print, for example, are huge files and have long load times that will slow down your site. Web clients are impatient (I’m one of them!). We want info, and we want it fast. If your site is slow your visitors will get fed up and leave. Optimized images also take up less space on your server, which can save you money in the long run by decreasing your bandwith charges.
Ok, so how do I optimize my images?
There’s a few different things you need to consider. First, your images need to be small. By small, I mean the file size, not the way it looks on your monitor. An image that looks small to the human eye can still be a very large file, and vice versa.
The size of the image is largely determined by the image’s resolution. For example, a 3 x 5 photo for printing on photo paper would usually be 300dpi (dots per inch) and the file size will be huge, but the same 3 x 5 web-optimized image set at 72dpi will look the same on the screen but will be a much smaller file. The highest resolution you should for the web is 72dpi. Anything higher will slow down your site.
You’ll need a photo editing program to resize your images. Adobe Photoshop and Adobe Fireworks are two popular programs, but they are also used by professionals and will cost hundreds of dollars. That said, if you’re going to be tweaking lots of images and want more flexibility and functionality than just resizing, then either of these programs will be a good investment. If all you need to do is resize some images here and there, there are a number of free or low-cost programs available that can do the job. Google’s Picasa is free and it does a great job. It also indexes every image on your computer so you can stay organized. It doesn’t cost a dime, and I highly recommend it.
Let’s get back to formatting.
Every image has a format. The most common image file formats are .jpg, .png, .psd, and .gif. JPG files can display up to 16 million colors and are best suited for full-color photos. GIF files are limited to 256 colors and usually contain large areas of flat colors. GIF files are best for simple graphics and animations. PNG and PSD files are more complex than JPG files and are editable in Photoshop or Fireworks. For most cases a JPG file is my preferred choice.
Now that you’ve learned a bit about optimizing your images, I’d love to see what you’ve done. Share your links in the comments section below.
{ 2 comments… read them below or add one }
Right on post, Lisa. When a now-friend set up my first site – http://www.naturesplayground.com – she told me that my thumbnails should never be more than 4k and my enlarged images never more than 29k. It was great advice, for as an artist/photographer my sites and blog are heavily image laden.
As a MacIntosh user, with Dreamweaver, when I took over doing my sites, I first used FireWorks for sizing. Then I moved into Photoshop Elements, which I still use and find most effective. I added a PC laptop to my work horses and downloaded Picassa. It doesn’t, for me, have as much flexibility as Elements, which I often purchased through eBay at great prices. Even directly from Adobe the program is under $100, though I’ve paid much less.
Also, for those interested, http://www.eclecticacademy.com offers 6-week online courses for a total of $30. Sara Froelich teaches the use of Photoshop Elements. She is awesome, having created very complete lessons with step-by-step instructions for follow through.
Hope this helps someone.
Appreciatively,
Sheila
Great link, Sheila – thanks for sharing! Online classes (especially affordable ones!) make distance learning SO easy to fit into a busy schedule.
Thanks for visiting!