Standard scope
This standard applies to:
- pennmedicine.org
- All Penn Medicine websites
- Penn Medicine mobile applications
Overview
Image optimization includes resizing, changing formats, compressing, and adjusting resolution to achieve an acceptable image quality with the smallest file size. Image quality and size have a direct impact on the following web performance success criteria:
- User engagement and conversion: When the size and quality of the image is optimized, the image enhances the user experience and reduces bounce rates.
- Search engine ranking: Optimized images improve page load speed to improve web page ranking.
Image file type
The format of an image affects everything from loading speeds to image quality. When optimizing images for the web, it’s important to find a balance between quality and file size, as both impact performance.
The following image filetypes are supported for use on Penn Medicine web and digital products:
- JPEG: Ideal for photographs or complex images with gradients. It offers good quality with smaller file sizes.
- PNG: Best for images requiring transparency or higher detail. Keep in mind that PNGs often have larger file sizes.
- GIF: Ideal for photographs and images with lots of detail and color. It reduces file size while keeping a decent quality, making it perfect for images that need visual clarity without slowing down your site.
- WebP: A modern alternative that supports both lossy and lossless compression, reducing file size without sacrificing quality. Newer formats like WebP offer better compression and quality ratios than older formats like JPEG or PNG. By converting images to WebP, you can reduce file sizes without compromising quality.
- SVG: Perfect for icons and graphics, as it’s scalable without quality loss.
Using the appropriate format for each image type helps balance quality and performance.
Image size
Attention to image size will help speed load time. Always resize images to match maximum display dimensions:
- Always check images for sharpness and never use blurry images. All images used in Sitecore for pennmedicine.org are loaded into Content Hub and should be at least 300 DPI for clarity and an optimal user experience.
- Use photo-editing tools to resize images before uploading. For those using Content Hub, do not resize the image before uploading as the image gets cropped automatically thorough renditions.
- Implement responsive design to serve appropriately sized images based on the user’s device. Note that for pennmedicine.org, Sitecore will automatically serve the appropriate image based on the user’s device type.
The following image size standards are specific to pennmedicine.org and follow industry standards. Learn more about each component in the Penn Medicine design system referenced below in the design standards section of these web standards.
Image Gallery
Hero-Shield
Hero-Image
Hero-Find a doctor
Hero-Campaign
Banner-ErrorMessage
Maps
Image-Gallery
Banner-ThankYou CardSet-GalleryListings
Vertical Card (Provider)
Search Results Articles
Location Accordion Items
Hero-Home
Hero-Campaigns
Banner-Page-Generic
Banner-ErrorMessage
News Hub Cards
Hero-Home
CardSet-GalleryListings
Hero-Article
Image-FullWidth
Image naming
Image naming is important for usability, accessibility, search engine optimization (SEO), content management and technical compliance. Reference the following guidance when naming images.
- Keep the image filenames relevant - Instead of generic, irrelevant image file names like “IMG0001.jpg” or “DSC002.jpg”, utilize descriptive file names using target keywords when applicable. The filename should clearly describe the image. Getty stock images should retain image number, for example "medical-journals-1296480132.jpg"
- Avoid “keyword stuffing” - Ensure your image names are natural, logical, and descriptive. They should reflect what the image depicts.
- Keep filenames short (≤ 5 words) - Drop “stop words.” Don't use prepositions (e.g., for, in) or definite articles (the word the).
- Use hyphens instead of underscores - Hyphens are preferred because they are more readable, more consistent, and more compatible with different platforms and systems. Don’t use spaces, underscores, or any other special characters.
- Use lowercase letters - Lowercase letters are easier to type, read, and remember, and they can prevent errors or inconsistencies that may arise from case-sensitive systems or browsers.
- Use a unique identifier for similar images - Everything after the fifth word can be identifying information for use by the developer or image owner. (e.g., serial number, date, resolution, photographer name, source)
Accessibility
Accessibility compliance is a requirement for healthcare organizations, with legal implications. When creating and adding images to a page, reference this guidance:
- Images with a lot of text are not compliant on pennmedicine.org
- Don’t use the same alt text more than once on any given page
- Additional image alt text guidelines specific to Penn Medicine are available in the accessibility standards of these web standards
Related resources
Penn Medicine Image Guidelines: Content Hub Image Guidance.pptx (requires VPN access)
Contact
For questions, please contact web-standards@pennmedicine.upenn.edu