Images
Optimize your images for the web and make them accessible.
Quick Reference for Images
- Technical Standards — Use high-resolution (ideally 1600px), properly scaled, optimized images under 1 MB to ensure clarity, consistency, and fast page loading.
- Accessibility & Placement — Use meaningful alt text, skip decorative images with empty alt, avoid complex images with text, and always lead with headings or text before placing images.
- Style & Branding — Use high-quality images, avoid prominent sub-branding, and follow copyright and licensing requirements.
Getting There
- Log into LibGuides https://usfca.libapps.com/libguides/.
- Select Content > Guides and click the Edit icon for the guide you want to update.
- Click the Add / Reorder button at the bottom of the box where you want to add an image.
- Select Rich Text/HTML from the dropdown menu.
- In the Add Rich Text/HTML window, use the built-in text editor to add and format your text.
- To insert an image, place the cursor where you want the image to go and click the Image button.
Technical Standards
High-quality, properly formatted images ensure your content looks professional and loads quickly across all devices. Following these technical specifications maintains performance standards while providing the best possible visual experience.
Image Quality & File Specifications
- Use high-resolution images at least 1600px wide — Images should maintain clarity on all screen sizes.
- Maintain 16:9 aspect ratio whenever possible — This image ratio aligns with institutional standards. Avoid stretched or distorted images.
- Choose the right file format — Select formats based on image type:
- JPEG for photographs
- PNG for graphics with transparency
- Optimize file size to under 1 MB — This helps avoid slow page loads.
- Use Red Ketchup to quickly edit and optimize images.
- Ensure images scale correctly — Do not set the Height and Width of images in the text editor. This ensures all images are responsive and adapt to different screen sizes.
- Use Red Ketchup to quickly scale images.
Springshare Documentation
Accessibility & Placement
Accessible images ensure all users, including those using screen readers, can fully engage with your content. Proper placement and descriptive alt text create a better experience for everyone and provide equivalent access to visual information.
Image Accessibility & Placement Best Practices
- Alt text should be meaningful — All informative images must include clear, concise, contextual alt text.
- Yes:
alt=“Students studying in the library’s reading room” - No:
alt=“image123.jpg”oralt=“banner”
- Yes:
- Use empty alt text for decorative images — Decorative images should be skipped by screen readers.
- Use an empty
alt=""attribute.
- Use an empty
- Avoid complex images with text — Do not use infographics, charts, maps, or custom banners with text overlays on guides.
- Alt text alone is not acceptable for complex images.
- Contact ERS if including a complex image is essential.
- Lead with text, not images — Always begin pages with a clear heading or introductory text before placing images.
- Do not place images at the very top of a page
- Hero images are an exception — Hero images are implemented as CSS background images and don't interfere with page structure.
- Hero images are only available on main library web pages, not standard research guides.
USFCA Web Accessibility Standards
Style & Branding
Consistent visual design across all LibGuides builds trust and helps users recognize they're on official library resources. Avoiding individual guide "sub-brands" creates a unified experience that strengthens institutional identity and prevents confusion.
Image Style & Branding Standards
- Maintain visual consistency — Use images that align with the look and feel of the library website.
- Avoid clip art, low-quality stock photos, and distracting animations.
- Avoid prominent sub-branding — Do not use images or other visual elements that create a separate or distinctive identity for an individual guide or group of guides (e.g., large stylized graphics, custom headers, logos, or similar treatments).
- Small, unobtrusive icons or thematic images/logos may be placed in the side column to visually connect guides that are part of a related topic or series, as long as they support the content and do not dominate the page.
- Follow copyright and licensing — Use only properly licensed or fair use/Creative Commons images.
- Always verify permissions before uploading.