Latest Post | Last 10 Posts | Archives
Previous Post: Flood at Blot Towers
Next Post: Create your own XML sitemap
Posted in:
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 will likely 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, trust me.
Image dimensions and resizing
Web pages are based on pixels, the little dots that go to make a video screen. Most pages 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, then choose Properties. This will show you the dimensions of that image in pixels. There will also be an option the View Image 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 a Content Management System (CMS) like the latest version of the Blot CMS, it may 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 require, 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. The (loose) convention for web images is to use 72dpi, so by all means use that. This is usually done from the scaling/resize option in your image editing software.
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.
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 20-30kb.
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.
posted by info
July 17, 2009 @ 3:47 pm
Sorry, comments are closed at this time.
Previous Post: Flood at Blot Towers
Next Post: Create your own XML sitemap
Powered by WordPress. WordPress Mobile Edition available at alexking.org.