Optimize Images

How to optimize your images for a fast and visually impactful website.

Why should I optimize my images?

Images are typically the largest files on any website. Unoptimized images slow down page loading, hurt your Google ranking, and frustrate visitors — especially on mobile connections. Properly optimized images load faster, improve user experience, and boost your SEO score.

Here is what image optimization achieves:

• Faster loading — optimized images can reduce page load time by 50% or more compared to uncompressed originals.
• Better SEO — Google uses page speed as a ranking factor. Faster pages rank higher.
• Lower bandwidth — smaller files mean less data transfer, which matters for visitors on metered connections.
• Improved Core Web Vitals — Largest Contentful Paint (LCP), one of Google's key performance metrics, is directly impacted by image size.

What are the best image formats for the web?

Different image formats serve different purposes. Choosing the right format ensures the best balance between quality and file size.

• WebP — the recommended format for most web images. WebP provides excellent compression with minimal quality loss. It is supported by all modern browsers and typically produces files 25–35% smaller than JPEG at the same quality.
• JPEG — ideal for photographs and images with many colors. JPEG uses lossy compression, meaning some quality is sacrificed for smaller file sizes. Best for photos of people, products, and landscapes.
• PNG — best for images that require transparency (logos, icons, graphics with transparent backgrounds). PNG uses lossless compression, so files tend to be larger than JPEG or WebP.
• SVG — perfect for logos, icons, and simple graphics. SVG files are vector-based, meaning they scale to any size without losing quality. They are extremely lightweight.
• AVIF — a newer format offering even better compression than WebP. Browser support is growing but not yet universal. Madra uses AVIF where supported and falls back to WebP or JPEG for older browsers.

What are the recommended image sizes?

Using the right dimensions prevents the browser from downloading unnecessarily large files. Here are the recommended sizes for common elements on a Madra website:

These are guidelines, not strict requirements. If you provide images that exceed these recommendations, our system will resize and compress them for you.

Does Madra optimize images automatically?

Yes. Every image on your Madra website goes through an automatic optimization pipeline. This process runs behind the scenes and requires no action from you.

Here is what happens automatically:

• Format conversion — images are converted to WebP (with JPEG/PNG fallbacks for older browsers) for optimal compression.
• Responsive sizing — multiple versions of each image are generated at different resolutions. The browser loads the version that best matches the visitor's screen size.
• Compression — images are compressed to reduce file size while maintaining visual quality. The compression level is tuned for each image type.
• Lazy loading — images below the fold (not visible when the page first loads) are loaded only when the visitor scrolls near them. This speeds up the initial page load.
• Alt text — every image includes a descriptive alt attribute for accessibility and SEO. These are generated during site creation and can be customized on request.

How do I upload new images to my site?

If you want to replace an existing image or add new ones, you have two options: