modemlooper

Now that I have an iPhone and do a ton of mobile site hopping I have noticed the majority of blogs out there are not optimizing their images for fast downloads. You might argue that you don’t care as most people view sites via WIFI. I beg to differ and think this is going to be a problem very soon as more mobile phone manufacturers are developing real web browsing features. WIFI web browsing can handle 1 meg images but mobile browsing completely comes to a halt on these images. 

I put together this little tutorial to explain Photoshops save for web and devices feature. It’s little more than resizing correctly and then choosing a few save options to best suit the type of image. 

Resize Correctly
Make sure you know the width of your blogs posts to ensure you size images correctly. Some blog templates resize images via CSS and are actually crunching a much larger photo to look smaller but the file size remains the same thus defeating the purpose of optimizing.

In wordpress you can find out your blog posts width via the style sheet. The id may be different than what I’m showing here but it will usually be 400-600 px wide. 

My id is #mainCol and the width is 435 px. So I would not want to have any post images larger than 435 px. I would choose Image => Image Size and resize my image to 72px with a width of 435 px. There is one exception to this rule and that is image galleries where you want to reader able to click to a larger photo. Use the image gallery option for these type of photos. Most blog platforms resize a thumbnail for you. This is not that tutorial

 

Image Modes
When working on images you get a few mode options to choose from; RBG, CMYK, INDEX, LAB. RGB is for anything shown on a screen like a computer monitor. What we want to convert our image to is INDEX mode.

Index mode allows you to limit the colors used in an image to specific palette. The indexed palette can have up to 256 unique colors. This must be done after you resize the image or distortion will happen. You are basically taking out colors that you really can’t see thus making the image size smaller.

 

Save For Web
This is where you will have to make choices on your own. You can save to varied options that best suit the image being optimized. If the image is like clip art you might be able to save as a gif or if its a photograph a jpg will do better.

Click File => Save for web and devices

Choose the 4 up option so you can compare different options to get the best image quality for the least amount of file size. You will be surprised by how small you can get the image size without sacrificing image quality.

Here are some examples of blog post image sizing.

The full size: 503kb jpg - Click the photo and you will see the real size. Image scaled through CSS. This is a great option to have as a fail safe when uploading images but should not be relied on.

The resized image: 232 kb jpg - This has been scaled to fit the blog post width of 435 px cutting file size in half. not bad but can we do better?

Resized and optimized: 60kb jpg - I chose the jpg as this is a photograph and put the quality slider at 75%. Adjust this setting to fine tune your image. 

Compare this image with the one above. Can you see a difference?  503 kb, 232 kb or 60 kb? Instead of one photo in a post you could have 8 for the same bandwidth. This really helps when you do those top 100 images type postings. 

I hope this helps you optimize your blog post images for mobile viewers. To get really technical you should optimize every last graphic on your site or have a completely different style sheet for mobile viewers. 

If anyone has more suggestions please comment below