The Best HDR File Types for WordPress

HDR content offers richer colour, brighter highlights and a more true-to-life viewing experience than conventional media can provide.

More devices than ever can produce and render HDR imagery, which makes now the best time to take advantage of this technology with your WordPress website.

Uploading a HDR photo from your smartphone, or a HDR image you’ve exported from Lightroom to your website will not look great!

This is because, by default, WordPress will:

• Resize your images
• Re-encode them
• Strip out or ignore HDR-specific data

In this guide, we’ll show you how to take care of that and walk you through which file types to choose to get the best compatibility, file size and colour space.

Why file type matters for HDR on WordPress

HDR is a fundamentally different way of storing and displaying visual data. Rendering correctly requires file types to support:

• High bit depth (10-bit+)
• Wide colour gamuts (Display-P3 / Rec.2020)
• Tone mapping or gain map support for SDR fallback

Without all of this, your imagery will be clamped down to SDR, losing the highlight detail and rich colour palette that gives HDR content its appeal.

There are many different file types that support these standards to some degree, so we’ll outline the strengths and weaknesses of each so you can choose the best file type for HDR on WordPress.

HDR format breakdown

AVIF and WordPress

AVIF is, at the time of writing, the most capable and forward looking image format for HDR delivery on the web and what we’d recommend you use for your WordPress websites. 

Key strengths of AVIF are:

• 10 bit colour support
• Wide gamut compatibility (P3 & Rec.2020)
• Excellent compression efficiency

These ingredients are a recipe for HDR success for your web pages. 12 bit colour support eliminates banding and perfectly preserves highlights.

Small file sizes coupled with compatibility with quality CDNs yields strong Core Web Vitals and fast load speeds.

AVIF was built with HDR support in mind but there are trade offs when it comes to exporting and delivering HDR AVIF images.

CLI tools like avifenc and libavif behave well when given the correct input, but popular GUI software like Photoshop and GIMP need plugins or extra work to properly and expose necessary export options for colour space, bit depth, and metadata.

JPEG and WordPress

The venerable image format has evolved far beyond its original design and now incorporates a degree of HDR support. 

This works by taking a base, SDR image and adding a HDR enhancement layer to the meta data called a gain map.

Gain maps allow the same image to display in HDR on supported screens and fall back cleanly on SDR displays.

This approach is the most consistent across devices and browsers, and tone mapping results are generally smooth. 

If you need guaranteed compatibility when working with mixed HDR and SDR audiences, then JPEG is a strong option.

JPEG is not without drawbacks.

It is less efficient than AVIF, meaning more megabytes for equivalent quality.

The export workflow, like with AVIF, is more complex than with regular JPEGs and, although results can look similar in practice, JPEG doesn’t offer the same true HDR data and colour precision of AVIF.

Artifacting and banding is unlikely, but possible and the P3 colour space is your ceiling, meaning the full range of rec 2020 can’t be used.

PNG and WordPress

At first glance PNG appears to be the ultimate HDR file type. The PNG specification was updated to the third edition in June 2025 and fully supports HDR. It can handle rec 2020 in 32 bit colour, exceeding AVIF.

Storing HDR data and delivering HDR images on the web are not the same thing.

PNG remains a single-layer image format and does not define how HDR content should be interpreted or adapted across different display types.

Unlike JPEG with gain maps, there is no mechanism to provide an SDR base image with an HDR enhancement layer, meaning there is no adaptive behaviour between HDR and SDR environments.

In practice, this means that even when a PNG contains HDR-related data, most browsers will render it using standard dynamic range behaviour, as there is no widely implemented pipeline to interpret and apply that data consistently.

Performance is another limiting factor. PNG’s lossless nature makes it excellent for preserving exact pixel data for vector based artwork, but inefficient for photographic content.

HDR images encoded as PNG quickly become large, often hundreds of megabytes, which has an enormous, negative impact on load times, Core Web Vitals and bandwidth consumption.

WebP and WordPress

WebP is a highly efficient web image format designed to support lossless compression, transparency, animation, embedded ICC colour profiles and Exif/XMP metadata.

These capabilities make it a very practical and well-rounded format for standard web imagery and is part of why WebP is so popular across WordPress websites.

If your goal is fast, efficient delivery of standard images across WordPress, WebP remains a sensible option. However, it is simply not the right format to lead with when the objective is HDR image delivery.

It does not define HDR signalling, gain maps, or a mechanism for adaptive SDR/HDR rendering. It can embed an ICC profile but if one is not present it’ll default to sRGB.

Without defining HDR signalling or adaptive rendering behaviour needed to make it a strong choice for HDR delivery on WordPress.

JPEG XL and WordPress (The format that should have been)

JPEG XL is one of the most technically advanced image formats available today and was designed as a universal successor to JPEG, PNG and  WebP.

It supports both lossy and lossless compression, high bit depth, wide colour gamuts, and HDR. Key strengths of JPEG XL are:

• High bit depth support (up to 32-bit per channel)
• Wide gamut and HDR compatibility (including PQ and HLG transfer functions)
• Exceptional compression efficiency across both lossy and lossless modes

These capabilities make JPEG XL uniquely well suited to HDR workflows. It is designed to handle high dynamic range imagery natively, with precise colour representation and smooth tonal transitions.

Its ability to work at very high bit depths allows it to avoid banding entirely and preserve subtle gradients and highlight detail in a way that few formats can match.

JPEG XL also introduces a number of features that are highly relevant to web delivery. Progressive decoding allows images to load in stages, improving perceived performance, while its ability to recompress existing JPEGs provides a practical upgrade path for existing image libraries.

In many respects, JPEG XL represents the most complete imaging format currently available. It combines the compatibility mindset of JPEG, the fidelity of PNG and the efficiency and HDR capability of newer formats.

Despite its technical strengths, JPEG XL faces significant challenges when it comes to real-world use on the web.

Browser support remains limited, with only partial adoption across the ecosystem. This lack of consistent support makes it difficult to recommend JPEG XL for production websites, as many users will not see the intended result.

Tooling and platform support are also still developing. While the format itself is mature, integration into common web workflows, content management systems and image pipelines is not yet at the level of AVIF or JPEG.

Within WordPress specifically, support for JPEG XL is minimal. Images may not display correctly across all environments and there is no native handling for responsive images or fallback behaviour.

HEIC and WordPress

HEIC is the most common real-world implementation of the High Efficiency Image File Format (HEIF) and is widely used by modern smartphones – particularly iPhones – to capture images.

While HEIF defines the container structure, HEIC typically refers to images encoded using HEVC within that container.

This distinction matters because HEIC is not a traditional single-layer image format. Instead, it is a flexible container capable of storing multiple representations of an image along with extensive metadata. This can include colour information, depth maps and, in some cases, additional data used to support HDR rendering.

HEIC offers significantly better compression than JPEG while maintaining comparable visual quality. For HDR workflows, HEIC is particularly strong at the point of capture.

Modern smartphones can use HEIC to store HDR images along with the additional data required to reproduce them correctly within supported environments.

Because these devices control the entire pipeline from capture through to display, they deliver impressive HDR results consistently.

This strength does not translate well to the web.

HEIC relies heavily on ecosystem support, and outside of Apple devices compatibility becomes inconsistent.

While the HEIF container is an open standard, the HEVC codec commonly used within HEIC is subject to licensing constraints and is not universally supported across browsers and platforms.

As a result, HEIC images are rarely delivered directly on the web. In most cases, they are converted during upload or sharing, typically into JPEG, which strips any HDR-related data making it unsuitable for direct HDR delivery on WordPress.

How to stop WordPress stripping HDR from your images

Uploading HDR images to WordPress without adjusting its default behaviour will almost always result in them being converted to SDR. To preserve HDR, you need to prevent WordPress from interfering with your original files.

Disable automatic image resizing

If you’re using software like Lightroom 

Add the following to your theme’s functions.php file:

add_filter('intermediate_image_sizes_advanced', '__return_empty_array');

This stops WordPress from generating resized versions of your images, which are the primary cause of HDR data being lost.

Full-size only

When inserting images into your posts or pages always select “Full Size”. This prevents pages from rendering WordPress-generated variants, ensuring the original HDR file is served to the browser.

Avoid plugins that reprocess images

Many optimisation plugins convert images to WebP and/or compress or re-encode the images you’ve uploaded. While useful for SDR workflows, these processes strip HDR data and reduce your images back to SDR.

If you’re working with HDR be sure to disable these conversions in the plugin settings.

Let your hosting handle performance

HDR images are larger and more complex than standard images, so delivery matters.

Rather than relying on WordPress to ‘optimise’ your images:

• Serve original assets that are optimised at export
• Use a CDN for fast, global delivery
• Leverage NGINX caching for performance

This allows you to preserve HDR quality and deliver blazing fast page load speeds.

Best practice workflow for HDR on WordPress

To get consistent HDR results, your workflow matters just as much as your file format. A reliable approach looks like this:

• Capture images in HDR (often HEIC on mobile devices)
• Convert to AVIF for primary delivery
• Use JPEG with gain maps where compatibility is critical
• Ensure correct colour space (Display-P3 or Rec.2020)
• Upload without allowing WordPress to resize or re-encode
• Deliver via CDN for performance

Each step in this pipeline needs to preserve HDR data. If any stage strips or alters that data, the final image will fall back to SDR.

Choosing the best HDR file type for WordPress

For most use cases, the best approach when deploying HDR content on WordPress websites is:

HDR is not something WordPress perfectly supports by default. Without the right file format and workflow, your images will be reduced to SDR before they ever reach your visitors. 

HDR images transform how your website looks, delivering richer colour, deeper contrast and a more immersive visual experience.

With a few simple steps to ensure everything is configured correctly your website will look better than ever.