It’s that time of year again. New residents and fellows will soon be pouring in, and so will their photos. Unless they are optimally sized first, uploading large amounts of new images to your Media Library can really slow down your website. Our goal is to help make your site as clean and efficient as possible, which is why we have created some tips for resizing and optimizing large images into images your site will love.
Think of your website as an elevator. Just like elevators, websites have a weight limit, but rather than pounds its pixels. An elevator will still work whether it has 1 person or 15 but in order to lift that many people, it will have to work much harder and may be slower. This same idea applies to websites. If an image is 600KB it’s going to work slower than if the image is 50 KB.
Making these changes to image sizes can seem confusing at first, which is why we have created these guidelines. Down below we have tips focusing on profile images, however, these tips can help with editing all sizes. To see additional sizing for other image types please view our Style Guide.
Resizing and Optimizing Using Photoshop
1) Instead of clicking Save
- In the File menu
- Hover over Export
- Select Save for Web (Legacy)
- On the screen that pops up
- check the image size to make sure it matches the desired size
- Check that JPEG is selected as the file format
- Click Save
2) Creating Optimal Image Sizing
- Portrait Images:
- Our team has found that the best size is 240 x 325 pixels. After uploading to the Media Library you will be able to choose multiple preset sizes such as Full, Medium, Thumbnail, and Variable Width.
- Square Images:
- 250 x 250 pixels will be the best size for this type of image. When resizing in Photoshop make sure to choose the Square option in the Crop Tool. In the Media Library, Medium and 150 x 150 are the best options.
Free Online Image Editors
Not everyone has access to photoshop, so we’ve created an entire page with step-by-step instructions and free online photo editing/optimization tools.
Accessible Photos
Accessible images for screen readers is important. Each image should either have a Caption or Alt Text. A Caption will show up underneath the image, while an Alt Text will be hidden from view, but both are read by a screen reader. Alt Text is used to explain what is going on in an image, for example, the image above’s description is “Dermatology residents studying a case.” Each image used on your website should include either a Caption or Alt Text.
Contact Us
Overall these tips will help images on your site to be more mobile friendly and display well on all web browsers. However, if you run into a problem while editing or uploading images please contact us and a member from our web team will be happy to help.
Thanks!
Kathleen Mueller
Email
Tel: 434.297.7580
Alan Farr
Email
Tel: 434.924.9066