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 density retina displays. An image that has more bytes than is necessary is a waste of precious load time!
On this page:
- Image Size Recommendations
- High Resolution Images for Retina Displays
- Text Overlay on Top of Images
- Images in the Content Management Systems
- Learn More
Learn more about general Image Editing and Troubleshooting. Don’t forget to include alternate text descriptions for all images!
Image Size Recommendations
When too large an image is included on a Web page load time of the page increases and there is even a risk that the image may not load on some devices.
100 KB is commonly the largest byte size needed for most images. Seriously!
High Density retina screens and a trend toward large hero images have resulted in an increase to the recommended byte size, but never more than 1 MB! Currently, with the wide variety of devices and breadth of connection speeds, used by the different targeted audiences of various types of organizations, the size recommendation may. Regardless, it is agreed that reducing page load time improves the overall user experience of a site.
Our Content Management Systems have limits set for the content you may upload but they far exceed the recommendation.
Test your content carefully. Do not create pages with load time barriers for visitors on slow connections or devices. On campus our download speed is far superior to the average in the United States so, at the very least, we recommend that you connect to your webpages from home and on a mobile device. Try out these tools to test the Web page size and speed.
High Resolution Images for Retina Displays
Contact us if you have a need to display high quality images for retina displays. Currently, high density displays are most common on smartphones. Fortunately quality difference is not as noticeable on a smartphone as it is on larger displays like tablets and laptops.
Text Overlay on Top of Images
Complying with color contrast requirements is difficult if the text is over an image. Please see instructions on the Use of Color & Contrast page.
Images in the Content Management Systems
Visit our instructions for Drupal websites. Drupal will save many versions of the image to optimize for responding to various device sizes. Follow the instructions to better anticipate the results.
Visit our instructions for WordPress websites. On our WordPress websites you must upload an pre-optimized image that is the exact size you want for it to display. See image size recommendations above.
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. Also of interest, Ideal Image Sizes for Social Media.
