Preparing Images for the Web.
Often the hardest part of building and maintaining you own website is finding, preparing and adding good quality, well prepared images.
There are 2 important factors in preparing images for the web - the image size and the image size - now that is confusing!
Size 1 refers to both the height & width of the image - for digital images this is counted in pixels - for example 3000 pixels wide by 2000 pixels high.
Size 2 refers to what should correctly be called image weight - but it's the size of the file in bytes ( kila, mega, trila.. you name it! ) - the images that come directly out of a digital camera will normally by in the .jpg format - which is a compressed format, but in terms of weight ( file size ) they will be large - a modern digital camera might make images that are more than 4 megabytes ( mb ) each.
Images of this size are too large ( both weight and dimensions ) for the internet - so they need to be reduced physically ( height & width ) and then compressed ( to reduce file weight ).
Web Editor users have two options, one is to prepare images before they are uploaded, the second is to use the image cropping and resizing tools available within Web Editor.
Prepare before uploading
As a rule of thumb, it is generally better to prepare images before they are uploaded using an image editing application like Photoshop.
Preparing images correctly on a computer before uploading helps because:
- Images which require further editing can be reworked from the originals, which ensures that image quality stays as high as possible.
- Images which have been reduced cropped and correctly compressed will be high-quality, quick and easy to upload and will also download quickly when someone visits your website.
If the selected image is very large ( file weight ) it may not be possible to upload it in the first place, as there are restrictions on the size of files that can be uploaded, in this case it will only be possible to upload the image after it has been resized & compressed.
Photoshop is very good at this and has a save for web option which allows for tweaking of compression settings to maintain high quality images ( which is very important ) while reducing file weight.
Photoshop also has the option to run what are called batch processes which are simple scripts which can be created to automated repetitive tasks - like cropping and compressing images for the web.
However, Photoshop is sometimes overkill for this type of job - it produces high-quality images but requires more time to learn to use.
There are available simple tools which can be downloaded free which are designed to simple crop and resize - and nothing more, for example.
http://www.harveyosity.org/dragncrop/
This tool will crop all images dragged onto it to pre-defined sizes - if the proportions of the images selected do not match the defined ratio, it offers a crop option where you select which area of the image to keep.
There are hundreds of similar tools available, you just need to find something that suits your needs.
Edit after uploading
Option 2 is to alter your images once they have been uploaded - this option is available from the Image Library - which can be opened from the CMS when editing a web page.
Right clicking any of the available images will present a list of options - including rotating, cropping, resizing and others.
Editing images online has the advantage that changes are instant - the image does not have to be re-uploaded and selected again - however it's important to take care when editing anything directly which might affect how a live website looks or works.
Good luck.
