Build

Image Optimization

Best Practices

This guide provides Mizzou content editors with best practices for preparing images to use in Mizzou websites. Please be aware that older Mizzou theme versions may require adjustments from these guidelines; Digital Service will assist with those situations.

Select the right file format:

  • WebP: superior compression with high quality (preferred)
  • JPEG: best for photos and complex images when smaller file size is needed
  • PNG: use for transparency or simple/low‑color graphics
  • SVG: scalable for logos and icons (avoid complex raster images or filters)

Image dimensions and file size considerations:

  • Create images sized close to the largest display size they will be shown; image files used on WordPress and Drupal must not be larger than 1 MB. Your website documentation will include recommended image sizes and aspect ratios for websites built by Digital Service.
  • WordPress and Drupal each have preset capabilities to control images based upon screen sizes/responsive design, etc.; contact Digital Service for assistance.

Rename and organize files

  • Give files descriptive, hyphenated names using relevant keywords instead of generic names (for accessibility and SEO).
  • Organize images into logical folders by content type, page, or date to make management easier. WordPress and Drupal have media organization features built in; contact Digital Service for assistance.

Optimize source images before upload

  • Crop to remove unnecessary content and focus on subject.
  • Adjust exposure, contrast, and color balance so images look good without heavy client-side processing.
  • Use lossless or targeted lossy compression depending on required quality.

Compression and file-size reduction

Digital Service recommends using a service like Squoosh to easily and reliably prepare your image files for upload to WordPress and Drupal.

  1. Open Squoosh in a browser.
  2. Drag and drop your image file into the file area.
  3. Choose to compress the file to a WebP format and make sure the resulting file size is less than 1 MB.
  4. Click the download button to get the optimized file.
  5. Upload the optimized file into WordPress or Drupal.

Accessibility and SEO

  • Provide descriptive alt text for each image – write concise alt text that conveys the purpose or content of the image for screen-reader users.
  • Leave alt empty (alt=””) for purely decorative images.
  • Use structured filenames and captions when useful. Filenames and captions can help search engines and user understanding; ensure captions are meaningful and not duplicated alt text.

Testing and monitoring

  • Test across devices and browsers – verify responsive behavior, format fallbacks, and visual quality on different screen sizes and browsers.
  • Continuously iterate – Reevaluate quality vs. size choices periodically and after theme or layout changes to maintain optimal balance between aesthetics and speed.

Getting Help