Blogging Basics – Resize a Photo

By
Education & Training with Tech Training for You!

To make a blog post more appealing, you should use images for eye appeal. Often the images we would like to use are in the form of photographs. I see very often (with even experienced bloggers) a mistake with images because of not understanding proper sizing of a photo.

row boat at staten island children's museumLet’s go through an exercise of preparing a photo for a blog post so you can learn proper technique.

When you are blogging, you have a main content area where your text will go. On web pages, our unit of measure is the pixel. Most blogs have a content area ranging between 600 and 800 pixels. It depends on the theme you are using as to how much width you have available to you. On ActiveRain, the current theme has a content area that is 700 pixels wide.

The photo of my son in the play rowboat on the right has been sized to 350 pixels wide so that the text can flow around the left side of the image. However I did not simply upload the original photo to the blog page. This photo was taken on my wife’s iPhone. The iPhone uses an 8 Megapixel (MP) setting. In terms of our page ruler, that is a problem. Consider that 8MP photo from the iPhone has the pixel dimensions of 3264 x 2448 and a file size of 3.8 Megabytes (MB).

We just mentioned how I needed the photo to be placed with a 350 pixel width. The mistake that I often see is that people will upload the full resolution image and then tell the blog page to “show it smaller”. Have you ever been on a blog page and notice that the images take a few seconds each to load? You will usually see a “waterfall effect” where the photo gradually reveals itself in a top to bottom sweep. This is the clue that the blogger did not upload a blog-optimized size photo but instead just uploaded the original photo. (It takes a little time for those Megabytes to transmit to you.)

This is bad because we want our blog pages to load in a snap! It is a poor user experience to have it otherwise. Google also in its page ranking algorithm looks at page load times. Can you perceive a few negative points here on your page score?

So what you need to know as a blogger is, “how do I resize a photo BEFORE I upload it?”

You need the assistance of a photo app to create a smaller size copy of your photo. If you want to use a desktop app, you can use the basic choices that most computers have which is the Paint app on Windows or the iPhoto app on a Mac. Another great option is to use one of the web based photo apps that are available for free. My go to web app is iPiccy.com (there are other similar web apps like Pixlr, Picmonkey, Ribbet, etc but I really like the ease of use of iPiccy and the range of editing tools they give)

Once you have your photo opened in iPiccy, notice the different editing panels on the left side of the window. Find the “Resize Image” panel. You’ll see your original high resolution number that you want to type over it with your lower number. 350 pixels is a good width that will take up approximately half of the text area width (for when you want to wrap text around a photo like above). If you are doing a photo to match the entire width of your blog text area, you would choose 700 for ActiveRain (or similar depending on your actual blog page theme if on WordPress or elsewhere).

 

ipiccy resize

Afterward, you will want to save the image from the website to your local drive.

save-tab

I often will name the file with the size number as a reminder that this is the version of the file that I want to upload to the blog post.
So in this case, I called it “rowboat-350.jpg”

In the end my image was 38 Kilobytes (KB) or 0.038MB or 1% of the 3.8 MB that the original image was.
This means a huge difference in page load times!

Now you know how to properly resize a web-optimized photo for your blog!

originally posted at Craig's Classroom Tech Blog

Posted by

Hi there! Thanks for checking out my blog today. I'm a tech guy living in New York City but I love that I can reach so many via means of the web. In my blog posts and tutorial videos, you'll get many new takeaway points that you'll be able to apply. By following my blog (button below), you will be able to see my new posts in your "following" newsfeed. If you enjoyed this post also be sure and click "like". It helps me see that my content is hitting the mark!

My blog home page lists my most recent posts, so if you feel like reading more, that's the place to go next!

Click to  

 

close

Re-Blogged 2 times:

Re-Blogged By Re-Blogged At
  1. Lynn B. Friedman 07/12/2014 12:16 PM
  2. Praful Thakkar 07/13/2014 03:59 PM
Topic:
ActiveRain Community
Groups:
Active Rain Newbies
HELP/FAQ (Read 'Purpose Statement' Carefully!)
Addicted to Active Rain
Bananatude
Tags:
blogging
photos
ipiccy

Post a Comment
Spam prevention
Spam prevention
Show All Comments
Rainmaker
871,844
Elyse Berman, PA
Best Connections Realty, Inc. - Boca Raton, FL
Boca Raton FL (561) 716-7824 CRS, ABR, GRI,ePR

Thanks for the tip, Craig.  I have used IPiccy in the past but have also uploaded old photos that were too big and resized.  Taking your advice from now on!

Jul 13, 2014 02:07 AM #16
Ambassador
2,864,119
Tammy Lankford,
Lane Realty Eatonton, GA Lake Sinclair, Milledgeville, 706-485-9668 - Eatonton, GA
Broker GA Lake Sinclair/Eatonton/Milledgeville

I always just send it to my computer from my phone making it smaller or from my SD card if I took it with my camera.  A quick email to myself can size a batch with two little clicks.

Jul 13, 2014 08:03 AM #17
Rainmaker
648,397
Bill Reddington
Re/max Southern Realty - Destin, FL
Destin Florida Real Estate

Have been resizing pictures for awhile. Make it so it will fit and then resize. I hve superfast internet so maybe I don't notice it as much.

Jul 13, 2014 09:23 AM #18
Rainmaker
974,759
Beth and Richard Witt
Long Island Cash Home Buyer - Huntington, NY
Long Island Cash Home Buyer 516-330-6940

I'm so happy that Kathy included this in her weekly post or I would have missed it and I would not have wanted to do that.... So thank you and thank Kathy... Love the photo of your son.... Happy Week...

Jul 13, 2014 10:04 AM #19
Rainmaker
521,919
Lisa Friedman
Great American Dream Realty - Essex, VT
30 Years of Real Estate Experience!

Excellent post, Craig. I did not understand the 'why' behind slow loading pages. I will be cognizant of this in all future posts. iPiccy is my program of choice.

Jul 13, 2014 10:08 AM #20
Rainmaker
3,094,424
Nina Hollander
Coldwell Banker Residential Brokerage - Charlotte, NC
Your Charlotte/Ballantyne/Waxhaw/Fort Mill Realtor

This is great information, Craig. Thanks for sharing. I've bookmarked for future reference.

Jul 13, 2014 11:01 AM #21
Rainmaker
1,060,712
Sharon Parisi
United Real Estate Dallas - Dallas, TX
Dallas Homes

Craig, this is great info.  iPiccy.com is a great site.

Jul 13, 2014 03:08 PM #22
Ambassador
4,300,186
Praful Thakkar
LAER Realty Partners - Andover, MA
Andover, MA: Andover Luxury Homes For Sale

This is a great site and app, Craig. Many PHOTO software does come with this option. The take away for me from your post is - why one should upload the optimized image to web.

Jul 13, 2014 03:57 PM #23
Rainmaker
546,189
Eileen Burns
Trans State Commercial RE Ft. Lauderdale/Miami/Palm Beach - Fort Lauderdale, FL
FL Probate Agent, Hotel & Land Specialist

Thanks Craig and Kathy!  I have a real-buzz site that needs specific 810 x  222 and was not able to resize in ribbet.  Will now see about Ipiccy.

Jul 13, 2014 10:29 PM #24
Rainmaker
3,607,128
Sheila Anderson
Referral Group Incorporated - East Brunswick, NJ
The Real Estate Whisperer Who Listens 732-715-1133

Good morning Craig. What an excellent tutorial. I wish I had this a year ago, but I've got it now. Thank you.

Jul 13, 2014 11:09 PM #25
Rainer
79,603
Allen Bush
Intero Real Estate Services - Brentwood, CA
Home Sales, Real Estate, REALTOR®, GRI, CHS, ePro

Great information Craig. It will help me going forward. Thanks for sharing.

Jul 14, 2014 02:50 AM #26
Ambassador
1,851,970
Debb Janes EcoBroker and Bernie Stea JD
ViewHomes of Clark County - Nature As Neighbors - Camas, WA
REALTORS® in Clark County, WA

Oh my goodness, that's what causes the problem?  Thanks so much, Craig. 

Jul 14, 2014 02:53 AM #27
Ambassador
1,162,024
Jerry Newman
Brown Realty, 210-789-4216,www.JeremiahNewman.com - San Antonio, TX
Texas REALTOR, San Antonio Military Relocation

Craig, What a great tutorial for uploading our images. I had be guilty of changes the sizes after uploading into Active Rain. Now, I will just re-size first.

Jul 14, 2014 11:05 PM #28
Rainer
53,065
Eric Galuppo
Real Estate Rev - More Leads Means More Revenue

Thanks Craig for introducing Ipiccy. I am using Pixlr for years but still want to know more editing apps. 

Jul 15, 2014 12:00 AM #29
Rainer
4,002
Geri Bauer
Estero, FL
Real Estate Agent SWFL

Wow! Thank You so much for this article. I could not figure out how to get my photo to upload properly and in 5 minutes I did it with the help of this article. I'm a follower now!

Jul 17, 2014 01:00 AM #30
Rainmaker
238,102
Lisa Perry - NMLS # 276329
FHA, VA, Jumbo, Downpayment Assistance, Conv. - Fairfax, VA
Northern VA - 80/15/5, 100% Loans - Jumbo Loans

Well, thank you for this blog.  I will go and use the ipiccy.  I just tried to upload my header photo in active rain.  I could not get my photo to match the active rain parameters, so my photo looks smaller than what it is suppose to be.  I will try it in ipiccy and see if it works.  Thanks for the info. 

Jul 17, 2014 03:49 AM #31
Rainmaker
166,473
Tina Gleisner
Home Tips for Women - Portsmouth, NH
Home Tips for Women

Very well written & key to managing website performance ... thanks!

Jul 20, 2014 02:15 AM #32
Ambassador
789,410
Mimi Foster
FALCON PROPERTY SOLUTIONS - Colorado Springs, CO
Voted Colorado Springs Best Realtor

On my website I use it in a 1024x??? format. When I've been uploading those 'cropped' photos to here, I never think to edit them first, just resize them in AR. You're just full of great advice. Thanks for your time!

Aug 09, 2014 11:52 AM #33
Rainmaker
1,945,632
Andrew Mooers | 207.532.6573
MOOERS REALTY - Houlton, ME
Northern Maine Real Estate-Aroostook County Broker

Compression, important in more than high horsepower drag racing, in saving a person that's ticker stopped clicking. In images, videos, in audio sound tracts it is always about the look, angle, lighting, composition. But compression. The hurry up and wait is not thinking of the guy or gal, their device experience on the other end of the connection.

Your web host of your blog, video channel, real estate websites thanks you for slim, high school skinny for file size but looks the same. Unless blowing it up on a big screen, overhead projector and then oh oh. You brought a set of knives to the gun fight. Great post as always! Education is one big reason to carry books around the AR campus. To share, learn, reinvent the dog and pony. Thank you! Corners, shadows, improve images filling all the available sockets on the marketing plane.

Reduce the weight, take them to the photo gym for a work out. Dress them up, slim them down and make it obvious those sets are yours without needing a logo or watermark on them.

How do you "play" your cameras, the time out of the box  to upload and no added value extras? Or made with love to jazz them up like a cheap store bought cheese pizza. But after a little creative flare, some veggies, seasoning, voila. Your buyers want another and another piece... cause this is good, tasty. They are hungry, all over that.

Dec 02, 2014 10:16 PM #34
Rainmaker
871,844
Elyse Berman, PA
Best Connections Realty, Inc. - Boca Raton, FL
Boca Raton FL (561) 716-7824 CRS, ABR, GRI,ePR

Craig,

 

Just found this post after all this time.  Been using Ipiccy for years, but wanted to use this too.  Still can't find Auto, but I figure it will turn up the more I play with it.  

Feb 17, 2017 05:09 PM #35
Post a Comment
Spam prevention
Show All Comments

What's the reason you're reporting this blog entry?

Are you sure you want to report this blog entry as spam?

Ambassador
456,971

Craig Daniels

Technology Instructor/Project Consultant
Ask me a question
*
*
*
*
Spam prevention

Additional Information