Working with Images

One of the biggest problems non-graphic artists have when learning to maintain their websites is the whole issue of working with their images. Web 2.0 sites really rock with photos and images to demonstrate a topic or can be used in a long blog post to break up text into manageable sized chunks.

Image File Types and Purpose

It helps to know a bit about file types. If you don’t know your JPEGs from your GIFs image formats, this is for you. First, lets talk about file compression.

There are basically two ways of saving images, lossy or lossless (no, I didn’t make those up). If an image is saved in a lossy image format, it means the format being used discards some of the “unimportant” image information. However, the resulting image file is smaller. Lossless retains ALL the image information. OK, now that you know that, here’s a overview of the most common image formats.

1. JPEG – By far one of the most common image formats. It’s primarily used for photographs. It is a lossy type of format, but most people can’t really see the difference. You can adjust the amount of compression when saving a jpeg image, so you do have some control over the final output quality. JPEGs are extremely popular since they compress into a small file size and retain excellent image quality.Keep in mind that the more you compress a JPEG, the more “pixel” it will tend to look. For the best results, save your JPEGs at the “medium” or “High” setting (your imaging software should bring up this option when you go to save as a JPEG). I really can’t see any image degradation in most pictures saved at the medium settings.
2. GIF – Another popular format, especially on the web. It’s a loss-less format that’s ideal for graphics. GIFs can be either static or animated. If you’ve ever seen a graphic on a web page that was animated, you’ve seen one of these animated gifs. Hit your Refresh button and check out the WorldStart logo at the top to see an animated GIF (it only runs the animation once). Most of the time GIFs are used for non-photographic type images. Buttons, borders, stuff like that.
3. BMP- This is the standard Windows image format. It’s loss-less and works well for pictures or graphics. It’s an uncompressed file format, so it takes up lots of disk space. It’s also the standard format for Windows wallpaper.
4. PNG (Portable Network Graphic) is a loss-less image format, properly pronounced “ping”. It was designed to replace the older and simpler GIF format. Like GIF you can make transparent images for buttons and icons, but it does not support animation. A PNG file can generally end up being twice the size of a JPG and three times larger than a GIF and some browsers, such as older versions of Internet Explorer and Netscape, incorrectly render them. I don’t see it taking over any time soon.
5. TIFF- It’s a loss-less format that can use file compression (called LZW compression). It won’t result in as small a file as a jpeg (which is why it’s not used on the web), but you do retain all image quality. When compressed, the file is usually about half the size of the original file.

Image Size

Right out of our 8- 10 megapixel cameras these days, our photos are huge. The photos that you download from your little bitty memory chip are high resolution ( 300 dpi) and maybe something like 2500 pixels or more. Often we are in a hurry to upload a photo to our site so we grab it and upload/insert it. WordPress will actually take it that size if your web hosting company doesn’t limit the size of an upload. But that is really a problem that will start to bloat your site, among other problems.

What is needed here is a handy dandy method to batch resize the photos in a folder on your computer. I have found a great little free program that will do it for you in an instant. It will take all of your photos and create a smaller version ( I choose 400 pixels) and then it will place the smaller version right next to the original sized photo in your folder that it was in. To get this free program go to this site and download it.

The awesome Batch Picture Resize in action shown in the screenshot on the left.

The size of resized images that are output is controlled by the name of the application. To rename the application, click on the icon to select it and do one of these things: press F2 key, click in the text under the icon, or right-click the icon and select Rename command in the menu.

I renamed my program to PhotoResize400.exe.

How to use it?

• Download PhotoResize400.exe and place it on your desktop.
• Open Windows Explorer to your photo files.
• Select the photo or the entire file that you would like the photos re-sized and drag and drop JPG files or folders with JPG files on to the the application icon on your desktop.
• The tool will re-size JPG images and save them next to the originals. Names of the new pictures will be based on the original names, with a suffix indicating their size. For example, the re-sized version of MyPhoto.jpg will be called MyPhoto-400.jpg, where the number 400 indicates the size of the picture.

For a Mac Users

Try this re-sizer program from K Studios. I haven’t tried it since I don’t have a Mac but several people have assured me it works great.

Cool Downloading Gadget

This falls in the category of a very cool new trick. Sometimes something comes along that truly makes one’s life easier. I know there are always new technologies coming down the pike but how many times do you get something and you can barely understand or ever use a tenth of it? So now I am here to share with you what might be one of your most used devices of the year. Introducing Eye-Fi. This is a little orange 4 gig memory card that goes into your camera to replace your old one and then it is magic. You go stand within ten feet of your computer and depending on which level you get it will 1) upload all of the photos on it to your computer, or 2) your computer and a website (like Flickr) or 3) your photos and movies to your computer and a website. Now how is that for a dream answered?

“About” Pages

Smashing Magazine has a great post on “About Pages”. It may not be relevant for some sites but I liked the concept that you can have some fun with these pages. And since people do business with those that they Know Like and Trust, it is worth putting some thought into yours.

Many of you have lots of photos in your computer files and find that they are too large to quickly upload to your website. The first thing you can do to help with the problem is to adjust the settings of your camera. Most cameras these days can take pictures that are Ginormous. Unless you are a professional or want to use photos for large prints you can adjust your cameras to a smaller resolution. But if you want to keep your pixels huge then I have another fast  solution.

Download the free program Picture Resizer. It is an easy way to re-size your jpgs.

How to use it?

• Download PhotoResize400.exe and place it on your desktop.
• Open Windows Explorer to your photo files.
• Select the photo or the entire file that you would like the photos re-sized and drag and drop JPG files or folders with JPG files on to the  the application icon on your desktop.
• The tool will re-size JPG images and save them next to the originals. Names of the new pictures will be based on the original names, with a suffix indicating their size. For example, the re-sized version of MyPhoto.jpg will be called MyPhoto-400.jpg, where the number 400 indicates the size of the picture.

On the program home page there are choices you can make about the way you want the photos re-sized. These choices are changed in your program by renaming the program icon on your desktop. Just go to the desktop and right click and change the name to whichever choice you’d like to make. I used the one that makes the maximum width 400 px and keeps the proportions of the original photo.

Last night, Judi and I presented 5 New Tricks for Social Media to the Lady Rogue Business Network.  Much thanks to Lady Rogue for organizing and Judi and Duane for hosting the event. And thanks to the audience for behaving themselves during the presentation – we were grateful to have no rude hecklers or interrupters in the crowd.  Judi and I will be publishing the slides but first things first.

The event was potluck. Several LRBN members used the eggplant (aka aubergine for you Brits) from this week’s Vegetable Husband basket in their dish. Amy made a great baba ganoush and I made an eggplant gratin.

The Vegetable Husband is LRBN’s very own Margie Thorpe. Margie  and her team deliver fresh-picked, local, organic produce delivered to your door every week.

I promised several people I’d publish the eggplant gratin recipe so here goes.  The recipe makes two servings so I tripled it but then the pan was too small so all of the ingredients didn’t fit -  I have no idea what the actual portions were in the end.

I do believe the fresh ingredients made the dish.

Eggplant Gratin

Adapted from Ina Garten, The Food Network

Ingredients

• Good olive oil, for frying
• 3/4 pound eggplant, unpeeled, sliced 1/2-inch thick – I 4 or 5 med to small eggplants
• 1/4 cup ricotta cheese
• 1 extra-large egg
• 1/4 cup half-and-half
• 1/2 cup plus 2 tablespoons freshly grated Parmesan
• Kosher salt
• Freshly ground black pepper
• 1/2 cup good bottled marinara sauce
• Basil – also from my basket

Directions

Preheat the oven to 400 degrees F.

Heat about 1/8-inch of olive oil in a very large frying pan over medium heat. When the oil is almost smoking, add several slices of eggplant and cook, turning once, until they are evenly browned on both sides and cooked through, about 5 minutes. Be careful, it splatters! Transfer the cooked eggplant slices to paper towels to drain (or, a brown paper bag if you were raised in the South). Add more oil, heat, and add more eggplant until all the slices are cooked.

Meanwhile, in a small bowl, mix together the ricotta, egg, half-and-half, 1/4 cup of the Parmesan, 1/8 teaspoon salt, and 1/8 teaspoon pepper.

In each of 2 individual gratin dishes, place a layer of eggplant slices, then sprinkle with Parmesan, salt and pepper and spoon 1/2 of the marinara sauce. Next, add a second layer of eggplant, more salt and pepper, half the ricotta mixture, and finally 1 tablespoon of grated Parmesan on top.

Place the gratins on a baking sheet and bake for 25 to 30 minutes or until the custard sets and the top is browned.

Serve warm.

Dene thinks not having a favicon on a website is the on-line version of your bra strap hanging out when you’ve gone to the trouble of dressing up and yet you forget to do the small things that matter. Maybe it is more like forgetting to put on your jewelry. But anyway we have noticed that lots of sites don’t have them! We are appalled because it is makes your site look unfinished.

Some of you may not know what a favicon is,  and you may even have one but didn’t know it had a name. A favicon (combo of Favorite and Icon) is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu when your website is called up. It is a good way to brand your site and increase its’ prominence in your visitor’s bookmark menu.

Creating a favicon is fairly straightforward. You select and send us a picture, logo or other graphic (of any size / resolution – but remember it ends up being tiny!). You can also just let us grab one from your site. When you send it give us your website’s hosting information. We can make a fixed favicon or we can also do animated favicons. You can see an example on our site and also on the  Asher PR site. We then upload the image it to your site  through FTP and put a couple of lines of code in your website’s header file.

In order to do that we  will need the name of the web hosting company, your user name and your password. If you don’t feel comfortable doing that you can call your hosting company and have them walk you through adding  New Tricks as a temporary user, which will give us temporary access that you can eliminate later. We charge 100.00 to make and install a static favicon on your site and 125.00 for one that is animated. Such a deal.

Don’t you worry, the chicks at New Tricks will make sure your website’s bra strap is not hanging out.

Images are an important component to a good blog post. They give a reader a first hint of what the article is about and they can set the tone. Using a visual can break up the text in posts that may otherwise feel too long and they just add a bit of polish to a post and to the site.

It’s easier now than ever to find free images for your blog. One of my favorite sources for images is Flickr. Some of the images have a Creative Commons license that allows the sharing of photos, with some restrictions. Dreamstime is another favorite place to go to hunt images. The photos and images are available at very low price especially when you will only need the 72 dpi resolution option since it is for the web.

Here are seven tips on adding images to your blog posts:

1. I like to see blogs use a consistent size and placement of the photos in the posts. When the images are all relatively the same size and in the same place, it looks really nice as you scroll down the page.
2. Be careful not to take images from other sites or to use copyrighted images and read the licensing before using or purchasing any image.
3. Never link to an image on another website with using an external URL. If you do, at some point, the image may not be there any longer and you will have a broken link on your site.
4. Always check the size of the photo and never use a high resolution image. Use an image editor and resize your image to fit your content width. First change the resolution to 72 and then change its size.
5. Put your cursor at the point in the post where you want the image to be and then use the “Add an Image” function in WP to add the image to the WordPress Media Library. That will let you set various image attributes and also have the image available for use in other posts.
6. When you select an image, add a title since that is great for SEO. Select “None” for Link URL because in most cases you don’t need links on images.
7. Align the image Left or Right which will allow the text to wrap, especially if it’s a portrait (vertical) rather than landscape (horizontal) image, and select Full size if you resized the photo to the right dimensions beforehand. Sometimes, when you choose the image alignment, your image may not float the image left or right, and just adds some CSS classes to your image, based on your option. Themes usually have the right styles defined and things should work out of the box. But in case it doesn’t and you choose alignment and the images are not aligned, you can open style.css in Design Theme Editor and add the following lines somewhere> This should take care of the problem.

img.alignleft { float: left; margin: 0 25px 15px 0; }
img.alignright { float: right; margin: 0 0 15px 25px; }

Gmail is a great app but there are a few quirky things about it here and there. One of the quirks is that gmail doesn’t easily support adding a graphic image to your email signature line.

Adding a text only signature is easy. Just follow these instructions: Adding a Text Signature to gmail

But everyone knows that a picture is worth a thousand words. That’s why I was determined to add a graphic to my signature image.  Enter Blank Canvas to the rescue. Blank Canvas has a Firefox extension that makes it super duper easy to add graphics to your gmail signature line.

Here’s how:

• Install the Blank Canvas add on
• Follow the prompt to restart Firefox
• From Gmail, compose an email
• Select the new button,‘Create Signature’ which now appears beside the ‘From:’ field

• At this point, you’ll need an html editor.  Since I use WordPress, I simply created a dummy post in WordPress, then copied the html code from WordPress into gmail. You can also use an online html editor like Red Peach Designs or Real Graphics to generate your html.
• Paste the html into the ‘Signature Html Code:’ block

• Save

There is a slight problem that may drive you crazy because you may think it is not working. If multiple tabs are open, the signature will not be automatically inserted until you switch to another tab and back to Gmail. And at first I did not think Blank Canvas was working because I did not get the icons to the right of the from button. But I went out and back in and there they were.
‘Voilà – you’ve learned a New Trick

This falls in the category of a very cool new trick. Sometimes something comes along that truly makes one’s life easier. I know there are always new technologies coming down the pike but how many times do you get something and you can barely understand or ever use a tenth of it? So now I am here to share with you what might be one of your most used devices of the year. Introducing Eye-Fi. This is a little orange 4 gig memory card that goes into your camera to replace your old one and then it is magic. You go stand within ten feet of your computer and depending on which level you get it will 1) upload all of the photos on it to your computer, or 2) your computer and a website (like Flickr) or 3) your photos and movies to your computer and a website. Now how is that for a dream answered?