Website images 101

Good photographs on a webpage can make the difference between keeping your visitor interested or losing him/her.

If you have any responsibilities in updating your website, you'll have to learn the basics of image/photo editing.

Why, you might ask? Well, if the image is not the right dimensions for the webpage, it can break the design.

Also, if the filesize of the image is very large, it will take ages for the page to load and your visitor will not hang around waiting for it.

Image dimensions and resizing

Web pages are based on pixels, the little square dots that go to make a video screen. Most webpages are constructed with areas where the expectation that an image will be a certain width or height (also in pixels).

If an image is loaded that is too big, it will push everything else out of alignment. If it's too small, it might leave a big gap.

So you have to get it the right size. How do you find out what the size should be? The easiest way to find out the size being used by an exisiting image on a webpage is to right-click (control+click on a Mac) on the image in your web browser.  Depending on the browser, the context window may show Properties or View Image Info or perhaps Inspect. Choose one of these options to see the dimensions of that image in pixels.

If you're using the Blot CMS, the Images tab will show you the exact dimensions of any image it is currently using.

There will also be an option to View Image or similar, which is worth doing to make sure you are getting the dimensions of the image you thought you were.

How do you resize? Well, if you're using the Blot CMS, it will have an option to resize the image as you upload it.

Normally, you will be using image editing software. It's usually pretty straightforward. Just open the image in the editing software then find where the option to resize/scale is. Quite often it will be under the Image menu.

Change the width or height to what you would like it to be. The default setting is usually if you change one, the other will change in proportion. Then save the resized file.

One last point on resizing. If your image is too small for your requirement, you CANNOT make it bigger. Well, you can, but it will lose its sharpness and become pixelated, effectively making is useless.

Image resolution

All images have a resolution that is normally expressed in dots per inch. As far as a webpage is concerned, this is practically meaningless - it applies really to printing.

It's the pixel dimensions of the image that decide how much space it takes up on the screen.

However, the resolution can have on very important effect on a web image - it influences the file size. A 300dpi image will have a much bigger file size than one with a resolution of 72dpi.

So if you have a high-resolution image (say 300dpi) you should reduce the resolution. The (loose) convention for web images used to be 72dpi, so by all means use that.

This is usually done from the scaling/resize option in your image editing software.

Retina Displays

Since Apple introduced its Retina Display screens though, the notion of 72dpi  resolution for computer screens has changed a little as these types of screens (and others from other manufacturers) have much higher resolutions.  

The browsers scale these images up so they still take up the same screen 'real estate'.  However, this can make the images look blurry, so we are seeing situations where web pages serve up different resolution images depending on the the device that is being used to view them.

This is a situation that is likely to continue, and we will see new HTML elements being added to handle this in the future (e.g. the <picture> element).

Cropping

Sometimes you will only need or want part of an image, so you will need to crop the image to retain the part you want. This is usually done by choosing a crop tool in the editing software, dragging the mouse over the area to be retained to select it, then choosing the Crop command.

Image types

In general, web images come in one of three formats; JPG (sometimes JPEG), GIF and PNG.

If the image is a photograph, the file format will almost always be JPG.

GIFs and PNGs tend to be used for logos and graphics. Transparency is only available in GIFs and PNGs. The general rule is: whatever the format of the original file should be what you save it as after editing.

Saving images

If you're saving jpeg files there is usually an option to choose how much compression to use.

This will have an effect on how big the file size of the saved file will be - the more compression, the smaller the file.

It also has an effect on the quality of the saved image - the more compression, the poorer the quality. You may need to experiment to get a good quality image with a small enough file size.

Unless the images are very big in dimensions, your file sizes for average images should never be more than 30-60kb.

Software

There are dozens of editing packages available. Here are a few that you may come across.

Camera software. If you've got a digital camera, more than likely it will have come with some photo editing software. Check out the user manual to find out how to change resolution, scale and crop your images.

Microsoft Office. Later versions of Office provide basic editing software which will cater for most requirements.

The Gimp. This is a freely available software package that will do all of the above and a whole lot more. Download it from http://www.gimp.org/. Many of our clients use this.

Adobe Photoshop. The professional's choice but not for the faint hearted. Expensive but extremely functional.

IrfanView. Freeware image viewer and editor with a great batch processing facility (great for resizing or changing resolution of multiple files). Download from http://www.irfanview.com/.

Pixlr. This is an online image editor accessible from any browser and it's like an online cut-down version of Photoshop. One great thing it does it that it will automatically reduce the resolution to 96dpi which is great if you have a high resolution image needed for a web page. Check it out at http://www.pixlr.com/editor/.  Be aware that this uses Adobe Flash so you will not be able to use it on iPhone or Android devices.

Paint Net. This is a like a cut-down version of Photoshop but it is ideal for changing resolution, resizing and cropping. A free download, too at http://www.getpaint.net/

comments powered by Disqus