Re-sizing Images (Technical Tuesday)

Thanks to all the awesome people who submitted technical questions. There were so many interesting topics. Several of you asked questions related to working with images, so today I'm going to cover one of them.

Canda asked how to re-size images to fit on her blog.

There are two parts to this question. First, I'll explain how to re-size images. Then, I'll cover how to find out what size the images need to be.

Re-sizing Images: Quick Steps

1. Find the nicest image you can.
2. Choose which way to re-size.
3. Option A: Use length and width attributes.
4. Option B: Use an image editor.
5. Test it out.

Find the Nicest Image You Can

You need to start with a nice, clean image. Make sure all the text is crisp and easy to read; the colors are good; and nothing is blurry (unless it's supposed to be blurry).

While it is possible to increase the size of images using the methods I'm going to cover, doing that will increase the blurriness. Be warned, if you make an image a lot bigger things will look blocky. But, if you just need it a smidge bigger, then try it out and see. Otherwise, find a larger image.

Choose Wisely

I'm going to show you two ways to re-size your images. Before I jump into the details I'll talk a bit about how each of the ways work. There are reasons to use both, but if you're in a hurry just jump down to the second option. That will work for you most of the time.

Way #1: Make it Look Smaller

This way takes advantage of HTML code to make an image appear to be any size you want. It's fast and simple to do, but it comes with some significant disadvantages. 

First, if the image is big the user is going to download that big image. For example, imagine your neighbor calls up and asks to borrow a cup of milk, so you get out your moving dolly, load your refrigerator into the back of your car, drive over to your friends house, and pour a cup of milk for them. That's a lot of wasted time and effort.

Have you ever visited a site and waited a long time for all the images to load? Even though the images looked small? This is probably why. The images were actually big but were changed to only appear small.

Let me show you what I mean.

That's a nice image and a good size, but if you click on it you'll see how big it actually is. That's lots of wasted bandwidth.

Second, browsers aren't as good at re-sizing images as a real image editing program. They do their best and all, but if Internet Explorer ever gets better than Photoshop something is wrong.

So, why even use this way? Let's say you really do want a big image with lots of details. For example, you get back from an AWESOME writers conference and you have a great picture with 50 of your new closest friends, but when you make it fit on your blog everyone looks like little smudges. You can use this technique and when a reader clicks to see the full image they will see it immediately (because it is already loaded) instead of waiting for it to load.

Here's how you do it. After inserting your image in Blogger, click on it. You will see options for changing the size to Small, Medium, Large, etc. Choose one of those options. (Click the screenshot to see a larger view.)

Did you see what I did there? Screenshots are a great reason to use this re-sizing option because the reader can click to get a bigger, clearer view.

Advanced Tip:

After you select a size, change to the "Edit HTML" view and find your image. It should look something like this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD0w2oByOlBlWerltbaR2wlm9aeXLD_ZfWbVfeRZ3w8hLWAPleEyYsZdp6CaI8q324nXVEnApknI5C20nd2sN-3_e8VljmGAqYMH0zXHZJEXxiuCoe0TV3O_vkqlHacrWLHG0uXBmUyyY/s1600/Blogger-resize.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD0w2oByOlBlWerltbaR2wlm9aeXLD_ZfWbVfeRZ3w8hLWAPleEyYsZdp6CaI8q324nXVEnApknI5C20nd2sN-3_e8VljmGAqYMH0zXHZJEXxiuCoe0TV3O_vkqlHacrWLHG0uXBmUyyY/s200/Blogger-resize.png" width="200" /></a>

The "img" tag means this is an image. The height and width attributes are used to control the appearance of the image on the page. You can edit these by hand if you want, just make sure to keep the height and width ratios the same otherwise you will end up with images looking like this:

Way #2: Make it Actually Smaller

This way will change the actual image to be the exact size you want. You'll have to use another program to do this, but it's not that difficult. It takes a bit extra work, but the end results are best for your readers. They don't download any extra bits and the images appear exactly how you want them.

I don't know what image editor you use, so I'm going to use one that's online and free. It's called Picnik. The first step is to go to their site and choose to "Get Started Now".

Once you're in, choose to "Upload a Photo". Then find the file on your computer and upload it. You will see your image on the screen.

There are several things you can do with your image. The one we want is Resize. Click it. Then enter the width or height you want. No matter which value you changed, the other one will be automatically changed to keep the proportions the same. Once you have the right size, click Apply.

Quick Tip:
For most blog sidebars you'll want a width around 150 pixels. For images in your main articles, you'll want to keep it less than 600 pixels. For your blog header, try something around 800 pixels. We'll get into this in more detail below.

To Border or Not To Border

Small detour, here. I hope you don't mind.

While we're in Picnik you should think about putting a border around your image. Some images will fade away when put on dark or light backgrounds. Sometimes this is what you want (like for our example image). Sometimes this is NOT what you want (like with your book cover or blog award). I can't count the number of times I've seen a mostly-white book cover sitting in a blog post on a white background and it's hard to see. This can be solved by putting a simple border around your image.

In Picnik click on Frames. You can find it in the menu near the top of the page. The frame I suggest is simply called "Border".

Play around with different thicknesses. I suggest using an Inner Thickness of 0 and the Outer Thickness of 1. You can also experiment with colors. I suggest either black or white. Remember, subtle is your friend here. You want the border to give a frame for YOUR image not to draw attention to itself.

If you're a graphic artist, feel free to ignore my advice and use the thickness and colors that best accentuate the overall affect of the image in the intended setting. Then again, if you're a graphic artist you don't need to learn any of this. For the rest of you, think simple and subtle--thin border, black or white.

Then click Apply.

Back to Way #2: We're Almost Done

Now that our image is sized correctly and may have a border, we're ready to save it. Choose "Save & Share" in the tabs across the top. Type in a name for your file. Then click on "Save Photo", and wait for it to download to your computer.

Here's the final file re-sized to 170 pixels wide. Which should be the right size for Canda's Blog.

Test It Out

Load the new image to your blog like you usually do. If it's still not the right size you may need to try again, but that's what learning is about. Once you go through this a few times, you'll be a pro and will shrink an image and get it on your blog in no time.

What Size Do I Need?

This question doesn't have an easy answer. For some shoot-from-the-hip sizes check out the Quick Tips section above.

Often there are other images on your blog that are the right size. If so, you can find out their size and copy them. Here's how to do it in the different browsers. (I apologize, I don't own a Mac so these instructions are Windows-centric.)

Chrome: Right-click on the image, select "Inspect element". In the bottom-right-hand pane find the "Metrics" section. The size of your image will be listed in the box as "Width x Height".
Firefox: Right-click on the image, select "Inspect element". In the bottom-right-hand pane choose the tab for "Layout". The size of your image will be listed in the box as "Width x Height".
Internet Explorer: Right-click on the image, select "Properties". The dimensions are listed in the window that pops up as "Width x Height".

Let me know if these instructions are helpful. I'm still trying to find a good voice and length for these articles. Do you think this one is too long? Or too short? Let me know. What other technical topics would you like to learn about?

* The BlogMouse image was used on Canda's blog. I found it in hundreds of places across the internet. If you own the copyright and want me to take this down just let me know.