Before you post an image on the web, make sure the image has an appropriate file size as well as display size. Doing so demonstrates that you have good “digital manners,” meaning that you are conscious of the needs of your viewers. Also make sure the image is in a file format that can be displayed on the web, such as JPG or PNG. See below for more information.
Size Matters
File Size
File size refers to the number of kilobytes (kb) or megabytes (mb) the file takes up on a hard drive.
The reason this matters is that when viewers try to view your image on the web, their computers will need to transfer the file over their internet connection. Large files transfer slowly, which is annoying enough, but they might also eat into a viewer’s overall daily or monthly bandwidth allowance, which is particularly annoying. Internet uses who live outside of major urban areas typically access the internet through plans that limit how many mb of data they can upload or download in a given day or across a given month.
So if you want to embed images so that they display on a web page by default, it’s considered good “web etiquette” to make those images as small in byte size as possible, particularly if the web page will have more than one image. A good rule of thumb is to keep image files under 400kb. You can always provide viewers a link to a larger version of the image, if you want that option to be available.
You can check a photo’s file size by finding the file on your hard drive and using your computer’s “get info” function or “detailed list view” to see details like file size. You should see the file size represented in kb (or possibly mb if it’s quite large).
To reduce a photo’s size, open it in an image editing app and use the Image Size menu option. An easy way to reduce file size is to reduce display size, as described below. You can use Preview (on a Mac) or Paint (on Windows) to reduce the size of any image file, or you can use the free web-based app available at Pixlr.com
(You can see a screenshot that shows where to find the Adjust Size option in Preview on this post, but I should probably create a separate post with details on editing images in Preview and Paint.)
Display Size
Display size refers to the size of the image on the screen, usually referred to in terms of pixel width and height. (Referring to images in terms of inches is only meaningful for printing, not for viewing on computer screens, so if your image editing app shows the size in inches, switch to pixels.)
Images on a web page should be displayed at a size that complements rather than overwhelms the text and other material on the page. If you think viewers might like to see the image at its full display size, you can always make the image on a page a link to the full display size version.
A good rule of thumb for images that accompany blog entries is to keep them under 350 pixels wide, although the optimal size depends on a number of factors, including the pixel width of the web page you’re posting to. Many blogs specify that blog entries will be around 600 pixels wide.
Photos you take with a digital camera are likely to be very large in byte size and to have a display size that is wider than anyone’s computer monitor, so these photos should always be reduced in both byte and display size before you post them on the web. Photos you download from web sites might already have an appropriate byte and display size, but you should still check to make sure before you post them on your own web page or blog entry.
You can check the file’s display size by opening it in a photo editing program (such as Paint or Windows Photo Gallery on Windows, Preview or iPhoto on Macs, or Pixlr.com on the web). Select the option from the menu that relates to image size, which should show you how wide and tall the image is in pixels (or in inches, which you can then change to pixels).
If the file is wider than 350 pixels (or whatever width you’ve determined to be ideal), the easiest way to reduce the size is simply to enter the ideal number in the width box and that’s it. Most apps will automatically adjust the height in order to retain the image’s original proportions.
You can then use the “save as” or “export” function to save your new smaller version, which you might want to rename by adding sm at the end of the file name, like this: beach-house-sm.jpg Be sure to select this version to upload to your web page or blog post.
For help using photo editing apps, browse the handouts under the Working with Images category or the relevant digital tool category.
Image File Formats
Images posted on the internet should be in JPG or PNG (Portable Network Graphic) format. That means that their file names will end with the extension .jpg or .png
NOTE: Although it’s possible for users to manually change extensions on file names, doing so will not actually change the file format, which is controlled by the app you used to create or edit the file. So, in other words, if you want to upload an image that has the file name beach-house.tiff, you can’t simply change the .tiff to .jpg and have it work. Instead, you’ll need to open the image in an image editing app and choose the “save as” or “export” option in order to convert the file to the appropriate format.
TIP: When you save or export the image in the new format, you may see a box for “hide extension.” Do NOT leave this box checked, as it’s important to be able to see file extensions so that you can tell what file format they’re in before you upload them to the web.
I also recommend that you get in the habit of changing the file names for your images from whatever they were called by default (often an incomprehensible string of digits assigned by your digital camera), so that you can easily identify the exact file you want to upload to the web, and so that the image will display properly.
Although some web sites will correct badly formatted file names “behind the scenes,” it’s a good digital literacy practice to simply give files names that are correctly formatted. That means the file names should be in lower case, with no spaces and no punctuation other than hyphens, and they should not be terribly long. The most helpful file names also describe the contents of the image. For example: jello-ad-newsweek-jan2011.jpg