Easily Resize Images for the Web and Email
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!
1. Flickr:
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:
- JpegMini
- 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)
- Punypng
- Easy Image Resizer
- Web Resizer
- iResize
- Pic Resize
- Shrink Pictures
- DynamicDrive Image Optimizer (also has a great tool for creating a favicon)
- Resize Image
- Easy Cropper
- ImageOptimizer.net
- Resizr
- 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.
[…] a word on image optimization since I recently wrote a post on optimizing your images for the web. It’s a really good idea to find a way to shrink your files down for use on the web. It will […]
My digital cannon has 10.0 mega pixels. When i finally got all my pics loaded on photobucket i erased a lot of my cards thinking i could email images to ritz or target for printing. But when i try i get a message saying the resolution is too low. I have also tried loading pics for printing on a flash drive but that is not working either. I get the low resolution message or the picture printers can't even read the flash drive. Any help would be greatly appreciated. Thank you.
There are a lot of factors that could come into play. Are you printing the pics from photobucket? If not what copies are you using. I don't use photbucket so I don't know how many sizes or versions they store but I would find out if there is a “full size” or if they automatically reduce to a certain size and only keep that.
Start there and let us know what you find.
Since you invited more questions about integrating Flickr with WordPress, here's a question for you (actually it's a dream):
If you embed Flickr hosted images in your WordPress blog (which we do), is there any elegant way to resize (and store) the resized image in WordPress to facilitate various “Related Posts” views. For example, I have a post with a single image (approx 500×300) in it. When that post is shown in a Related Posts view, it might be shown with the same image, but a different size (say a 75×75 thumbnail). Is there a way to manage this other than manually associate the various sized images with the post using Custom Fields?
Dannoll,
Great question and great idea. Unfortunately I don't know of anyway to do what you are asking for. I think a plugin could be written that would do that but short of a plugin I don't know of any way.
Sorry, not a very gratifying answer but great idea!
Great list of image resizing tools. I think BatchPhoto Espresso is also worth mentioning, since it’s free and can edit images in bulk. If you have to resize, crop, rotate or convert multiple images at the same time, this online tools is definitely worth a try.
I want to share one resizing tool http://way2enjoy.com/resize-image which is helping me yo resize my file size in just a snap of a finger .This is absolutely a user friendly tool.Normally through percentage its difficult to identify how much shrinkage we need.So you can put the exact dimension width length and size of the image and chose to what reduced dimension ,width and length you want.Automatically the image gets reduced and optimized together and give you the exact width and length of the image you want.You can resize 50 files at one shot which gets compressed into a zip folder.It then takes just few fraction of a second to open the file.
Hence enjoy a faster tool to speed up your website you want as I am doing.Do post your experience and in case you have any other suggestion do write back.