Adding Images To Your WebSite • New Tricks
 In Blogging, Graphic Design

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 an 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?

 

Recent Posts

Leave a Comment

200px-Free_culture_cover.png