Web media
for the
modern web.

WebP is the best all-round image format for modern websites. It delivers dramatically smaller files than JPEG and PNG while supporting transparency and animation. AVIF can compress further, but encoding support is less consistent across browsers. Use JPEG only when you need maximum legacy compatibility for photographs.

JPEG is universal but inefficient. WebP offers roughly 25–35% smaller files than JPEG at equivalent quality, with transparency support. AVIF can be 20% smaller still than WebP, but encoding is slower and not every browser can encode it. For most sites, WebP is the pragmatic default; offer AVIF as a progressive enhancement via the <picture> element.

Match the display size, not the source size. Full-width hero images rarely need to exceed 1920px wide. Content images in article bodies are usually fine at 1200px. Card and grid images work well at 800px, and thumbnails at 480px. Never serve a 4000px photo for a 400px display slot.

Hero images are the largest above-the-fold asset, so they dominate perceived load speed. Export at 1920px wide, WebP, quality 80–82. Use the Hero Image preset in Optimeaux. Consider a responsive srcset so mobile devices download a smaller variant.

Serve different image sizes to different screens using srcset and the <picture> element. Optimeaux's Responsive Image Kit generates 480, 768, 1200, 1600, and 1920px variants and produces a ready-to-paste HTML snippet — only creating sizes smaller than your original, never upscaling.

Aim for content images under 200KB and hero images under 500KB where quality allows. The exact number depends on dimensions and detail, but the principle is constant: every byte must earn its place. Optimeaux shows before/after sizes and total savings so you can decide.

Background video should be muted, short, and small. Use H.264 MP4 with yuv420p pixel format, fast-start metadata, 30fps or lower, and audio removed. Cap resolution at 1920×1080 for desktop and 1280×720 for mobile. The Background Loop and Mobile Background presets in Optimeaux apply all of this automatically.

4K video is almost never justified for web. Most visitors watch on screens that display 1080p or less, and 4K files are 3–4× larger, crushing load time and data plans. Use 1080p for hero video and 720p for mobile. Reserve 4K for explicit 'watch in 4K' user choice.

Every extra kilobyte adds download time, parse time, and memory cost — especially on mobile networks. Large images are the single biggest cause of slow pages and poor Core Web Vitals (LCP). Shrinking media is the highest-ROI performance work you can do.

A poster image is the still frame shown before a video plays. Without one, the browser shows a blank box or has to download video data just to render a thumbnail. Generate a WebP poster at roughly 1280px wide from ~1 second into the video. Optimeaux's poster generator does this locally.

The +faststart flag moves the moov atom to the front of an MP4 so the browser can begin playback before the whole file downloads. Without it, the browser must download the entire file (or seek to the end) first. Optimeaux applies +faststart to all MP4 output automatically.

Descriptive, lowercase, hyphen-separated filenames improve SEO and maintainability. Rename IMG_7281.JPG to anchorage-luxury-home-01.webp in bulk. Optimeaux's Bulk Rename Studio handles base names, prefixes, suffixes, search-and-replace, auto-numbering with padding, and SEO-safe cleaning — with a live preview.

Search engines read filenames. Use descriptive keywords separated by hyphens, lowercase, no special characters. 'denali-lodge-exterior.webp' beats 'IMG_7281.webp'. Always include meaningful alt text too — filenames are a small but real ranking signal.

Mobile users are on slower networks and pay for data. Serve smaller images via responsive srcset, cap video at 720p, and prefer WebP. Optimeaux's Mobile preset targets 768px width and the Mobile Background preset targets 720p video.