Posts Tagged ‘image’
Image Optimization – Learn it, Use it.
The advancement in web technology and the deluge of free "cloud" applications has resulted in an explosion of web content generated by users "self-publishing" via do-it-yourself website utilities, Blogspot, WordPress, Facebook, et al. Much of this publishing involves the loading and online display of pictures.
Many of my customers are keen to display images on their new web or blog pages. They are uploading the pictures directly out of the camera with no consideration for the file size of each of those pictures. This is a problem. It seems that every six months or so, digital cameras and phone cameras hit the market with more and more megapixel capability. These days, 10 megapixels is a pretty standard sensor rating even in small point-and-shoot cameras. Smart phone cameras are already entering the 5 to 8 megapixel range.
All these megapixels produce excellent digital pictures. They also produce digital files the size of buses. A single picture right out of today’s consumer cameras can easily be 3 megabytes or more in size. Pushing a 3 megabyte picture out of a blog page is roughly akin to pushing a shipping container through a letter slot. It may go through, but it will take the door and good part of the wall along for the ride.
There are two essential preparatory steps necessary to get a picture fit for web display before you upload the picture to your blog or other web display space. The process is called image optimization. (search "image optimization" for lots of how-to info and tools)
- Step 1 – re-dimension the picture to the actual dimensions in pixels that you want it to display once it is inserted in the web page. Keep in mind that the bigger the picture is dimensionally, the bigger its file size will be, even after compression.
- Step 2 – compress the final picture after you re-dimension it using an image optimizer utility that outputs to an image format suitable for display on web pages – usually jpeg, gif or png.
Web designers who use advanced image editing software like Photoshop, Fireworks etc. have access to optimization tools within these editors. Consumer grade photo editors also have image optimization tools but they are generally hidden away deep in the program and often don’t get found, learned or used by the casual photo publisher.
The good news is that now there are many good image optimizers available online or in the free image editing programs being made available for download. You just have to find them and use them.
One such program is Google Picasa™. It’s free, fairly easy to use and does a pretty good job of organizing your photos. It provides a fairly extensive, though basic, set of photo touch-up tools. It also has an image optimizer in it. Unfortunately, the optimization function can be hard to find for the causal user.
The video in this post is a quick guide to using Picasa to get a picture web-ready in just a few clicks. Do yourself a favour and learn how to optimize your pictures before you get that "over storage quota" notice or surprise bandwidth overuse charge from your web host.
PS. Think about optimizing before you send all those weekend party pictures as attachments to a single email on Monday morning. You probably are going to push the recipient’s mail box over quota and cause all their other incoming mail to bounce off until they can get your bloated picture files out of their mailbox. – How to win friends and influence people!
