ITU Docs

Media Management

published

Uploading images, supported formats, and how media is optimized and served

Uploading Images

You can upload images in the WordPress media library or directly within a block's image field. Supported formats:

  • JPEG (.jpg, .jpeg) — Best for photographs and complex images
  • PNG (.png) — Best for graphics, logos, and images with transparency
  • WebP (.webp) — Modern format with smaller file sizes, supported by all current browsers
  • SVG (.svg) — Vector graphics for icons and diagrams (used in limited contexts)

There is a file size limit per upload. Keep images under 10 MB before uploading. For best results, resize large photographs to a maximum width of 2400px before uploading — the system will generate smaller sizes automatically.

Automatic Optimization

When you upload an image, the system automatically:

  1. Generates responsive sourcesets — Multiple sizes are created (e.g., 480px, 768px, 1024px, 1440px, 2400px) so the browser loads the most appropriate size for each visitor's screen.
  2. Converts to modern formats — Images are served as WebP where supported, reducing file size by 25–35% compared to JPEG with no visible quality loss.
  3. Strips metadata — EXIF data and other metadata are removed to reduce file size and protect privacy.

How Images Are Served

Images flow through the Gateway API before reaching the frontend:

  1. Upload — You upload an image in the CMS media library.
  2. Gateway optimization — The Gateway processes the image, generates responsive sizes, and caches the result.
  3. CDN delivery — Optimized images are served from a CDN (Content Delivery Network) for fast loading worldwide.
  4. Responsive rendering — The Next.js frontend uses <picture> elements with srcset to load the best size for each visitor's device.

Use descriptive file names before uploading (e.g., itu-council-2025-group-photo.jpg instead of IMG_4382.jpg). This helps with organization and improves accessibility when the file name is used as a fallback for alt text.

Avoid uploading very large images (over 10 MB or over 5000px wide). While the system can handle them, it slows down processing and creates unnecessarily large source files in the media library.