First, let's start with some recommended image sizes for the web. For normal graphics on the web, not including a header or banner, I would not go above 400 pixels wide. This is a good medium-sized image for displaying group shots, class pictures (pictures from field trips, class projects, etc.). It is enough to see what is going on in the picture, but not large enough to be obtrusive, or take up most of the web page.
If you are on a Mac, and do not have access to Photoshop, you can resize your images using the Export settings (File>Export) in iPhoto. Set the image quality to medium, and then use the drop down menu under Size to go to Custom, and set your maximum width to 400px (or less). If you do not have iPhoto (part of iLife), you can use GIMP, which is a free download (open source) to resize, as well as touch up your images. Apple's website also has quite a few image editors that will also do the trick for you. Look under the Image & 3D section under Apple Downloads. Be sure to read the description of the one you want to download. Some of the apps available for download are Demo versions (or trial versions, meaning they will work for a limited amount of days, or limited in processes or allowed amount of edits). Some of the apps are shareware, which could mean there is a minimal price for the app, or it is a trial version of the app. If it is an app you want to use on a regular basis, and do not have the funds to pay for an app (as teachers we often spend more on items for the classroom, then we take home or to the bank), look for an app that says freeware.
GIMP is also available for Windows, if you are using Windows, and do not have access to Photoshop, Photoshop Elements, or the likes.
Another thing to consider when sizing your images for the web, is the amount of images you have on a page. If you are doing a photo gallery type page, consider using thumbnail images to a larger image. Your visitors using older browsers, or older computers will appreciate not having to wait for long periods of time while your page loads a bunch of larger images. Size your thumbnails to 200px, or less.
iPhoto can create web pages for you with thumbnails that link to larger images. The larger images are shown one image per page. You can set your maximum widths for both the thumbnails and the larger images under the Export settings. (iPhoto will place the images and the thumbnails in separate folders for you, if you would like to use these images in other ways rather than on an image gallery.)
If you take an image from a digital camera, most cameras are set to either 96 dpi (Dots Per Inch), or 72 dpi, depending on your camera settings. (Raw image settings are considerably higher, set at 240 dpi or higher, designed for print.) 72 dpi is the recommended setting for images on the web. In iPhoto, you can only change the file type (.jpg, .png, or .tiff), and the image quality (low, medium, large, maximum). Changing the image quality in iPhoto does NOT change the resolution (dpi size) of an image. It only changes the file size through compression. You can also change the file type to .png (Portable Net Graphic) which will change the file size without too much of a loss to your image quality.
You can change the resolution in Photoshop, or Gimp, under the Image>Image size menu. (Check the box to "Constrain proportion", and remember to reset the image pixel size to your desired size for the web, if you change the resolution after resizing your image.) Changing the resolution of your image WILL resize your image! so be sure to check your image size, again.
Another setting that will help in Photoshop, or Gimp, is to "save image for web" (under the File menu) rather than the standard "Save As" option. If you click on the "4-up" tab in the "Save for web" window, you can see the original image and three other options, for comparison of file size and quality. You can also manually change the image quality by typing the percentage in the box on the right (or moving the slider up or down). (I normally save my images at a compression rate of 60 percent for .jpgs under the "Save for web" file setting.)
Again, if you do not have Photoshop, or Gimp, try one of the "staff picks" under the Images & 3D section in Apple Downloads. Graphic Converter, or XnViewMP, will also allow you to change your image resolution very nicely. Remember, 300 dpi is for print, but 72 dpi is for the web.
0 comments:
Post a Comment