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.

Technical Tuesdays?

I'm thinking of starting a thing on my blog called Technical Tuesday. But I'm not sure if I should make it a thing or not, so I'm just going to try it out for a while.

What is Technical Tuesday? I'm glad you asked.

Technical Tuesday is when I answer writing technology questions. Want to add gadgets to your Blogger blog? Learn how the Document Map in Word can quickly jump between chapters? How about creating a theme for your Twitter page? Or even setting up a Facebook author page? That's what Technical Tuesdays are about.

I'm excited to try this because it combines two things I love: technology and writing. I've been programming websites and software for over 12 years, so I understand technology (and the stuff I don't understand I can learn quickly). On top of that, I've worked as a technical writer, but don't worry I'll try to keep things from getting to dry. Lastly, I love to write stories and blogs and my own journal and emails. So, with my feet firmly planted on both sides of the Writer Geek fence, I'm going to bring you Technical Tuesday.

Now's your chance. Leave a comment with your technical question(s) and I'll pick one for next week.

* Just looking at the typewriter photo made my fingers ache. Photographer: mikeymckay.

Balance

Is balance a myth?

When I hear about finding balance in life, this is what I picture:

Isn't that amazing! That's just what I imagine. All the disparate pieces of life moving in different directions, stacked precariously, then magically . . . balance. Everything just works.

If only I could find that perfect spot.

But what I've found is more like this (just the first 25 seconds):

Still amazing and almost magical, but there is one important difference. His body is always in motion. He is making thousands of small almost imperceptible adjustments.

That is more like my life. Things move. Change. I find myself out of balance and I have to make adjustments. Sometimes I'm leaning all the way to one side and have to throw my leg out in the other direction just to keep everything from crashing down.

I guess what I'm saying is that balance isn't a destination. It's an active state that requires strength and maintenance. But in those fleeting times when you achieve it . . . well, I'll let you know how that feels when I experience it.

Review: Key of Kilenya

Action figures are cool. When I was younger I loved playing with G.I. Joe, He-Man, Transformers, and even green army men. With them I imagined all sorts of stories.

Sometimes I imagined what it would be like to be a few inches tall. My room would be huge! Climbing onto the bed would be like scaling a cliff, and getting off my desk would be dangerous indeed.

I was reminded of this dream when I read the Key of Kilenya by Andrea Pearson. I want more "small" scenes in the next book.

Review: Key of Kilenya


The story starts with a pair of wolves and ends with hideous monsters. It has sentient clouds, creatures in caves, evil forests, and shrinking. This is a fun book for teenage readers who like fantasy.

Fourteen-year-old Jacob overcomes many challenges as he travels through a strange and varied world. After a while the chapters started to feel episodic, and sometimes the story got lost. But, over all, there's enough going on to keep things interesting and it left me with many questions about the next book.

You don't have to take my word for it. You can listen to the author herself. Check out her video introducing the book. You can also buy the ebook or paperback or even pick up a signed copy.

Premeditated by Ryan Hunter (Book Review)

Twitter is like a big cocktail party--groups of people in conversations. You can join or just listen in. It's also a great way to meet people with similar interests. That's how I met Ryan Hunter and discovered her book.

I followed the link in her Twitter profile and read the first page of Premeditated. It's short (less than 300 words). It's creepy and disturbing. About a teenage girl who may be a psychopath and is going to escape from prison. It left me with many questions. In short, I wanted to read it.

Premeditated by Ryan Hunter

Website: http://authorryanhunter.blogspot.com/
Twitter: @RyanHunter45
Buy on Nook or Kindle.

Premeditated is part murder mystery, part The Fugitive, and part Grand Theft Auto. The action kept me reading and the clues kept me guessing. It was a wild ride.

I liked the Southern Louisiana setting. I haven't read many books set around New Orleans and I felt this book did a good job of transporting me there without detracting from the story.

As with every debut novel, this one has its weaknesses, too. There were a few times I was pulled out of the story by a confusing detail. And, seriously? How many times can a pair of teenagers escape trained police? Still, the story strengths outweigh its weaknesses.

If you are looking for an action-packed YA adventure with interesting twists, mysterious murders, and teenagers on the run then pick up Premeditated by Ryan Hunter. Just be sure to buckle your seat belt.

* The book cover is copyright Ryan Hunter.

Cooking Up a Good Story

I bet you didn't know I was a gourmet chef on the side, did you? Aaaand that's because I'm not. But that doesn't stop me from trying a new ice cream flavor or experimenting with a new recipe. I enjoy the science and art of it all. Good cooking brings double-blessings--you get to eat tasty food, and you get to watch friends and family enjoy themselves.

When I tell people I like to cook, I'm rarely asked "Are you going to be a chef someday?" Maybe I'm just not that good. Still, that's not the point. (Wait for it, the point is coming in the next paragraph.)

I bet you knew I'm a writer. I like to write YA Fantasy novels. I'm trying my hand at shorter stories, but I tend to end up writing the longer form. I enjoy creating places populated with interesting characters who get put through the ringer and topping it off with a dash of magic.

When I share this with others I'm almost always asked, "Do you want to be an author?" If the person asking isn't a writer, it's an easy answer, "I enjoy writing, and I'm working on being published." If the person is a writer, the answer is much harder.

See, I view writing much the same way I view cooking. It's my hobby. And just like cooking, one of my creations can't reach its full potential until someone else enjoys it. This means I'm working to publish my stories. Which, technically, makes me an author, but the title Author has a lot more to it. Just like the title Chef.

My goals are simple: I will write stories to the best of my ability. I will work with other professionals (writers, artists, marketers, editors, etc) to make my works high-quality. I will share my works so others can enjoy them or not. Then I will take all that I've learned and repeat. I don't dream of being a full-time author. In fact, I don't know if I would enjoy it as much if there were external deadlines and pressure.

Here's my question to you, gentle reader. If that last paragraph were about cooking I'd get all nods and smiles, but since it's about writing . . . why do I feel my writer friends look at me like I have three heads?  I know many writers dream of making it big and living off their writing. I think that's a respectable goal. I also think that in today's age of ePublishing there is room for the hobby novelist as well.

What do you think?

* BBQ Chicken "Wings" picture is was taken by me at my dinner table before they all disappeared. See? I can cook.

The Tortoise, the Hare, and a Fish

In high school I thought I was busy,
then I went to college.
In college I thought I was busy,
then I got married.
As a husband I thought I was busy,
then we had children.
And now, years later, after our last child moved out leaving my wife and me alone,
I realized something.
When the children were home I thought I was busy,
and I really was busy then.

Keith Newman

I love the story of the Tortoise and the Hare. You have the naturally gifted, full of himself, over-confident Hare racing the diligent, plodding, focused Tortoise.

I've often wondered why the Tortoise gets all the attention. Perhaps it's because we like winners? Or because we, as a culture, cheer for the underdog and relish when the big, bad, tough-guy gets his due.

I think the Hare deserves some attention too, because if he learned his lesson he'd win the next race, and the next, and the next. It's not that the Hare wasn't used to running. He ran all the time--blazing fast. The Hare wasn't used to the distance, and he didn't know how to ignore distractions.

If we look at ourselves closely, I think we're the Hare. I'd be willing to bet that there's something you are passionate about. You were drawn to this because you have it in you to run fast.

Going slow won't win the race. The key is to keep going. Sure, that may mean slowing your pace, but it also means you'll have to push yourself to do things you've never done before. If you're motivated to do something, do it as fast and as good as you can.

I'm reminded of another story animal--a fish who was "built for speed". She was sleek and fast and gave great and memorable advice, "Just keep swimming. Just keep swimming. Just keep swimming, swimming, swimming. What do we do? We swim, swim." (Now, you're gonna have that song stuck in your head all day.)

* Tortoise and Hare picture is in the public domain. I found it through wikipedia.