Sunday Tech Talk with Elizabeth Ann West: Working With Images

coffee

Dump half, add milk for me please. 300 x 263 pixels left aligned wrap

Good morning! I’ve got my latte in hand, very generous on the milk part. You see, coffee and I have a tenuous relationship. I can drink only small amounts in a twenty-four period or my body rebels in a rather painful way. So, my mug is up to those of you who can handle a full cup, maybe one day I will be part of that club.

Speaking of joining clubs, if you missed last week’s column about links, what’s in them, how they work, please go visit that first before reading below. Trust me, you’ll thank me later. Then without further adieu, and our smiles and joy firmly in place, let’s learn about images, where to get them, how to control them, and how to make them.

Before we begin, let’s talk about photo albums. Images on websites or blog work in a very similar fashion.

First, you have to take the picture and get it printed. In this post, we talk about where you get pictures.

Second, you organize them into a physical photo album. For the Internet, this is uploading the picture into a folder on a server somewhere (server is just a fancy term for the physical storage space on a massive computing network that a hyperlink points to). We talk about uploading and also “borrowing” photos from other photo albums, or servers.

Finally, you drag your guests to sit down in your living room and thumb through your pictures, and talk about them! For the web, you do this when you insert a photo into a blog post and write around them!

So you have to get the photos, put them on a server (photo album), then use them in posts (“Here, sit on my couch and hear all about my vacation.”) Easy.

A Picture’s Worth A Thousand…. Look, They Make My Blog Posts More Interesting!

abstract sail boatPretty. 510 x 509 pixels center aligned

Those of us who can remember the really, really old days of the Internet (yep, I can) know that at the very beginning, it was text based. There just wasn’t the bandwidth to handle the larger file sizes of images, and as a result, few sites used them. Of course, there were also few sites at the time, but hang with me. One of the ways developers catered to those of us with a 14.4 KBps modem was with alternate text.

This tag or attribute (refer to the link post) still exists today, but we mostly ignore it. If you’ve ever uploaded an image to your blog there is a box asking for “Alternate Text.” This text is what appears if the picture cannot load for some reason.

But we’re getting ahead of ourselves. There are three main types of image files, or file formats. Jpg (.jpg pronounced jay-peg) is one of the most universal formats out there. It’s a file format that lets a user determine how compressed the data should be, resulting in either a highly-compressed, really crappy pixelated image, or a less-compressed, digital masterpiece.

Elizabeth Ann West

Less compressed, higher resolution. 200 x 200

Elizabeth Ann West

More compressed lower resolution, 200 x 200

By opening up an image in a photo editor (I use GIMP, because it’s free), you can change the scaling or compression rate once you save it as a .jpg to reduce the file size. This is very handy for profiles on forums and other sites. For example, Amazon’s Author Central requires author photo files to be no larger than 800 KB. My author photos were professionally taken, so the file sizes were quite large, 4 MB or 6 MB per picture (1,000 KB = 1 MB). I scaled them down (Image, Scale Image) and then when I saved them, I put the .jpg compression at about 85%.

Book Writing

Thank goodness we don't still write books by quill, nor need to use .gif for our book trailers! 112 x 105


There are many more differences in these file types, but most of it is information that won’t really appeal to you as an end user of the file. You just care about the picture showing up when and where you want it to, right?Another file format is .gif.

GIF was one of the first two types of image formats on the web. Another claim to fame is animation long before people embedded YouTube videos (that’s next week). From .gif came .png (you say Jay-peg, and Gif like the peanut butter, but not ping. It’s the letters, pee-nnnn-gee). A .png file can handle transparency, very handy for logos or images you are moving to another image and want to blend in, like say a book cover. 🙂

So I Searched Google for “Rose” Found One I Liked, Right-Clicked and Saved It. I’m Good, Right?

No. You’re very far from good.

As masculine and feminine I could make a rose

I know girly, but it has a bug in it at least. 150 x 100

Images, even those on the Internet are subject to copyright law just like the books and even blog posts we write. You need permission to use them. If you are looking for images to include in any type of commercial, professional work, like an author website, blog, advertisement, or cover art, you need to make sure you have a license to use the content. Take the time to read the fine print. Some royalty-free sites don’t allow you to alter an image, so it’s very important you understand what is permitted. It would be like someone asking to use your work, adding or removing a few words and completely changing your intent.

There are many websites out there with royalty-free images (we all know what royalties are, royalty-free means you pay a flat fee for the image’s use, sometimes expiring after a large number of distributions). I use Dreamstime.com because of its easy to use free database of images, and its relatively inexpensive prices if I need to buy an image. In fact, just about every image I use on my author blog (eawestwriting.blogspot.com) is from Dreamstime.

Uploading images into most blogs is accomplished with a GUI (Graphical user interface). Buttons you click on. But let’s take a look at what’s really happening, under the hood….

Cruise ship

Image used on my blog for Blog Cruise, using the URL to reference not an upload. Also clicks to that posting.


Images are files. They do not magically exist in a post when you upload them, but as their own file somewhere on the server. Blogger makes it very difficult to understand this, and it mostly looks like jibberish. For example, the cruise ship I’m using to promote the Blog Cruise I am putting together for March 2012 has this link:

http://4.bp.blogspot.com/-ogQD4TzhNyk/TuFWbB61O-/AAAAAAAAAU8/p6FPUPm8WSk/s1600/dreamstimefree_1949431.jpg

YUCK! Now we learned last week all of that information in between the / marks are actual folders on the server where my free Blogger blog is kept. The only thing I could control is the name of the file, and I like to keep it the original Dreamstime file name so other people can go back to the source. If I had renamed it cruise ship.jpg, no one would know it’s a Dreamstime photo.

If you’re working with WordPress, or another blogging interface, you might have more control over where and how files are organized.

For example, the image of my book in 3D (a generous gift from my awesome cover artist, Melissa Oyler) is http://eawestwriting.com/wp-content/uploads/2011/09/Cancelled-soft-cover.jpg. That is understandable, and if I really wanted to, I could go into my WordPress files and change even how that link is developed. Why would I want to do that? Well, search engine optimization. If I wanted to be coy, I could upload the images of my book to a “bestseller” folder. Hmmm…maybe not a bad idea 🙂

Making Images Behave

Cancelled 3D

Gift from my cover artist, Melissa Oyler.

Whether you use the GUI uploading (and I do) it is many times helpful to change the source code to make an image behave. I learned my know-how by making changes to settings in the GUI (the easy to use uploading interface where you can set things like padding, borders, etc.) and then looking at the source code to see what changed.

Images are built on links in HTML. They start with the same <a tag. On my reader site, I have a recent posting about developing an audio book. The code for the image I use is this:

<a href=”http://eawestwriting.com/wp-content/uploads/2011/12/dreamstimefree_2361569.jpg”><img class=”alignleft size-medium wp-image-247″ title=”Old headphones” src=”http://eawestwriting.com/wp-content/uploads/2011/12/dreamstimefree_2361569-200×300.jpg&#8221; alt=”” width=”200″ height=”300″ />

You’ll notice that the first thing it starts with is a LINK! Now, this is NOT the link

Headphones

This is the headphones image I used on my audio book post. 140 x 210

where the picture is housed, but where the user goes if she clicks on the picture. Wheels turning yet?

You ABSOLUTELY can make images GO places. Like a page to go buy your book. All you have to do is make the first link where you want the image to point to. The next bit, <img tells the computer to specifically call up an image, how to format it, and where to get it. Notice my alt=”” is empty, shame on me. I should have put headphones or something there.

Src= is where the image physically exists on some server. This can be any image on ANY server. Now, a word of caution. When you link to an image somewhere other than your web server (or the free server you use for your blog or site) you are taxing the other server’s bandwidth. If your site gets a small to moderate amount of traffic, this isn’t too big of an issue. However, if you had an image linked to a site and your post went viral, the traffic on your site could cause problems on the other site because each and every time your page or post loads, it’s asking for bandwidth from the site hosting the image. Plus, what happens if they take the image down?

Link to the UK Amazon purchase page for "A Thousand Glass Flowers"

Button, Button, Who Has the Button?

Where it is 100% okay to link to an image on another site is when you are trading buttons. As soon as MwiDP moves to its new virtual home (I’m building it as we speak, it’s awesome) I will have buttons available of the regular columns here and for the MWiDP authors. Buttons are mostly used to advertise cooperative sales, blog hops, friends, and awards. The ONLY difference in a button’s code versus a normal image is the img src tag and sometimes, where the image points to (the first website URL in the code). You will see sites that say “Grab the code” and it will look something like the code above, except with the URL and image source of the button.

But I pasted that code into my site and it didn’t work!

I get this question frequently on Twitter and via email. If you are placing a button on the side of your site or blog, you will usually use a widget that allows HTML. Sometimes this is called a text widget. Either way, it needs to accept HTML. If you are placing a button into a post, you will need to click on the tab HTML and paste it at the appropriate spot. Once the image is inside your post, you can usually highlight it and use your GUI icons for centering etc. and it will modify the code automagically.

The Image Strikes Back!

Ever upload an image and IT’S HUGE!!!!! Happens to everyone. You have a few options. I didn’t touch on the last bit of the code above about the headphones image. Where it says Height=”300″ and Width=”200″ that is controlling the size of the image. In pixels.

What the heck are pixels? How big is one? Well, I can say a pixel is not a native measurement most of us think in. I don’t. And even then, how big a pixel even is depends on your screen resolution. I run a teeny-tiny Toshiba netbook with Ubuntu. My screen size is only about 10”. Pixels are itty-bitty for me. If you have a nice desktop with a large flat screen monitor, your pixel is bigger than my pixel.

What you need to do is figure out what different sized images look like on YOUR computer screen. This will help you in planning your blog posts and web pages for the best visual impact. You don’t want an image to overwhelm your text. To help in this exercise, I added the pixel lengths of each image I used in this post.

You can change the pixel size in the HTML code or GUI interface of your website or blog, OR you can edit the photo down to the size in a photo editor. By scaling the image down before you upload it, you cut down on uploading times and the storage space you use up on your server. Both good things. It just take a little pre-planning.

Today we nicked the surface on images. You have the basics to go find images, upload them, or hand code the HTML if you so choose. I highly recommend you at least TRY hand coding one image this week. It might be a little frustrating, but I promise once you hand code one thing, it feels amazing. And it will go a long way in your confidence to be the master of the technology around you, not letting it master you.  Gold star buttons for everyone who comments that they tried this homework assignment! 🙂

Come back next week and we’re going to expand on images, iframes, and some other neat gizmos and gadgets in HTML. I’ll be here in the comments, and as always available by email at eawestwrites on Google’s free email.

Shameless Plug

Yes, it's a USB plug, geeky and funny 🙂 150 x 100


Shameless Plug: I am now formatting ebooks for other authors. I am pleased to announce that my “techie” skills landed me a role in formatting MwiDP’s ebooks into epub and mobi as needed. I am very reasonable in my rates because it’s something I genuinely enjoy doing. If you are having trouble with a file, please let me know and I might be able to help. For more information, you can visit http://eawestwriting.com/for-authors I DO have space and time to help you get a file up in time for Christmas.

Just so you know, even we geeky types are NOT immune to frustration. This post, RIIIIdIcUlOuS in the number of pictures was an absolute beast of a mother to work on. Seriously. I had it all nice and pretty, then made a change, and everything went to hell. Took me about another hour-hour and a half to fix it. This is also Mark’s blog’s 100th post. That is a very special milestone, and I’m honored to be a part of it. But man, this post was more than a bit of a drama queen! 

Advertisements
  1. You lost me at coffee, Elizabeth, which I too, am unable to drink! And losing me is not at all your fault!

    Even though you used my cover to show an active link, (and thank you for that) I have to say I am your worst nightmare, the ultimate dipped-in-cement, unable-to-be chipped-away-at Luddite.

    That said, I welcome your knowledge, your offers of availability and thank you so much for trying to explain to people like me.

    And Mark, congrats on 100!!!!!

    • That was my greatest fear, I would wake up this morning and have missed the mark in explaining images so everyone can understand. I tweaked the intro a bit to try to help.

      And I’m happy to use your book! Every Sunday will get pretty boring if it’s just all about my book, and I remember your cover reminding me of a button. 🙂

      BTW did you read last week’s column about links? I didn’t repeat any of the information I mentioned there to save space. 🙂 And don’t discount yourself, it takes time when you’re learning new things to get the hang of it. At least you’re getting exposure and maybe the next time or two you read more about images, you’ll be a master in no time! 🙂

      • Three years ago, I didn’t have a blog, nor any idea that I might manage one, let alone e-publishing titles on my own!
        So whilst I’m still a snail, I am making progress. Even managed a massive blog event (vast learning curve) in first 3 months of blog. But the fine tech detail is the hard part… so I take heart from your words:

        “…it takes time when you’re learning new things to get the hang of it. At least you’re getting exposure and maybe the next time or two you read more about images, you’ll be a master in no time…”

        • That’s EXACTLY how it works. Did you know two nights ago I just up and downloaded sound recording equipment and tried my hand at making an audio book? Yep. Didn’t have a CLUE what I was doing. But I somehow managed, grasping totally in the dark, to figure out how to use Noise Remover effect to take out background noise! Just by tinkering. (I also managed at one point to delete the entire 5 minute recording, make me sound like a chipmunk and couldn’t undo it, and couldn’t get it to undue some whirling sound I added in before I figured that out).

          As soon as I reached my frustration/tired point, I quit. And I will try recording some more later this week. And that’s when I’ll tinker again and try out a few more things and buttons, just to see what they do. I really am like a child… I do my very best to break stuff and then fix it so later when it happens I don’t lose valuable data and work. 🙂

    • Prue, join the club! Being lost, that is. A decent coffee is one of the few things I miss here. 🙂

      As a non-fiction geek I loved reading this, just as I’ve love reading any number of how-to books on IT over the years. I also read every other area of non-fiction. Anything except sports!

      But whereas a treatise on astrophysics, Conficianism or the foreign policy of the Holy Roman Empire has me salivating for more, reading anything about IT is a bit like reading a Polish telephone directory – equaly unpronounceable, and meaningless to me.

      Loved reading it, EA, but sooooo glad that’s all I have to do!

    • Lee
    • December 12th, 2011

    Elizabeth, this is great information. Sometimes pictures can be very tricky, and the images chalky for reason beyond my understanding. I’m a amateur photographer and this information will really help…

    • Lee, is it chalky like the difference in my photograph? Those were taken by a friend of mine who does professional photography in SC (I miss her!). She photographs births, which I think is so cool. Anyway, she has all of the coolest equipment imaginable, and some of the photos came out looking more like that second picture instead of the first picture. Out of 150+ shots, we only kept maybe 15 (most of that was my modeling ability, it’s really hard to remember SMIZE, suck in the Mommy gut, hide the boobs, chin down, smile, don’t show teeth, don’t look directly at camera every singe take)….Many of those cameras are “too smart” for their own good. They automagically adjust for what settings they perceive, which might be the result of a cloud passing overhead etc. Fractions of a second, the processor in digital cameras make their decisions. I know she had to pause and overrule its bossy pants many times…

      Some photographs can be salvaged with good photo editing equipment, either to sharpen, reduce noise etc. A good graphic artist of photographer can let you know. Oh, and just for the record, she was pissed off she didn’t have to do anything to enhance my eyes. 🙂 They really are that blue (and I have the pale and pasty complexion to go along with it, never tan, always burn).

      That’s really neat that you are a photographer. I stick with my point-and-shoot, but my hubby had a 35mm SLR for awhile. He was into it for about 6 months before the costs of developing film really dawned on him… LOL.

    • Thanks for stopping by, Lee.

      You’re right that these posts are good for photographers too. I’m building up a collection of photos for a separate blog about life here in West Africa, but I suspect i’ll end up emailing Elizabeth all my problem pics….

  2. I have that coffee thing too. It came with age. When I was young and working on the wicked stage, I lived on coffee and cigarettes and I was never sick. Now I take care of myself and a capuccino can make me sick for two days. Sigh. I’m going to bookmark this. It’s too much information for my old brain to take in all at once, but it makes sense and I will learn. Right now I avoid all images on my blog except book covers and photos my friends have taken for me. But one day, i will have to take the plunge. And I will know where to turn. Thanks, Elizabeth!

    • I can try to make my posts shorter, covering less information at once. I’m only doing this to help you all. You are my audience 🙂 I want to make things easier for everyone.

      I developed more an inability to process caffeine at about 15. I can now handle 1 6 ounce beverage of coffee or soda, tea doesn’t seem to bother me (unless it’s cup after cup of very strong black tea). But for the most part, I run decaffeinated. 🙂 I shudder to think how bouncing off the walls I’d really be if I could stomach and entire pot like my husband’s submariner’s stomach can. 🙂

    • I’m sure my word count plummets when I don’t have lattes on tap, Anne. Not that it’s the caffeine. I love decaff just as much.

  3. OMG! If Mark and I couldn’t drink coffee the world would be a MUCH worse place! 😉

    Another great post Elizabeth and we are THRILLED to have you on board!

  4. Okay I sahll have Miriam confirm this, but I promise to try out that homework on my very next blog post. *grin*

    I need to get a notebook section decicated to this techy stuff so I can reference it when working ‘off-line’.

    As to the coffeee delima. I can’t stand the tase of the stuff straight and drinkit highly sugared and milked (as my hubby says, “Have a little coffee with your milk?”). Caffine on the other hand, doens’t seem to affect me. I can drink one cup of highly caffinated something befroe bed and go to sleep.

    Now if only I could find a way to drink sleep, that might help. :}

    • Miriam Joy
    • December 12th, 2011

    Oh, good, everyone else has problems with formatting too, not just me! It’s so annoying. I had this one post that was a nightmare at the time and spent ages resizing them. Then I changed the theme on my blog and now none of it fits any more… *cries*

    Oh well. I’ll get there in the end.

    Ha ha, I try and use images, but usually I forget or I’m writing on a school computer and don’t have them all saved in my folder. I take a lot of photos so I have a lot just hanging around that I use for cover art and the like, and I love my camera. If I publish some time and use a photographic cover, I’ll have taken the pictures. Which reminds me, I have a model for my male MC but I need one for the female…. *thinks*

  5. Hi there everyone, it’s my first pay a visit at this website, and post is genuinely fruitful for me, keep up posting these types of articles or reviews.

  6. It’s remarkable to pay a visit this site and reading the views of all mates on the topic of this paragraph, while I am also keen of getting know-how.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: