How to make a website

At some point you will need to make your images smaller for a website. If you try to put a picture taken on your 10 Megapixel camera on to your website without resizing it then if you try to view the image it will fill up your screen and several other screens as well. On top of this it will take a very long time to load.

In a lot of software programs if you want a smaller image you just get hold of the little handles on the sides of the image and pull them in to make the picture smaller, don’t you?

Never do this for a website!!!!

Now there may be the odd exception to this rule if your particular software is idiot proof and will take care of resizing for you but if you get in the habit of not doing it this way you won’t ever be caught out.

On a website when you drag the sides of an image in you are not actually making the image smaller. Instead some code is being added to the page to tell the browser to display the image smaller. Note the word “display”. The picture is the same size as it was before (e.g. huge) but the browser is being told to make it display small.

So then what you want to do is to make the picture small (small = fast loading) and tell the browser to display it the right size.

You do this with some image editing software. I’m afraid they all work a little differently so I can’t give you a blow by blow account here but you are looking for something that says resize, or adjust dimensions, etc.

When you get the right dialogue box in your software there will probably be options for size (e.g. the size you want to resize your image to). You don’t want to resize an image by inches, cm, or mm. You will want to resize by pixels (a pixel is one dot on a monitor). You resize in pixels because monitor sizes are measured in pixels so it makes working out the dimensions on a website that much easier – just trust me on this one.

Also you may see a choice between image size and canvas size. If you are resizing a photo then these are pretty much the same thing but if you are creating an image and resizing it you will find the canvas size is the size of the whole image and if you resize the canvas but not the images on it then they will take up more of the canvas (if that makes sense).

You need to decide how big to make your image. This will very much depend on how big you are making your website, or how big your website actually is. Also remember that the bigger you make an image the slower it will load into the viewers browser. So you want it as small as is reasonably possible whilst still keeping the impact of the image.

Some sites like to put great big images on that spread across the page. I think these look really nice but sadly this was of doing things comes at a cost to the content and speed of the website. It’s up to you.

Then you tell your software to make the image the right size for your requirements.

Now I need to add a word about resolution. You may hear people speak about resolution size (often dots per inch or dpi) and they will say that you need to set this to 75dpi for the web. This is wrong information. A very long time ago when people resized by dpi then this would reduce a big image to something reasonable for the web. However dpi has no effect on file size. Within the image file is a setting that tells a printer what to print the image at and this is where dpi comes in (the usual setting is 300dpi for a print by the way) but this setting has nothing to do with the final file size of the image. The only thing for you to think about for images that display on screen is the pixel size (length and height of the image).

So set your image size to whatever you have decided is right in pixels and ignore any talk of dpi. It took me a long time to work this out for myself (because I started back in the dark ages when people thought dpi mattered to file size) but you get the information straight away.

Click your save or apply button and you have your file resized and ready for the web.