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. An image that has more bytes than is necessary is a waste of precious load time!
Content Management Systems
Our Drupal websites compress and resize images automatically. They also display different sized images depending on the device. In some cases, the image may be larger on a smaller device than on a large device. The instructions provide a recommended file upload size that may seem exceedingly large. This is because Drupal will resize the image and may provide a denser image for retina displays . If the automation makes your image look bad, contact us at firstname.lastname@example.org.
Our WordPress websites do not have as complex responsive images. You need to upload an optimized image that is the exact size you want for it to display.
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
If your images need additional editing, try Pixlr, http://pixlr.com/.
If you need really optimized images check out Compressor, https://compressor.io/ or ImageOptim, https://imageoptim.com/.
https://kraken.io/web-interface will optimize any image file type.
For more links, try this List of Online Image Editing Tools.
Google’s Image Publishing Guidelines includes optimization and other tips that will help get your images and Web pages ranked higher in search results. Also of interest, Ideal Image Sizes for Social Media.