How to make an image web-ready on a Mac | Digital Writing 101

Important note: Always rename image files that you plan to post on the web so that their file names are in lower case letters, with no spaces, and contain the extension that represents what type of file format they’re in.  For example: iphone-icon.jpg or sassy-swimming.png

You can change a file name by opening the image, choosing Save As from the File menu, and giving it a new name.  Or you can single-click on the image file name on your hard drive and drag slightly.  The name should become highlighted, indicating that you can now change it.

Make sure the image is in jpg or png format. You can’t simply change the extension of the file to do this. You must open the file in an image editing program, choose Save As (or in some cases, Export) from the File menu, and choose the appropriate format.

• Double click on the image file and it should open in Preview. (If not, right-click or ctrl-click on the file name, choose Open with, and choose Preview.)
• To display the image in its actual display size, go to the View menu and drag down to Actual Size.  That way you can see if the image is actually enormous or a decent size for web viewing.
• Check the size of the image in pixels and kilobytes. Go to the Tools menu and drag down to Adjust Size.



• If the image is more than 600 pixels wide, reduce its display size by changing the value in the width box. Use the dropdown menu to select pixels instead of inches, if necessary. When you change the width, the height will automatically change as well.
• Also check the Resolution setting. For web viewing, it should be 72. If the number is larger than that, reduce it. Larger resolutions are useful only for printing.
• You’ll notice at the bottom of the Adjust Size panel that the file size has also gone down. Ideally images displayed on the web should be under 500kb, and as close to 100kb as possible, particularly if you have a lot of them on a page. Many people have internet access plans that limit the amount of material they can download every day, and every image counts towards that limit. (For example, my plan limits me to 350mb per day.)
• After you change the size, save the file. If you haven’t already done so, give the file a short descriptive name with no spaces and make sure its extension is displayed, like this: preview-toolbar.png

• If you need to crop the image, draw a box around the portion you want to keep.
• Go to the Tools menu and drag down to Crop.



• After you crop the image, save the file.
• Give it a new name that reflects its contents.