Optimizing Images for the Web

Why optimize?

When you take a picture with a digital camera, it creates an image that that is quite large. This happens so that your images can be displayed at very large sizes — as big as your computer monitor, or even printed as a large wall hanging. On the website, we are not displaying images at the size of a wall, so we do not need such large image files. 

Additionally, when our users open our web pages, their browser has to download the image files, and the larger those files are the longer this takes. Worse, if they are using devices with limited data plans (like a phone), a non-optimized image uses more of their data plan.

Therefore, we want to resize and optimize all the images we put online to speed up the user experience, and reduce the amount of data that our users have to process.

What size should my images be?

See Adding Images for a rundown of image sizes for different use cases.

How to Optimize Images

There are many image optimization tools available. If you are a Photoshop user, images can be easily resized and optimized with Photoshop. For a web browser-based editor, we recommend Befunky:

• Browse to befunky.com/create
• Drag and drop your image into the Befunky browser.
• To Resize your image:
  • Click "Crop" under the "Essentials" tab on the toolbar.
  • Select your desired aspect ratio for your image from the drop-down. Most often on our website, we use the aspect ratios of 16x9, 4x3, or square (1x1).
  • Click the "Lock Aspect Ratio" checkbox. 
  • Drag the crop window on your image to change the area being cropped.
  • Click the Checkmark button.
  • In the left-hand menu, now click "Resize."
  • Enter the desired final height/width for your image in the boxes.
  • Click the Checkmark button.
• To Export your image with a small file size:
  • Click "Save" on the toolbar at the top of the screen, then select "Computer".
  • Enter a title for your image in the "Filename" field.
  • Use the slider to reduce the file size. Most images should be 200kb or below.
  • Click "Save" to download the optimized version of your image.