Are Your Images Blog Friendly?

One of the great mysteries in digital imaging is that of resolution and how it differs for printing and your monitor. I have had more than one person ask me to print a poster from a PowerPoint slide where the end result is great text and highly pixelated images. Their big question is always, “why does it look so good projected on an 80″ screen but so bad when I make a 30″ print?” This is usually the point where I try to explain the difference between screen and print resolutions. I don’t even bother with the whole raster vs. vector issue.

The same issue is found in reverse on many photoblogs that I have run across. Many times a photographer will take an image with their multi-megapixel camera and just upload it to their server without thought to actual screen resolutions and optimal sizing. The average 5-MP camera has a resolution of about 1600×1200 pixels. From looking at my user stats, I can tell you that the most common screen resolution is still 1024×768 pixels. In other words, why upload more image than the average user can fit on their screen? Not only are the images too large for standard monitors, but they are using up more server storage than is really needed. So here is another consideration, if you are writing a blog, the actual space the blog text occupies is somewhere between 500 and 750 pixels depending on the blog software and theme you are using. If you are uploading images to live in your blog post, you probably don’t need anything larger than that pixel width for any of your images.

 

Max pixel width for image in blog is 720

Maximum Image Width for my blog is 720 pixels

 

There are exceptions to this rule. If you want to provide a higher resolution image for the reader to view, either using Lightbox or having the image open in a separate window, then you will probably want something larger than 600 pixels. Even so, you should still consider not exceeding the limits of the average reader’s screen. So how do you go about making sure your images are of optimal size? There are a couple of easy solutions.

First off, don’t just dump your images straight into your website (this includes Flickr). First of all, it will take a long time to upload but it will take even longer for someone with a dial-up connection to download. I know as a cable user I sometimes get spoiled by my fast connection and forget that there are those who still connect at 56K and are just as valuable a reader as someone using FIOS. Don’t make them suffer waiting for images to load. Sooner or later, they will just stop visiting your page because they get tired of waiting. Those big images are also resource hogs taking up space on your server. I know that lots of people actually have their blog images hosted on a public storage site like Flickr or Picasa but hey, storage is storage. Why use it if you don’t need to (I actually have other reasons why I don’t host my images via Flickr or Picasa but that’s a subject for a different post.)

Resize the image prior to uploading. This makes sense for a few reasons, not to mention the ones that I just listed above. As with anything having to do with your images, if there is a way to control what happens to them, you should. Why let an automated process resize your images when it is easily done by yourself prior to uploading. The tool I use for resizing is Photoshop. This is a fairly easy process but usually renders really nice results for me.

To resize in Photoshop, it’s just a matter of clicking the Image menu and then on Image Size (you can also use the keyboard shortcut Cmd + Opt + I) The nice thing about the Photoshop resize is that you get to choose which method is used for interpolating your data from large to small. That’s the trouble with downsizing your images, you are effectively throwing out information so you should be careful which information is being tossed.

Image Size Options

I typically choose the Bicubic Sharper which, as you can see above, is also recommended by Adobe for reductions. I also use this one for enlargements but once again, more info for a future post. You also have the ability to input which resolution you would like your image to be and, as long as the dimensions are linked, it will maintain your aspect ratio for you by changing the dimension of the other axis (change height and width is automatically changed for you).

There are other methods that will allow you to resize for web in Photoshop, another one to consider is the Save for Web & Devices option found under the Image menu.

Save for Web dialog box

This option will allow you to resize and choose your JPEG, PNG, or GIF file options while comparing several different options at once. Above you can see the 4-Up option (no, there is no 7-Up option). This box will also let you deal with slices for making those larger web graphics load even faster. I have to admit that I don’t use this dialog very often but sometimes it is nice to see some comparisons, especially when you want to see how different JPEG compressions will effect your image.

Finally, this brings us to JPEG. If you are running any sort of photoblog, then you want your images to look good. That immediately rules out GIF for your images. Save that for your graphics files. The PNG format isn’t bad and will allow you transparent areas but you can’t set the compression level so there is diminished control over the final image size. That leaves us with JPEG. JPEG, which isn’t actually a file format, it’s a compression algorithm, has been around for years and still works as well today as it did 10 years ago, if you use it right. I’m not going to explain how it works (I really ought to wrie down all these ideas for future posts) but I can tell you what you should and shouldn’t be doing.

Here’s a BIG DON’T for you. Don’t just compress your images to a very small size without resizing them first. They will look like crap when they re-open in a browser. I am always surprised by the number of files that people email to me that are less the 300K in size but open to 20MB in Photoshop. Here are some definite DO’s:

Do use as little compression as possible for your image. There is usually no need to go less than Medium on the quality scale.

Do keep the Preview checked on. This will give you a real-time view of how destructive the compression is being to your image.

Do keep an eye on the file size of your image which appears below the Preview Checkbox (see image below). This will tell you how large (or small) your image will be with the current jpeg settings. I try and keep all of my web images under 300K if at all possible. The majority end up around 200K or slightly larger.

JPEG Options Dialog Box

So to summarize:

  • Don’t use more image then you need on your site. It will load faster and your readers will be happier.
  • Know what your optimum sizes are and resize using your favorite image editor (control the destiny of your images).
  • Choose the appropriate file size and compression for your images.

Comments

  1. Thanks for this article. It was very helpful – lots of great tips. I hope you do have future posts about the topics you mentioned because I’m looking forward to them!

  2. “(This includes Flickr)”?

    Not sure I follow your reasoning there. Flickr has no storage or bandwidth limits on pro accounts (not sure where the free ones stand these days) – so “storage is storage” is meaningless when what’s being offered is infinite. I have the opposite philosophy – youmay as well use what’s available. (The advice certainly applies to Picasa or other sites that have a storage/bandwidth cap though.)

    Also, Flickr automatically resizes the images and stores the different sized files, from thumbnail size up to the original one you uploaded. So you just grab an appropriate sized file and use that one (most typically “medium”) and there’s no issue with dial up users having to download a larger one. I don’t dispute that Photoshop probably does a superior job resizing the image than Flickr, but the difference would seem marginal at best. There’s plenty of good reasons not to upload original sized files to Flickr, but I don’t see this as being one of them.

    Anyway, besides that minor quibble, this was an excellent tutorial of the image resizing options in Photoshop.

  3. Hi Eric, The truth is that I don’t really care how much server space anyone uses on Flickr or any other storage site. I was just saying that unless you need full-res, why upload full res. Your points are all valid. One of the reasons I don’t care for hosting images from Flickr (I’m just using them as an example) is that 1) it increases the load time for your page since the image content is not in the same location as the rest of the blog 2) I don’t like giving anyone access to my full-res images. They can contact me if they have a need for the large file version, and 3) and probably most important to me, many filtering applications that are in use by a company to filter web content for employees (like WebSense) completely block content from personal storage sites. Many also block YouTube as well. Even though I am using YouTube for my video tutorials (for server storage and bandwidth issues), I would still rather host my own images to keep them from being filtered. So as you can see, this is just a personal preference of mine. I, unfortunately sit behind one of those WebSense applications at work so I know how frustrating it can be to not see image content associated with an article.

    Thanks for the input. The great thing is that there are alternatives for everyone to post their images, and hopefully in the best light possible.

  4. I upload my pictures to Flickr…I use Lightroom to import as a RAW file then export as JPG file in the following pixels:

    1280X850 or 850X1280

    What maximum size would you recommend for Flickr?

  5. Chris,
    The sizes you choose for Flickr depend on what your purpose is. I know that if you upload a large image to Flickr, it automatically creates smaller versions which you can link to (see Eric’s comment above). If you are going to be using your Flickr images for a blog post, I would choose the size most appropriate for the space in your blog where the image will appear. I typically don’t import my images at a resolution greater then 800×600. My feeling is that that is large enough to properly display my images without putting up something large enough for someone to make decent prints form (you know they are out there). Flickr is really an independent issue from the object of this post because Flickr and all of the other image hosting sites are serving a different purpose than your blog (usually). I would say that if 1280×850 is suiting your purpose then it is the right resolution for you. The key here is that you are resizing your images before uploading and that goes a long way to improving them on the web.

    Jeff

  6. Great post you’ve got here! I pretty much echo most of what you’ve said here (including the frustration with screen vs. print resolutions and raster vs. vector issues). However, I’m not too keen on recommending the Save for Web option in Photoshop because it strips the EXIF data from the image. Personally, I would want to include that in my uploaded image.

    As for a maximum size for upload, I usually go for 900px on the longest side. Since I keep most of my images in the 3:2 format, I can get dimensions of 900×600 (or even 1200×800) instead of 800×534 (if I calculated that correctly).

    One thing that raised an eyebrow for me though is this: “The average 5-MP camera has a resolution of about 1600×1200 pixels.” I had a 2.1MP camera that gave me images with exactly these dimensions. I’m pretty sure 5 megapixels gives you considerably larger images.

  7. Luis, your math mileage may vary :-) My D200 is a 10MP camera which gives me images that are 3872×2592 so yes, you are right on my numbers. somewhere around 2800×1800, give or take a pixel. Thanks for keeping me honest.

    Jeff

  8. Hello, you’re article was great and it helped me a lot in understanding issues of picture resizing. I’ve recently discovered a great resizing tool at http://reshade.com so I thought I should include it in my comment in case some people are interested in a good picture processing tool. You can test online their tool on your very own pictures. I hope it will be useful for you. You can link directly to your resized image on reshade.com so it is pretty easy.

  9. I have been searching for information on file sizing and came across your blog. I’ve read a couple different posts that have been very helpful. Thank you!

    I have been shooting professionally for about 4 years now, but was unsure about file sizes as far as for print, for web, etc.

    Again, this post was very helpful, but to make sure I’m clear on this… You save images a certain way for your clients and for print and then use another option for saving for web? Do you save both options one right after the other while you have that particular image pulled up in photoshop? And what exactly should I be setting my images to save to for a disc to give to my client and for print? What’s the best option for this?? And then the exact sizing for web images just depends on where exactly I’m posting them to, right? How about for facebook? Is there a specific size that works best for facebook?

    Thank you so much for your help!

Trackbacks

  1. PhotoWalkPro » Are Your Images Blog Friendly?

    Great article with tips for resizing photos for blog entries.

Speak Your Mind

*