Monday 18 December, 2017

Adding Images to Your Website

People love images. It brings plain text to life. But adding images to a site without first optimizing can bring your site to a screeching halt.

There is no arguing that photos add interest to your website and, when used appropriately, support your writing.

However, there are right ways to add photos to your website and wrong ways. For instance, downloading digital photos from your camera and immediately uploading them to your website is almost always the wrong way.

Photos that are taken with a digital camera are generally high quality which equals large file size. Large file size equals slow download.

High Quality = Slow Download = Bye Bye Visitor

You want your pages to load quickly. Internet surfers are notoriously impatient. Take too long loading your page, and they will click to another page, or worse, out of your site altogether. The dreaded "Exit Click".

How to Add Photos the Right Way

You must "optimize" your photos. What this means is shrink the file size and the display size of your image.

Pier over water

GIFs and JPGs are best suited to the web. This is the extension at the end of your filename. For instance, logo.jpg. You don't want to be uploading low quality BMPs to your website. Stick to GIFs and JPGs only. You'll need a software program to compress your images for the web. At the same time you may want to crop your photo and you'll definitely want to decrease its display size.

I use Macromedia/Adobe Fireworks. It's easy to use and does a great job. Others use Adobe Photoshop or Microsoft's Digital Image Pro. There are also free or lower cost alternatives available on the internet if you run a search. Macromedia/Adobe will give you free trials of their products so you can try before you buy. Google Picasa is free and will organize your images and provides tools to fix red-eye, crop and resize your images. 

Optimize your photos so the resolution is no more than 90 dpi (dots per inch). GIF format also allows for background transparency, so if that's important, you'll want to save them as GIF files. JPG files do not support background transparency. Many cameras take photos at 750KB up and over 1MB. These will take too long to download to your site and you'll lose your visitor. If you're going to be using the photos for print purposes, you need a resolution of 300 dpii.

Reduce the image display size while you're compressing the file size this will decrease the file size. You want file sizes less than 125KB.  When you find the image on your local hard drive, you can often hover your mouse over the thumbnail and the properties of the file will pop up. One of the properties is file size and dimensions. 

You can use HTML code to tell the browser how large (or small) you want the image displayed when rendered. So get the image size down to a manageable size with your imaging software and then tweak the final size with your HTML code.

Here's the code to add an image to your website. Let's say it is a photo of your dog and you've named it rover.gif. You have it saved to an images folder called /img that lives as a subdirectory of your website. You'll need to upload the /img folder to your web hosting site so the photo will be availabe when the file calls it.

<img src="/img/rover.gif" alt="Rover the dog " width="240" height="188" border="2" align="left" hspace="6" >

The width and height will be determined by your photo. If you want to tweak the size do it porportionately, say decrease the height and width each by 25%. If you only decrease the height, your photo will be distorted.

Border tells the browser whether you want a border and how many pixels wide. If you don't want a border, don't add this element to the tag or say border = "0".

Align is a valuable attribute. This allows you to place your photo left or right and have text wrap around your photo.

Hspace allows for white space around your photo so the text doesn't butt right up to it. I've added 6 pixels of elbow room for my photo.

FastWeb Company

Dripping Springs, TX 78620