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 email@example.com. 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
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 90 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.
- In Photoshop, save for ‘progressive load’
- Images in pdfs also only need to be 90 dpi
Google’s Image Publishing Guidelines includes optimization and other tips that will help get your images and Web pages ranked higher in search results.