Image Optimization

Displaying images on web pages is complicated due to the amount of various devices. We must balance looking good and loading fast. Most people will be on a slower Internet connection than we have here at the university or may be viewing from a phone while others will be on high-end retina displays. In general, you should try and attain images that are versatile and look good regardless of the dimensions or byte size. Too large an image is a waste of precious load time!

Content Management Systems

Our WordPress and Drupal websites will compress your images automatically. If the automation makes your image look bad, contact us at cofawebmaster@austin.utexas.edu. Instructions specific for WordPress and Drupal, coming soon.

High Resolution Images for Retina Displays

Also contact us if you want to display high quality images for retina displays. Currently, high density displays are most common on smartphones but fortunately quality difference is not as noticeable on a smartphone as it is on larger displays like tablets and laptops.

Learn how to crop, resize and optimize images

Watch on YouTube. Please contact the cofawebmaster@austin.utexas.edu if you are unable to access this video.

This video demonstrates the following steps:

  • Determine how many pixels wide the image needs to be. The MeasureIt plugin is available at frayd.us at no cost and can be installed on Safari, Firefox and Chrome.
  • Open the image file using Preview. Click on it in Finder to automatically open it.
  • In the Preview menu, go to Tools –> Show Inspector.  The image size is given in pixels along with the file size, which needs to be below 100 KB for faster loading on the page. Never more than 500 KB.
  • To crop the image, select the part you want to keep, then go to Tools –> Crop.
  • Next, go to Tools –> Adjust Size. Most Web graphics should be set to 96 DPI. Learn more about DPI and resolution.
  • Choose the pixel size/dimensions you want. The resulting file size is shown in the dialogue box.
  • Go to File –> Export.
  • Save using a different file name to provide a spare copy if you need to try again. If the Inspector showed a size over 100 KB, move the quality slider to the left one or two marks. For most photographs, saving as a JPEG will give you the best results. Line drawings, text and iconic graphics should be saved as PNG files. More about JPG vs. PNG.
  • File names should contain only alphanumeric values and underscores or dashes.
  • Use Finder to check the file size. If it is larger than 100 KB, export it again with a lower quality.

If your images need additional editing, try Pixlr, http://pixlr.com/. If you need really optimized images check out ImageOptim, https://imageoptim.com/.

Learn More

Google’s Image Publishing Guidelines includes optimization and other tips that will help get your images and Web pages ranked higher in search results.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

College of Fine Arts WordPress Instruction

College of Fine Arts Drupal Instruction
Subscribe to our email list to receive periodic tips and resources for generating great digital content

Achievements & Updates

The COFA Web team's announcements, tips for a successful website and analysis reports of trends and visitor data.

Contact Us

The COFA Web team can be reached by emailing us at cofawebmaster@austin.utexas.edu


To view some links on this page you may need to download Acrobat Reader.