Image Optimization tutorial... speed up your blog, featured marketing posts

Home : Blogs : marti garaughty, a highly caffeinated creative type. The Art of Marketing YOU : The Art Of Marketing You

Image Optimization tutorial... speed up your blog, featured marketing posts

garaughty, graphics, blog design, wordpress

Since quite a few people have asked, emailed and commented about optimizing images for blogs, I thought I'd do a quick tutorial explaining...

- what it is

- why it's important

- and how it can make your blog look better and run faster

garaughty,graphics

Almost every week I receive an email or see a post/comment like this one I hate it and I may as well tell you that I hate it!

Barbara's not alone in her frustration with slow, ugly blog pages. The thing is that when done properly and tastefully, customizing a blog helps you to stand out from the crowd and build your brand.

Unfortunately "tastefully" is a very subjective thing and if you don't know how to customize your blog properly, all those extra goodies you add can make it run slower than molasses on a cold winter day.

Worst case scenario, it can freeze up your blog altogether turning people away. This happened to me earlier this week. A blog post I clicked on in The Art Of Marketing You group wouldn't load properly so I wasn't able to read it. What hapened? I left, end of story!

garaughty, graphics, blog design

Without getting into a ton of really techie stuff, slow blogs or page loads are usually because of too many freekin widgets(especially animated widgets) and images that haven't been optimized. There are solutions to both problems, today I'll cover optimizing images.

what, garaughty, graphics, blog design, wordpress

Optimizing is making an image look as good as possible using the smallest possible file size. Take a look at the 2 images below (Rain Radio logos)...

this image was saved/exported at 100% quality

radio 100, garaughty, graphics, blog design, wordpress

this image was saved/exported at 75% quality

radio 75, garaughty, graphics, blog design, wordpress

Both images above look exactly the same. Both are 340 pixels wide X 216 pixels high but the file size of the 1st (top) image is 35.7 kb while the file size of the 2nd image is only 9.61 kb.

The bottom line is that the 2nd image is less than 1/3 rd the size of the first image so it loads much faster.

Why does this matter? It's difficult enough to get people to find, visit and keep coming back to your blog or website. The last thing you want to do is give them a stupid reason to leave by posting large, slow loading images.

In the example I used above, both files are fairly small so you won't see much of a difference even on a slow dial up connection but the problem is that people often load images into their blog direct from their digital camera without trimming down the size of the image.

Waiting for a 1 mb, 2.5 mb or as I've seen, even 10 mb image to load on a webpage is like waiting 5, 15 or 60 minutes for an elevator to arrive. Most people will get fed up and take the stairs or in this case... leave your blog and possibly never come back.

how, garaughty, graphics, blog design, wordpress

The solution to blog slog is simple! First you should size your image properly to fit the space it will appear in. For example, if you want to add an image to a blog that has a content space of 500 pixels across, make sure you size your image to be 500 pixels wide (or less) so it fits well into the space it will be seen in.

The second step is in how you save your image (also called export in some graphics programs). If you save an image at full resolution or 100% quality, it will be too "fat" to load quickly. The problem becomes worse with images that are larger in dimension.

bitmap(image) export

garaughty, graphics, blog design, wordpress

image export(saved) set to 75% quality

garaughty, graphics, blog design, wordpress

The way you optimize an image for the web is by saving it as less that 100% quality. In most graphics editing software this will be the final step. In the example above...

- by clicking on file menu

- you'd select bitmap or image export (depending on which graphics program you're using)

- when the export menu opens

- try out different quality settings (I usually use a setting between 70% and 75%)

- and find the setting that is the smallest possible value but where the image still looks good

- if the image begins to look dull, fuzzy or not like the original, adjust the quality to a higher level

save for web

garaughty, graphics, blog design, wordpress

save for web at 50% quality

garaughty, graphics, blog design, wordpress

In some graphics programs like Adobe Photoshop Elements (see example above) that comes bundled with many digital cameras, scanners, etc... you can adjust the image optimization by...

- clicking on the file menu

- selecting the save for web option

- when the save for web menu opens to test out different options of quality and files types

- you'll see a preview of the image before you save it

- then just save the image and upload it to your blog or website

If you get in the habit of sizing your images to properly fit the space they'll be used in and then saving your images in an optimized format, your blog will look better and run faster.

garaughty, graphics

garaughty, graphics, blog design, wordpress

If you're wondering how to customize your blog, take a look at our group's guidelines page for tutorials and graphics that you can download and use on your Active Rain blog.

If you have questions about technology, blog design or building web presence, let me know and I'll try to answer them in a future post!

time challenged, garaughty graphics, blog design, wordpress

Sorting through everything being posted in The Art Of Marketing You group can be a real challenge so... here are a few of the must read (on topic) posts from the past few days...

- "Stop Wasting Your Time on ActiveRain!" by Rich Jacobson

- How To Use ActiveRain Channels by Brad Andersohn

- The ActiveRain Suggestion Box by Brad Andersohn

- How Do You Choose Which Blog You're Going to Read? by Liz Moras

- Promote Yourself & Your Business Free on Real Estate Wiki by Christine Bohn

- Grow Your Business by Specializing and Target Marketing by Benjamin Clark

- The Perception of You = $$$$ by Julea Joseph

- Think as you take pictures of your listings... by Alexander Harb

- Stealing Images the Right Way by Justin Williams

- Sales fluff or straight talk? by Pacita Dimacali

- Abundance Starts Between Your Ears by Gary Woltal

- After 5 Days in Labor I have a new baby! by Diane Aurit

- ME ME ME Subscribe to my blog button - DON'T DO IT!!! by Bill Gassett

- Active Rain Blogging for Business-How Do You Make Your Phone Ring? by Katerina Gasset

- Your Photo Can Help You Generate Business by Loreena Yeo

- Real Estate 101 - Consistent Marketing Will Equal Results by Jason Crouch

garaughty, blog design, graphics, wordpress

- Please pray for TLW by Bryant Tutas

- I Do Not Want Points For This Blog, I Need Your Assistance by Paul LeMay

- Blog Harassement needs to Stop.....update by Kathy McGraw

- PIGGING OUT! Abuse of the ActiveRain points system… by Russell Lewis

garaughty, abstract art, graphic design, WordPress consultant, branding, marketing

If you'd like to participate in any of our upcoming marketing partnerships, games puzzles and giveaways or to stay on top of all the new tech stuff and graphic goodies...

You can also connect with me on Twitter, Facebook, Google+, LinkedIn and by email...

Posted by marti garaughty, a highly caffeinated creative type. The Art of Marketing YOU on 09/11/2008 09:26 PM

Comments (88)

Image Optimization for Blogs in the Online Marketing Channel

image optimization, tutorial

Originally posted at: garaughty, The Art of Marketing YOU: Image Optimization tutorial... speed up your blog, featured marketing posts

Generate short URL

Post is included in group: The Art Of Marketing You
Post is included in group: Stage It Forward...
Post is included in group: Realtors®
Post is included in group: Blogging & SEO

88 Comments on Image Optimization tutorial... speed up your blog, featured marketing posts

SEP

2008

I am one of those who won't wait...so what does that tell me? Do it right for the public and for others too...because they'll leave too....just like you stated.

You always have such wonderful tips marti. It's not all about advertising...it's about marketing and doing it right. :)

Sally... me too, we're all so busy nobody has the time or patience for slow loading blogs. This tutorial was way overdue. ;-)

Hey Marti - great info thanks for taking the time to write up that tutorial. Hope all is well with you. :)

Maureen... hi there, you're more than welcome, it was about time I got around to it. Life is good, as usual I'm just way too busy for my own good. Later M...

Hi Marti,

As always thanks for the great info. You've packed a ton of stuff in this one. I've missed a few of these posts, I'll cruise over and take a look.

Lynda... thx, I had to get this one done because so many people still use images that are way too "big" in their blogs which slows everything down.

Hi Marti,

Thank you for so patiently and thoroughly explaining this to us...and the pictorials are even more helpful! I had no idea that making an image smaller was beneficial....I was always concerned that it might somehow distort the image.

I'll keep all of this is mind for future blogs...I'm bookmarking this post!

Val

Val... hi, if you over-optimize the image it will distort but reducing the image quality for the web down to the 70% or 75% area it will look fine and load so much faster. This makes a huge difference with larger pics.

Marti,

Solid information for the image-challenged. I've been thinking about adding images and such to my blog and website, but now will carefully consider how to do it right and provide speedy loading.

Marti, Thank you for this helpful tutorial. I've been trying to learn Adobe Photoshop, so your timing was perfect. :) Thank you also for the link for TLW. I've been less Active on Active Rain the past few weeks and would have missed the post. Thanks for helping to get the word out.

Marti, thank you for the mention of one of my articles and listing all the other great ones you found. Your blog is so "packed" with meat and generous information I just have to read it slowly and soak it all in. Optimizing the images and downplaying all the widgets is something we all need to pay attention to.

Esko... it's definitely a good idea to start off doing it the right way, your readers will benefit from it as well.

Marti - I really like this tutorial, especially the info about the reduction of quality from 100 to 75 or 70. I had no idea you could do this. I learned something new today. Thanks

Lola... glad to hear this came in at the right time and welcome back, I thought you had been kind of quiet this week. ;-)

Gary... I don't post often but I try to put some meat into them when I do. Thx for stopping by and thx for another inspirational post, I love your style!

Petra... the problem with techies is that we often forget that the basics aren't always obvious to everyone. Since many blog are graphic intensive this tutorial should help speed them up.

Thanks, Marti. Liked your tutorial and subscribed to your blog. Will check back for other tutorials.

Hi Marti;

Thank you for taking the time putting all this information together, and than you for sharing.

Marti, I am amazed by your posts. There is usually a few posts within your post!!!! Thank you for the detailed tutorial.

Hi Marti, Great information. Thanks. This one is bookmarked for sure - so I can go back and figure out exactly how to do this correctly. ~Rita

Sherry... thx for the feedback and for subscribing, it's nice to have you here in the group!

Marti - I found this post via Google Alerts, because I guess it initially had my name in for my latest post, but it must have been deleted. I actually tried to join your group today so that I could put my marketing post there, but it has me as "Member - Can't Post". Sorry to see that I couldn't be included in your recap.

Marti: You are just a WEALTH of knowledge! Thank you so much for both the tutorial AND the highlighted posts! There are some DEFINITE must-reads on your list!

Anthony... my pleasure, we all learn a lot from each other here so I'm just trying to do my part. Nite!

Mana... hi and thx, I don't post often but I try to make it worth reading, I really appreciate the feedback.

Thanks for the tutorial! Without people like you, I would never know how to do anything!

Marti, what a fabulous blog post. So much information, good tips for sizing our photos, and you share such great blogs from our Rainers. ;-) Thanks so much,

Jason... re "I found this post via Google Alerts, because I guess it initially had my name in for my latest post, but it must have been deleted"...

Actually your post is/was in the Time Challanged section but was somehow cut off when I added the Special Mention graphic just below it, sorry about that, the Google Alert was right, thx for letting me know!

Marti, I just came from Brad's blog and I'm TRYING so hard to get some of this stuff technology down....It isn't easy, I wonder how some people get so GOOD at it whie I flounder.

Rita... it's pretty simple, most graphic programs work the same way, I'm sure you'll get the hang of it on your first try!

I think activerain may be part of the slowness. Sometimes their database doesn't log simple text entry like this comment for 10 or 15 seconds. Maybe their system is a little bogged down too?

Marti - Thanks for adding it back, or for making the correction, as it were. I had some other posts that I wanted to put into your group as well. It looks like I was upgraded to "Can Post", so I will likely move a few others over soon. Have a good one!

Debe... you're totally welcome. this post was seriously overdue, I got sidetracked in the past few weeks juggling too many projects. ;-)

Marti, I am so looking forward to reading your post...it may take a few days. I am preparing for Ike the hurricane and I will be focusing on other things for a while. Your writing is top notch as always and you are a spectacular read. I will catch up as soon as I can. You take care. L, Deb

Scott... the variety of knowledge here in the Rain helps us all, I've learned a lot as well. Thx for stopping by!

Teri... hi there and thx, I try to make them worth reading. Have a great nite!

Carole... my friend, we all have our niches & specialties plus... you've got me watching you back on the tech stuff. ;-)

Jason... hi again, re "looks like I was upgraded to "Can Post", so I will likely move a few others over soon"...

The default for new members in this group is "can't post" so we can weed out spammers when they join, most new members are put on "can post" the same day. Nice to have you in the group. Nite!

Deb... I hate this time of year even tho I'm nowhere near hurrican danger but I have so many friends like you who are. Stay safe, take care of you, your family and the cats. Reading/blogging can wait!

Lane Team... with over 108,000 members I'm not surprised the the Rain servers get overwhelmed at times. Thx for stopping by!

This looks very interesting but at midnight here in Florida I am postponing trying to understand it all...soooo I'll be back! Thanks cause I really need this!

Marti the marketing guru.... thanks for sharing all of this and giving some good examples to why some blog pages might load slower...

Jeff Belonger

M-u-s-t h-a-v-e b-l-o-g load fast: all that time & effort wasted if your audience gets impatient. Great post, Marti!

Sara... good idea, the info will be here when you need it. Nite!

Jeff... unfortunately a lot of people aren't aware of the problem because they're on high speed but many people still use dial up and nobody wants to hang around 5 minutes for a huge image to load. Later JB...

Kent... absolutely & well said, it's such a stupid reason to lose readers. Later!

SEP

2008

You can take a look at the results by checking out our blog. We exported all images at between 30-60%. If your image has dimensions of over 1500 pixels-3000 pixels then i suggest as low as 15%. There will be more than enough pixels to keep the image from looking blocky. Also try to export as .gif and at 128px. This will allow for greater optimization. That is not always the case though but that's another post. Just play around with it. For those who don't have photoshop, here are some other options.

Marti,

Great recap. I read them all and learned a lot. Thank you for your faithfulness in bringing us the best AR has to offer.

Castellum... thx for stopping by!

Fran... I thank you and all the other bright, prolific members here that bring so much to the group. Nite!

Much much excellent information. Every once in a while I forget to optimize graphics, then someone will email me, wanting pics of a listing because the page is not loading them.... so I have to go take care of it. It's better to remember to do it the first time! Thanks for reminding me.

OMG, I better check this out! I'm feeling like a cat covering up .... in a kumquat patch... what in the devil do I do first?? Write my articles for outside publications, finish reviewing the review of my outside blog, do my post, decide on a new camera, do market statistics... thank goodness for bookmarks and your posts! XXOO.

marti, thanks for the tutorial, I've been wondering how to do it. I found out the yard way on flickr when all my photos were MB and it tool forever to load them. I am taking them on the smallest resolution on my camera, but I think I need to resize after they are on my computer. I just got a new lap top and hired geek squad to transfer all my crap over. I had 13 GB, mostly photos. Again...thanks !

Thanks for the post. I will bookmark this and read it later.

As usual you have outdone yourself with all this info. I always end up bookmarking your posts to rad more later. Thanks for all the work ad the summaries and the best posts not to mention the how-to section.

Marti,

I sincerely admire your ability to write such an exemplary blog post. A million thanks for the materials here.

Thanks for mentioning my "I just hate it" blog. I still don't understand the bloggers who know they have that hanging sheet of either color or graphics when you go to read their blog or comment. I now just don't go there and sometimes get so frustrated that I just unsubscribe. And I still don't understand whether it is deliberate or an error in their setup.

But with your mentioning it, perhaps more will pay attention.

A great post. Those of us who love our pictures and images need to be reminded to reduce the file size. I try to keep mine at 300 pixels just so they load faster, but it's not always easy to do.

Marty - arrrggghhh I guess you have just given me another "homework assignment". I have bookmarked this and will get to work about blog slog with my photos/images. I don't use Adobe, I am still in the slow zone....I use Photo Studio 3.0 (I know you are laughing). I guess I should invest in a different program for images. Oh...and thanks for adding one of my posts to your "read list". I will get to reading all the ones you listed.

Marti -- This tutorial was vey helpful. I am still trying to get a handle on the photo resizing and this was straitforward and easy to understand Once again, thanks for highlighting the best posts of the week. I actually read almost everyone of them. Great contributions.

Hi Marti - these are things that I tend to believe that we all know how to do - however it is clear that some do not - or they simply forget to resize and/or condense a photo before uploading one. I may have been guilty of that myself - thanks for the tutorial - I will make certain to follow this the next time I use a photo.

Hi Marti-really great stuff...as usual...I often wonder if my blog loads slowly..I tend to use my office computer to see...because really its an older computer...with less memory..not the best vid card..and it seems it opens pretty easily.

Great selections of posts..as always a great job! :)

Judi... optimizing images is a must do on the web, your vlients will love you for it.

Susie... you sound busier than I am, a "review of your outside blog"? I'd love to read it if you can send me the link. Have a great weekend! {xo}

Missy... OMG 13 mb pics? Wow those are huge, printable quality, flickr will run a lot better when you optimize them. Have a great weekend!

Gita... you're more than welcome, have a great weekend as well.

Marti,I'll bookmark this and make sure that I have been doing it accidentally in the past and make sure that I do it in the future. Thanks for trying to keep us informed to be the best that we can possibly be.

mARTI THIS IS A VERY GOOD INFO. THANK yOU.

Michael... thx for the feedback, enjoy the new stuff and the weekend!

Diane... I try my best, glad it's helpful. Have a great weekend!

Barbara... I'm glad I saw your post, it was the motivator to finally get me to write this. Thx.

Judy... like you I love using pics/images, if you keep them optimized they won't cause problems.

Christine... any graphics program is fine as long as it gets the job done. Also thx for the Wiki post, much appreciated.

Joan... hi and thx, I'm glad this was helpful, I try to do this stuff in plain English so it's easy to follow along. Have a great weekend!

Kathleen.... you're absolutely right, I also assume a lot myself, not always my best move. ;-)

Mmmmmmidori... it's both large/fat pics and too many widgets that cause the load problems. I test out things on dial-up and some of the AR posts are alomst unreadable because they take so long to open. :-(

Gena... you're very welcome, it becomes 2nd nature once you get in the habit. Have a gret weekend.

Olga... thx for the feedback, have a great weekend as well.

Marti, I'm wondering if my new blog inspired this post topic because I know my background is a large file and am working on making it smaller...as always your help is awesome!

THANX a million times for someone who hates dealing with these image thingie software it is a great post. Thanks a million again

Your blogs are always great and I learn a lot. The 75% looks great and if you did not see the 100% you would not know the difference.

I picked up Batchblitz by SunLitGreen... It resizes groups of images. It is wonderful to knock down a bunch of pictures for an online album or other web purpose.

This is well written and easily understandable information. Thank you so much!

Diane... not at all, actually I've been asked about this topic many times so I had to finally get it done. Your blogs loads pretty fast, even on a dial up test but it never hurts to make it as efficient as possible.

James... you're welcome a million times, have a great weekend!

Jean... you're right, I find 75% quality if perfect for most of what I do on the web. Printing images is a different story. Thx for stopping by!

Lane... thx for the tip on Batch Blitz, I've heard about it but haven't tried it yet.

Sharon... hi and thx for the feedback, have a great weekend!

SEP

2008

Marti,

I'm afraid this may be something that I have to work on. I need to look at my blog from a different computer and see how it comes up. Thanks for the suggestions.

Marti, I look forward to your updates and posts every week! I have also been tempted to add all the widgets and gee-gaws but realize that they can slow my blog down and I have been re-sizing my pics for optimization since you mentioned it when I first joined. You Rock and thank you for mentioning my points pig post! Have a great week!

Christine... it's more noticeable on dial-up connections on the net, a lot of people (especially in rural areas) don't have access to hi-speed net connections so big images & widgets dramatically slow down blogs. Have a great weekend!

Russell... hi and thx. I loved your PIGGING OUT post! Stay safe this weekend, things look pretty bad in your part of the world with hurricane Ike!

marti- I could have a whole Bookmarked ebook of all your great tutorials :) Your comment about people just leave if someones site takes too long to load happened to me for a week on one of my Subscribed bloggers. But instead of not going back there were a couple of us that contacted AR to help solve the problem.....and guess what it was a widget! so this is not only timely, but chock full of marti-ism's (hey I like that) Ok, I have a question....is the size 800x600 ok for AR and outside blogs, or should they be even smaller?

Kathy... OMG, marti-ism's??? Cute ;-) The AR outside blog post section is approx. 515 pixels across and the standard Rain blog post area is approx. 685 pixels across

The height doesn't really matter too much because that won't distort the blog. As with Wordpress, try to make images fit within the posting area or whatever looks good to your eye. Have a great Sunday K!

SEP

2008

Marti - I just started reading your blog and it is just jam packed with such terrific information. Thanks for taking the time to help all of us improve our presence here on Active Rain. I'm bookmarking your blog so I can come back to review all of your great tips.

Donna... it's my pleasure to help out when I can, thx for stopping by and welcome to the group, it's nice to have you here!

This blog does not allow anonymous comments

marti garaughty, a highly caffeinated creative type. The Art of Marketing YOU

Montreal, QC

More about me…

garaughty.com

Address: 4000 Sources Blvd, suite 502, Montreal, QC, H9B 2C8

Office Phone: (514) 545-1805

Cell Phone: (514) 545-1805

Email Me

Applied creativity... pushing the boundaries of paint, pixels and new media.

Elegant, sophisticated blog design & graphics. Wordpress customization, installation and consultation. Marketing tools, online games, promos, client gifts.

For web hosting, I use and recommend...

For email marketing, I use and recommend...

garaughty on Twitter

Listings

Links

Archives

Find QC real estate agents and Montreal real estate on ActiveRain.

Disclaimer: ActiveRain Corp. does not necessarily endorse the real estate agents, loan officers and brokers listed on this site. These real estate profiles, blogs and blog entries are provided here as a courtesy to our visitors to help them make an informed decision when buying or selling a house. ActiveRain Corp. takes no responsibility for the content in these profiles, that are written by the members of this community.