4 Ways to Formatting Images for the Internet

I don’t really think it’s unreasonable that a lot of photographers out there aren’t entirely savvy about all aspects of technology. Take me for instance: I can barely figure out all that @soandso and #britneyspears. If you use Twitter, you’ll know what I mean. If not, then you’re lost with me.
So here I am writing a painfully simple introduction to preparing your images for viewing on the internet and the 4 top ways I accomplish this.
Why do anything to your photos before uploading them to your blog? File size is a big reason. Full-sized images can be 4,000 pixels wide (their eyeball will take up your screen at that size) and uploading it will take dog’s years, use up precious space on your account and when viewers view it, it won’t pop up instantly on their screen. It will take a few seconds to download. So that’s reason one. Reason two is that if someone was so inclined to swipe your image, they could steal it at the original size and do pretty much whatever they want. Not a huge likelihood, but lots of people are concerned about that sort of thing.
A treatment you can add to your images is sharpening for the screen to enhance the look of your image on a computer screen. Not to be used for printing, but very useful for Facebook (FB sucks by the way – they take resolution down to a detestable bare minimum).
Here are four ways I prepare my images for the internet depending on my mood

The first way I can format photos is in Photo Shop. Click file —> save for web. It then brings up the panel you see to the right. The main controls you want to mess with are the two I circled. One chooses what resolution you want them to be saved as and the other changes the size. 800px wide is a pretty good internet size. Make sure you click apply or else it won’t actually do the resizing. Keep your eye under the image. The original one on the left tells you the size of the original image in mb and on the right shows you the size you’re changing it to and that fluctuates depending on the resolution you choose up there in red circle 1.
The next way I resize is in Lightroom. After choosing to export, this screen pops up. You can scroll down to decide what size to export to and even do some sharpening for the screen. Note: The next time you export, these will still apply. So make a habit of scrolling through the export properties every time you export unless you want to mess something up.

My all time favourite way of resizing my images is by using blog-it templates from The Album Cafe. They are ingenious little templates you very simply open, drag your image into the layers, drag the corner of your image in to resize it and then type ctrl+g to clip it in. It automatically resizes your image to around 800px and finishes it off with an adorable frame perfect for your blog.

The last way to do a very quick resize on a MAC is with the preview function. When you’re in finder and you open an image, go to tools —> adjust size and this screen pops up (see above). You simply change it according to pixel size or percent and click ok. Then you can save or save as and there you have resized an image in about 5 seconds.
So there you have it: four ways to do one job. Couldn’t be easier.




30 Responses to “4 Ways to Formatting Images for the Internet” - Add Yours
January 16th, 2010 at 1:05 am
I have been using photoshop for years and I always use the “image size” spot to resize. I have never even seen that save for the web option. Thank you so much! You are going to save me a lot of aggravation!
January 16th, 2010 at 1:06 am
Hey thanks for all you do not evetthing I use but its nice to see different ways of doing things.Such as the last one resizing photos for the I net
January 16th, 2010 at 1:09 am
Also, in apps like Photoshop and Aperture (I don’t know about Lightroom), make sure you tell it to use your monitor’s color profile (on my MacBook, it’s “Color LCD”) … otherwise when uploading to Facebook, the colors will look really bad!!! Facebooks resize doesn’t seem to honor the color profile and either strips the color profile or changes it to sRGB (can’t remember which, but it makes blues and greens look drab) …
flickr, on the other hand, handles color profiles correctly, so all versions look the same and match what you see in your photo editing app … in Photoshop, also make sure to DISABLE “Convert to sRGB” in addition to converting the color profile to “Color LCD” (or similar) … otherwise, colors will still be off …
lots to think about, but what i do is have a “resize to 640×640″ export profile in Aperture that i use for Facebook … this way, i know it’s set to the right color profile if I choose that export profile, plus it’s resized by my app, making upload time much faster (i do full-size exports to flickr) … haven’t gotten it completely tweaked to the exact size as facebook, which would (hopefully, depending how FB’s resize script is written) alleviate the FB resize, thus keeping your photo much clearer … even my pics that are RAZOR sharp in Aperture look pretty bad on FB because of their resize script :( … i’ve written numerous PHP websites that have image resizing and i’ve never had anything end up looking that bad! i wish they’d fix it! it’s especially bad when I upload website designs, because they’re even more noticeably blurry :(
January 16th, 2010 at 1:16 am
Hi,
This is wonderful. How about an equivalent tutorial using open source softwares like GIMP. This will be specially attractive for amateurs like myself who can’t use Lightbox?
January 16th, 2010 at 1:16 am
oh, i forgot to mention (though i would guess most people have figured it out by now) that flickr does the opposite of facebook as far as clarity … they sharpen the resized photos (sometimes it’s a bit much for my taste, but at least it looks better than FB!) …
January 16th, 2010 at 1:17 am
@Jesse: Do *not* convert to your monitors profile.. Use sRGB for web. Always.
Otherwise it might look okay on your screen (depending on browser used) but it *will* look crap on anybody else’s screen!
Have a read here: http://www.getcolormanaged.com/color-management/saveforweb/
Use Firefox3 with full color management enabled: It will assume sRGB for untagged images.
January 16th, 2010 at 3:08 am
Thanks, Elizabeth. Not all the readers of DPS are pros. I love “basic” posts like this.
January 16th, 2010 at 3:16 am
You really really really need to try Russell Brown’s 1-2-3 script for your Photoshop work flow. You will never use anything ever again for your converting for Web. All you do is open the script and then choose from the options listed. The best part is that you can have one PSD then convert to multiple file formats AND run actions like watermarking, and high pass sharpening action for final sharpening. All at the same time. I can create a jpg for the web, and a jpg for print. GIFFs, PSDs, and TIFFs, all with different color profiles, file sizes, resolutions. It is the most useful tool that I have, and every file that goes to the web and to print goes through this script…it’s that good.
You can also use it from Bridge so if all you use is ACR for your RAW, TIFF, or JPG images, you do all of your changes in ACR then go back and select the script in Bridge and it does all of the work, just like its a PSD.
You can find the latest scripts as well as tutorials on his web site: http://www.russellbrown.com/scripts.html . It is part of his scripts bundle. For previous versions of CS, you can find a link on that page for his archive near the bottom of the page.
January 16th, 2010 at 3:24 am
@rené … ok, i stand corrected … the articles i’d previously read suggested that to turn off all color profile stuff completely and at the time it was the ONLY way i could get my web designs to match exactly what i was seeing in photoshop
January 16th, 2010 at 3:39 am
I always use the first method with Photoshop CS4 and the “Save for Web” option. Any published photos get resized to 800px on the long side and I always adjust the quality slider until they are around the 100kb size so that downloading shouldn’t be a problem for mobile devices / slower connections. It seems to work for me.
However I like the idea of using Lightroom, especially from what I have seen of the export features of the new Lightroom 3 Beta version. The biggest problem with Photoshops “Save for Web” feature is that it strips the camera Exif data so my settings don’t show with the file. Great for giving images to clients but not so great when I am sharing the photos on my blog or Flickr.
January 16th, 2010 at 3:43 am
Yesterday I used the buit-in batch resizing option in photoshop… the original pictures were about 3000×3000px and 600dpi but instead of limiting the amount of pixels on the options, i just used the setting that says “Quality” (you know, the one that goes from 1 to 12) and I placed it in 5. The images went from 1.2mb to about 450kb so I was very happy with this batch option and I’ll continue to use it.
I do have a question however, what is in photoshop, in technical terms “Quality” … is it like the dpi? because the images still had like 3000×3000px yet they were less heavy in terms of mb…
January 16th, 2010 at 3:53 am
Using Windows Live Photogallery (free from Microsoft), right click on the thumbnail, select “Resize … ” and select from one of four standard sizes plus “Custom.”
In addition, you can publish directly to Flickr from the Gallery or an open image by selecting Publish > Publish on Flickr …
Easy peasy and the price is right.
January 16th, 2010 at 4:15 am
MK, there is a save for web plugin for Gimp. I use it all the time on my home computers. Works similarly to the PS version.
January 16th, 2010 at 5:05 am
How about Picasa. It’s free!
- Upload to Picasa Web Album
- Select resolution
- Done!
or
- Export to HTML page
- Select resolution
- Select background
- Done! –> html page with thumbnails, clickable to full photo
It also has some basic editing features: light, contrast, color, crop, straighten and some special effects, including face recognition.
January 16th, 2010 at 8:05 am
So on a MAC do I need to have a duplicate file, does this resize the original or a copy?
January 16th, 2010 at 8:06 am
@steff on a Mac if you use Preview.app, it resizes the original … you can do a “save as…” after resizing to save it to a different filename, thus keeping the original as-is
January 16th, 2010 at 8:27 am
Image compression used to be a huge issue back in the 56k days. A header image that takes 200kbyte? The design department is out of control! OUT OF CONTROL I tell ya! :D
If I export photos for my blog, I’ll let Flickr do the resizing and embed the size I need. Saves work for me and this way visitors can get all images in full size if they like.
For everything else I use the “Save for Web” function in Photoshop. I’m not sure if it still is, but it used to be much more effective than the JPEG option in the normal “Save as” dialogue.
If I need to convert a bunch of files that are not JPEGs (screenshots for instance) I use the batch function in ACDSee. At work I also use it to create simple thumbnail galleries that go on the company intranet. Had to give up my Adobe Suite license when I left corporate communications. ;)
January 16th, 2010 at 8:30 am
@Michael Herzog – yes, Save for Web gives much better compression over the “Save As…”
also, image compression is still a hot topic in the web design industry… especially since google is talking about factoring in image load time into a website’s page rank …
January 16th, 2010 at 9:21 am
Another reason to resize your images besides speed and potential theft issues is screen resolution.
Not everyone has a large monitor to view your images on. I for example am using a laptop with a 15″ screen right now and any image sized much over 1000 pixels usually means I cannot see all of it and have to scroll. The viewer just can’t see the whole picture and if they’re anything like me, they just won’t bother and move on.
Just a quick note on using Photoshop’s save for web feature (sorry if it’s already been mentioned, I’ve not read all the comments properly yet) is that images saved using this feature are stripped of their EXIF data. This means stuff like shooting data, and any extra copyright info that you’ve added to the image will br removed.
January 16th, 2010 at 11:44 am
I’m a CS3 PS user w a photo-heavy blog and I’ve loved using flickr’s desktop uploader. Seamless. I’ve been told that the best color profile for. monitors is that sRGB…2.1. I go back and forth between just going to that image menu and changing DPI, dims and the save for web option. Not sure which is better when I HAVE to use it. Remember you can set dims and DPI using your crop tool!
January 16th, 2010 at 8:48 pm
For batch resize I would suggest VSO Image Resizer. It compresses the images very well and still retain alot of details. Also has alot of useful options for file renaming, aspect ratio and more.
January 17th, 2010 at 3:50 am
hm I always save my images at their full size (pictures taken in RAW with a 10.1mp) and just save it as jpeg; a 4mb image is saved and I upload to devart just fine
January 17th, 2010 at 1:33 pm
Thanks for this! I love photos but sometimes it’s hard to get through all the technical know how that goes along with modern digital photography! This was nice and simple for anyone to follow!
January 17th, 2010 at 10:25 pm
@Ultrasonic – saving at full size for master copies is fine, but unless you intend to allow printing of your images at Deviant Art, it’s not needed for versions you upload.
Photographic images (by that, I mean not images that are part of a web site design. etc.) only need to be around 650 to 1000 pixels wide for viewing on most web sites and are only around 100Kb in file size (give or take a bit).
January 18th, 2010 at 3:11 am
An even quicker way to resizing an image is to create an Automator plugin for the finder. Start with “Get selected Finder objects…” then add “Resize image” and then save it as a Finder plugin. Here you go. When you have selected an image in the finder right-click on it go to the Automator menu item and select your new workflow – here you go!
January 22nd, 2010 at 4:03 am
Thanks for the post and it is useful
I generally use Photoshop to resize my Images almost all the time using the Bucubic Sharper and it gives pretty good results.
Many times I use ACDSee too for Image Size Reduction but it compromises the quality of an image too.
January 22nd, 2010 at 4:18 am
If you can manage to crop your photo just a touch longer than it is wide, facebook will accidentally read it as a portrait instead of a landscape, so your submission will be double large. handy tip for the folks who also cant stand 1990’s technology in a modern site.
January 22nd, 2010 at 5:15 am
I love the Album Cafe’s blog-it templates as well. Very easy to use and make downloading speedy. Also, MCP Actions Blog has a free “resize and sharpen for web” actions that is wonderful!! If interested, here’s the link to the action – it’s under the high-definition sharpening: http://www.mcpactions.com/actions/try-me.html
January 22nd, 2010 at 7:53 am
Thanks for the heads up on Photoshop. And also take a look at googles Picasa program. It will automatically resize your photos for e-mailing. It’s great when you have lots of photos to send out.
January 23rd, 2010 at 1:47 am
JotaSolano
The quality slider controls how much information is discarded from the image when it is compressed into a JPEG.
If you select low (30 or below) you’ll see that the image looks less refined than at high settings.
The trade off is low settings = less big (lighter) files sizes which open faster.
So you image could be 3000 x 3000 pixels in size but be anywhere from tens of KB up to a Mb or so in weight.
Just adjust the slider until you get a quality/weight compromise you are happy with or reduce the pixel dimensions (so the image looks smaller) and try again.
Leave a Reply