Resizing images for the web using. Version 1.3. WrightWay. Design.

Transcription

1 Resizing images for the web using Version 1.3 WrightWay Design

2 Why would we need to re-size our images? Images taken with digital cameras are captured at very high levels of quality to allow for good print reproductions and enlargements. This level of quality required for print though is a lot higher than the level of quality we require to view these same photos clearly on our computer screens. For images we wish to view on computer screens and not send to print, i.e. to friends or publish on a web site, we can then trade off some of this extra detail required for print quality and reduce the file size of our image somewhat significantly to send across the Internet, yet appear just as nicely to the eye on screen. Sure if we resize our photos to a smaller size we are losing some quality from the photo in the grand sense, but in reality it s nothing we will ever notice when viewing the photo on screen anyway, since we re only removing the extra detail used for printing the photos in high quality which we cannot see when displayed on screen anyway. Note though, we are talking about resizing our images for the Internet. If you actually wish to send photos to people so they can print them out in high quality, you will probably still want to send your original digital camera photos, as they will have the best quality information for print reproduction. That or send the smaller files to people and then allow them to ask for the larger copies of any files they may wish to print. Resizing our images from a digital camera before they are published to the web or sent via offers us the following major benefits. 1. People viewing the photo won t need to wait a really long time for the photo to download. 2. Photos can be viewed on screen without parts of them being hidden because they are too big, or the photos appearing with jagged edges because they have been scaled down by the viewing software. Even though digital cameras and images you find on the Internet both share a similar file format called the JPEG format. There are major differences between the two as far as the information stored, and the file sizes go. Digital cameras save JPEG files which are much larger in size because they hold more information for printing the photos at a variety sizes, where JPEG files saved for the Internet only hold the basic information required for displaying photos nicely on computer screens, so the file size is much smaller yet looks the same. Most digital cameras images are saved at sizes around 2 Megabytes and larger. While images for display on the Internet are generally expected to be much smaller in size, and usually no more than 250Kb (0.25 MB) in file size at most, which is significantly smaller than the file size digital cameras save. Besides the size in Megabytes or Kilobytes of the files themselves, digital images are measured by the number of pixels (coloured dots) which go into making up their width and height. E.g. 1024x768 pixels, 1024 pixels wide and 768 pixels high. This is commonly known as the resolution of the image. The other measurement found when working with digital images is dots per inch (dpi). Dpi refers to the amount of pixels or dots of information which go into making up every inch of space in the photo. This is more relevant to printing though, as the higher the volume of dots per inch, the more detail present in the printed photo. When referring to computer monitors though, a rough rule of thumb is that monitors generally display only about 72 to 96dpi of detail on screen. This means that in order for a photo to look good on screen it really only needs 72dpi of detail, any higher and the extra detail is just wasted since the monitor cannot reproduce it anyway. Digital cameras generally save their images with a dpi level of around 240dpi or more. This is so the photos taken can be printed in high detail at a variety of sizes. To make up this level of detail though, the image resolution is around 2500 x 1900 pixels and larger, but our standard computer monitor still only displays information on the screen at resolutions no smaller than 800 x 600 pixels, but generally no larger than 1280 x 1024 pixels. So you begin to see the contrast in resolution and dots per inch between digital camera images and what we actually require to see the picture nicely on a computer monitor.

3 Since digital camera images are of 2500 pixels in width and wider, even the largest of normal computer monitors we mentioned can only display part of this image on screen (without the computer shrinking it for you), and you must scroll around the picture to actually see the rest of the areas hidden away off screen. To view such a large image on your computer monitor without scrolling around you need software that shrinks or scales the photo down so it can fit within the viewable area of your computer monitor. Most web browsers can now do this for images viewed on the Internet, allowing them to fit on your screen without needing to scroll around. Though this does come with some hidden costs. These costs being that the image itself is still just as large in actual file size, so takes just as long to download, and the web browser uses a quick method of resizing the image which results in the scaled down images having an untidy look about them. This lack of quality in the scaled down images is due to the fact it takes a reasonable amount of calculation to perform a good quality reduction in size of large images, and this amount of time in calculation is beyond that deemed acceptable for a web browser, so the quality of the image is generally sacrificed for speed in this case. The fact the file size is also just as larger means for a person trying to quickly browse your web site using a slower broadband or dial-up connection, it may still be an unacceptable amount of time for them to wait in order to view the photos. They may simply give up browsing your web site, or delete any of your messages whichhave attached photos before even reading them, if your image files are too large. The good thing is that as we have mentioned, the size of the image does not need to be anywhere as large for viewing on the Internet or as it is when saved from a digital camera. Resizing our images can deliver the same amount of quality for displaying our photos on screen, but save us much grief and data transfer expense. The following steps will guide you through how to resize your images ready for the Internet and , and best of all the software for doing so with quality results is absolutely free. Requirements for this guide To resize your images nicely so they don t lose too much quality in the process, you need a good graphics program that can do image resizing or scaling with accuracy. One such program which is available for people to use free of charge is called Paint.Net, and this is the software we will use throughout this guide. You can download Paint.Net from the following web site If you have not already done so, please download a copy of Paint.Net and install it onto your computer. It is quite simple to install and can be started from the Windows Start Menu once installed. The software is continually being updated with new features, so the version you download may differ to the one we used in this guide, but the steps and procedures are essentially the same. If you are using a Macintosh or Linux computer, then you may wish to look at The Gimp project gimp.org. The Gimp is a fairly advanced graphics program and also available for free. It can re-size (scale) your images in the same fashion as Paint.Net does, but isn t quite as simple to use as Paint.Net. So we will focus on Paint.Net here in our guide since it is simplest to install and use under Windows, but the same theory applies to scaling images in The Gimp.

4 Resizing Your image Start Paint.Net from the Windows Start Menu. Then go to the File menu and choose Open (Ctrl + O) Browse your computer or removable disk and find an image you wish to open and re-size. Now go to the Image menu located approximately at the top middle area of the program window. Find and select the option called Resize

5 A new window will appear with options for re-sizing. When resizing your image, always use the Best Quality setting, this will ensure as much quality is kept in your image as possible when it is scaled down is size. This is usually the Bicubic method for standard colour images. You may select to scale by percentage, but you will nearly always wish to scale your image to a particular size. For web graphics as we mentioned, this is normally about 800 pixels wide or 1280 pixels wide at the most. 800 is a safe option though, since most people can view this nicely. Don t worry about changing the height. Because since we have the maintain the aspect ratio option select, Paint.Net will calculated the correct height itself, this way your photo doesn t end up out of proportion. The standard resolution of photos saved for the Internet is 72 dpi. So make sure 72 dpi is chosen as your Resolution. Don t worry about any of the Print size options. These are calculated from your width, height and resolution (dpi), and won t be of concern for us here since we re saving our image for display on computer monitors not print. You can also ignore the new size displayed, since this refers to the raw image size, not the jpeg file size. Note: Your image height may not always match 600 pixels in height. The image we are using in our example here is in exact proportion to fill a computer screen, but some digital cameras may not adhere to this same ratio. So you may find that your height in this case will differ. Don t be alarmed, simply allow Paint.Net to calculate the correct height required to maintain your image proportions and stick to your 800 pixel width. Once ready, click OK. Paint.Net will then busily work away at resizing your image to 800 pixels in width and show you a progress window as it goes. We are now ready to save the scaled copy of our image. Important! One of the golden rules of thumb in digital photography, is always keep a copy of your original image. No matter how cool you think your end result is, you can never go back and make alternative adjustments if you saved over your original photo. So always save any adjustments you make as a separate file with a different name. Go to the File menu and choose Save As Save will present the same result, but using Save As, whether you ve previously saved or not, can provide you with additional options for saving the image.

6 Select the location you wish to save your new image to, and give it a name. In this case our original example file was called air-1600x1200, so I have named ours air-800x600. Click Save when you are ready. You are now presented with a selection window for saving your JPEG image file. JPEG images use what is known as lossy compression. This is where an algorithm is used to reproduce the image with relative accuracy depending on size vs quality. Smaller file sizes though mean less quality in your image. In most good graphics programs which use an accurate JPEG export feature, choosing 75 as the level of quality is a solid rule of thumb. This will give you the best quality reproduction without making the file size too big. Any lower than 75 and the loss in quality becomes fairly noticeable. Any higher than 75 and the file size becomes considerably larger but the increase in quality is fairly negligible. Our preview of the image on the right of the Window will display the actual results of what you choose on the slider scale. So you can move the slider all the way up and down and see the drastic results it will produce, or slowly nudge it down from about 85 to see where the image quality really begins to degrade if you are being particularly fussy. You will find on the average though, that 75 is the sweet spot. When you are happy with your selection, click OK. Congratulations! Your image is now saved with the new width of 800 pixels, and a height that matches in proportion. Your photo is now ready for the web. You will also find that your new image is significantly smaller in size. Remember, you are free to experiment and try smaller widths if you wished to make your images even smaller for sending in s, or using on your web site. There s no fixed rule saying that you need to use 800 pixels in width for your resized images, this is just a good average if you are unsure what size to select. If you need to resize your images for a web site, then find out what the maximum size image is for the web site and resize your images to match that size. It might not always be 800 pixels, it could be 1024 pixels or something a little larger like that, in which case you will be best to resize your images to that width instead of 800 pixels.