Take your photography to the next level and beyond...

  • NEWS
  • REVIEWS
  • INSPIRATION
  • COMMUNITY
  • COMPETITIONS

Why not join for free today?

Join for Free

Your total photography experience starts here


PRIZES GALORE! Enter The ePHOTOzine Exclusive Christmas Prize Draw; Over £10,000 Worth of Prizes! Plus A Gift For Everybody On Christmas Day!

Optimising Images for the Web

Optimising Images for the Web - Michael Bates shows us how to optimise your images for ePHOTOzine without losing image quality.

 Add Comment

Category : Software
Share :

Image sizing in GimpObviously you can't always upload images onto a website at their original quality and size; it'd take far too long to load a web page and the cost of hosting all the files would become unacceptable. However, if you've spent hours preparing, taking and modifying your photographs you want people to see it in the best quality possible, which is why I am going to show you how to optimise your images for ePhotozine without losing image quality. The general guidelines are that your image should be 600x600 pixels, up to 100 kb in size and in j-peg format, and even though these guidelines allow higher resolutions and file sizes for E2 members this tutorial will still apply, though you just need to apply the higher values. The process is largely the same in all image editing programs, but here I will use GIMP and Paint Shop Pro X2 and Photoshop CS2 to show you how to do it in these common packages.

Image sizing in Photoshop CS2Photoshop CS2

Step 1. The first thing we need to do when your image is ready is resize it. To do this open Image>Image Size (Control, Alt and ‘I'), and a window containing information about your image's dimensions will open.

Step 2. You need to keep the Constrain Proportions box ticked unless you want some cropping to occur when you resize the image, so make sure that is ticked before you do anything. The area we are interested in is the top portion of the box where it tells us the file size and dimensions in pixels. This image is actually ok for an E2 member to upload as far as its size is concerned, but the file size is a tad above the 400kb limit, but for a regular member this image needs quite a bit of trimming. Click inside the dimension with the highest value and replace it with 600 pixels. You will be shown the new file size above the dimensions as soon as you enter a new value.Image sizing in Photoshop CS2

Step 3. As Photoshop has told us, the image is now taking up 694.3 kb of memory, which is still above the ePHOTOzine regulations for both E2 and regular members. Now we need to reduce the size of the image by compressing the image, which is done as we save the image anyway. So open File>Save for Web (Control, Alt, Shift and ‘S') and a new window will open containing a large preview of the image.

Step 4. The first thing we need to notice is that we are saving the image as a j-peg image by default; it will tell you the information we are after in the bottom left corner (file type, file size and approximate download time on a slow internet connection). Already in the default settings our image is being compressed with the JPEG High default, which has put our image below the 100kb mark. The preview image should be looking pretty respectable at this quality; however putting the preset quality to Very High will put you over this mark so is only for the E2 members really. To customise the quality we need to look at the menu on the right of the window however.

Image sizing in Photoshop CS2

Image sizing in Photoshop CS2


Step 5. The setting we are most interested in is the ‘Quality' setting, which controls the amount of compression applied to the image. TImage sizing in Photoshophe more we apply the lower the file size and quality, since we are at 87 kb we can move this slider up a few points until you are as close to 100 kb as possible. If you notice there is no apparent difference after you do this you may as well undo the changes since it will save you file space with no extra loss. If there are artefacts in your image adding some blur can counteract this a bit, although there are steps you can take after you have converted your image to a j-peg to combat these too using Photoshop and similar packages. Once you are under the file size limits and have your image how you would like, press Save and select a location and file name for the image then upload it to the web.

Paint Shop Pro X2

The process for Paint Shop Pro X2 is very similar to the process for Photoshop, so for more detail read the Photoshop instructions above, however the location of the tools and layout of the windows is different.

Step 1. Open the Resize dialogue by pressing Shift and ‘S' or by opening Image>Resize. Change the highest value in the Pixel Dimensions section to 600, ensuring that the two boxes are linked by the padlock before you do. If the proportions are not locked open the Advanced Options by clicking the box at the bottom of the window and check the box next to Lock Aspect Ratio.

Resize box in PSP
Resizing in PSP

Step 2. Now the image is smaller you can compress the image so that it takes up less disk space and bandwidth. Open File>Export>JPEG Optimiser. You have 3 tabs to progress through, although the first one is the most important. Here you can see the size of the image before and after as well as a close-up preview of the result of compressing the image. A definite space-saving tip that shaves off a few kilobytes is un-ticking the ‘Save Exif Data' box, which means any data about the image's correct orientation will be removed, but since the image should be the right way up by this stage it will be expendable in most cases. Move the compression slider until the file size is under 100kb and we can move to the Format tab. You can ignore the Chroma subsampling option; the loss of image quality compared to the amount of memory it saves you makes it an undesirable trade.

Format tab in PSPStep 3. If you removed the Exif data you will be able to determine how the image loads in the next tab. The two options are standard loading, where the image loads up line by line as the data is received, and progressive, where the image will load as a series of coloured squares, becoming more detailed as the data is received and the squares become smaller. Watch the animated previews for a better explanation of these settings; progressive will save you a few kilobytes meaning you can have a lower compression setting but it won't afford you a large-enough saving to improve the image quality massively. This once is mainly down to aesthetics in my view; if you like the retro style of loading then by all means go for it, but I can't see any advantage for either method.

Step 4. Finally the last tab is just a list of approximate download times for different web connections (here Corel outdid CS2 by acknowledging broadband connections) which should be of interest to web masters more than users. When you've checked over your settings press OK to accept the changes. You can now save your image and upload it to the web.

GIMP

Step 1. To resize the image press Shift and ‘T' or open Image>Scale to open a dialogue that will allow you to change the image size. Click the chain if it is broken to make sure the aspect ratio is locked, if it is already linked then just swap the largest value for 600 pixels and press Scale to apply the transformation.

Scale image box in GIMP Save Image in GIMP

Step 2. Once this is done open File>Save As... (Control, Shift and ‘S') and find a location where you wish to save the image. Type a file name at the top followed by .jpg so as to save it as a Jpeg file, or alternatively select Save image as a JPEG in GIMPJpeg in the drop-down menu in the bottom right of the window. Press save to continue the process.

Step 3. A new box will open containing a Quality slider, however at first it will say ‘File Size Unknown' underneath it, which we don't want to happen. However if you select ‘Show Preview in Image Window' it will tell you the finished file size of the image so you can move the slider until your file size is under 100 kb. If you want to add some blur to the image or anything like that you can open the Advanced Options and you will be presented with the same options as PSPX2 and Photoshop CS2, although blur is called ‘Smoothing'. Press save when you are done and the image is ready to be uploaded to the web.

Explore More

Join ePHOTOzine and remove these ads.

Comments


mick183 6 7 5 South Africa
12 Nov 2008 12:21AM
Generally useful. In addition I would like to see some guidance on optimizing for the web using Elements - I have version 5.

Join ePHOTOzine for free and remove these adverts.

Sign In

You must be a member to leave a comment.

ePHOTOzine, the web's friendliest photography community.

Join For Free

Upload photos, chat with photographers, win prizes and much more.