Multimedia is all over the web now and video in particular is catching on but for most of us, images will are the most common form of media we’ll add to our websites. Despite how frequently they are used one thing a lot of people don’t do is appropriately re-size images for their site or to send in email. If you know someone that keeps sending you emails with giant pictures in them, feel free to send them a link to this post.
Common mistakes include:
- Leaving the image too large which breaks the layout
- Dynamically adjusting the image size using CSS or HTML
It’s much better size your images appropriately but when you have a lot of images it can be a real pain. There are many tools out there which allow you to batch re-size images but I’m going to focus on two common and solid tools to help. In both cases we’re looking at services which also allow you to host your images on their site and share them with the web. Best of all the tools are free!
For all around photo sharing and great Search Engine Optimization (more on this later) Flickr is a great way to go. They offer the Flickr Desktop Uploader (Windows and Mac) which will allow you to upload photos to your account and automatically re-size them for upload through the tool. They have several re-size options including:
- 800 pixels (good for on screen display)
- 1280 pixels, suitable for small prints and the minimum for use as desktop wallpaper
- 1600 pixels, suitable for larger prints and more ideal for desktop wallpaper
- 2048 pixels, good for still larger prints and archiving.
Auto resizing in the Flickr desktop uploader is as easy as going to the top menu and selecting Tools > Preferences and look under Automatic Resizing. The default will be not to re-size at all.
Unfortunately you sometimes need sizes other than these for your site so the default Flickr sizes won’t quite work and I need to find a different option.
Note: If you look at your photostream on Flickr.com you’ll find that it will create two sizes of thumbnails for you as well.
The normal Photostream thumbnail is 240px wide or 240px tall (which may be a useful small images size on your website), and the navigation thumbnail is a cropped square at 75px x 75px (which is a good icon size for use on your site though a tiny bit big for my preference, I usually use small thumbnails which are 70px x 70px or extra-small at 55px x 55px).
Flickr is easy but there are several other online tools available as well. Here is a quick list of others you can check out:
- Smush.It (you can also get a Smush.It plugin for WordPress that will automate this for you when you upload images to your WordPress blog (self hosted WordPress, not sure about WordPress.com)
- Easy Image Resizer
- Web Resizer
- Pic Resize
- Shrink Pictures
- DynamicDrive Image Optimizer (also has a great tool for creating a favicon)
- Resize Image
- Easy Cropper
- Picnik (full-blown editor, not Photoshop by any means but free to use web service that covers the basics well).
You can see a quick review of most of these at hardgeek.org.
Was there anything I didn’t cover here that you would like to know about batch resizing images or use Flickr? Let me know…
Sidebar, If you like to take your own images but aren’t exactly a great photographer take a look at the new book on camera basics to help you get to know your way around your camera a little better. Knowing your camera will make all the difference in getting better pictures straight out of the camera.