{"id":16386,"date":"2025-08-26T07:45:25","date_gmt":"2025-08-26T06:45:25","guid":{"rendered":"https:\/\/www.20i.com\/blog\/?p=16386"},"modified":"2026-03-30T15:25:30","modified_gmt":"2026-03-30T14:25:30","slug":"hdr-on-wordpress","status":"publish","type":"post","link":"https:\/\/www.20i.com\/blog\/hdr-on-wordpress\/","title":{"rendered":"Unlock the Power of HDR on WordPress"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If you own a smart phone made in 2020 or later,\u00a0you\u2019re\u00a0equipped with a\u00a0camera\u00a0powerful enough to capture HDR\u00a0photos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HDR\u00a0images have brighter highlights, deeper shadows and a far richer range of colours compared to\u00a0conventional\u00a0digital images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default, WordPress\u00a0processes\u00a0and scales\u00a0down\u00a0any HDR\u00a0images\u00a0you upload, stripping\u00a0the\u00a0vibrancy from your visuals.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, we\u2019ll show you how to elevate the look and feel of your client\u2019s ecommerce, blog, and photography WordPress sites using HDR photography \u2013 creating a better visual experience that grabs attention.<\/p>\n\n\n\n<figure class=\"wp-block-table\">\n  <table class=\"has-fixed-layout\" style=\"table-layout: fixed; width: 100%;\">\n    <tbody>\n      <tr>\n        <td style=\"word-break: break-word; white-space: normal;\">\n          <strong>We strongly recommend viewing this article on a device with a HDR capable display.<\/strong>\n          &nbsp;&nbsp;Scan the QR code to access this page on your phone.&nbsp;\n        <\/td>\n        <td>\n          <img decoding=\"async\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/07\/QR-code-to-HDR-WordPress-blog.svg\" alt=\"QR code linking to the HDR in WordPress blog post\">\n    <\/tbody>\n  <\/table>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">HDR Adoption &amp; Market&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.statista.com\/statistics\/263437\/global-smartphone-sales-to-end-users-since-2007\/\" target=\"_blank\" rel=\"noreferrer noopener\">6 billion<\/a> smartphones, <a href=\"https:\/\/omdia.tech.informa.com\/pr\/2025\/jun\/omdia-forecasts-flat-tv-shipments-in-2025-but-mini-led-poised-for-explosive-growth-at-82point9-percent\" target=\"_blank\" rel=\"noreferrer noopener\">1 billion<\/a> TVs, and millions of tablets, laptops, and desktop displays can display HDR content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Android, iOS, Windows, MacOS and many Linux distros have native HDR support.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Industry giants Apple, Amazon, Alphabet, Meta, Netflix, Disney and ByteDance are all heavily invested in creating content that showcases the technology.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With so many devices and ecosystems able to take advantage of deep, inky blacks and searing, bright highlights; it\u2019s time to upgrade the browsing experience for your customers and users.<\/p>\n\n\n\n<div class=\"image-comparison-container\">\n  <div class=\"image-comparison\">\n    <img decoding=\"async\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-wordpress-man-overlooking-valley.avif\" alt=\"HDR Image\" class=\"image-bottom\" draggable=\"false\">\n    <img decoding=\"async\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/10\/DSC04300-CaiOverlooking-832x555.jpg.webp\" alt=\"Scaled Image\" class=\"image-top\" draggable=\"false\">\n    <div class=\"slider\" draggable=\"false\"><\/div>\n  <\/div>\n<\/div>\n\n<style>\n.image-comparison-container {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\n.image-comparison {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n  height: auto;\n}\n\n.image-bottom, .image-top {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n.image-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);\n}\n\n.slider {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 4px;\n  background: #fff;\n  cursor: ew-resize;\n  box-shadow: 0 0 5px rgba(0,0,0,0.5);\n}\n\n.slider::before {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 20px;\n  height: 20px;\n  background: #fff;\n  border-radius: 50%;\n  box-shadow: 0 0 5px rgba(0,0,0,0.5);\n}\n\n\/* Prevent user selection *\/\n.image-bottom, .image-top, .slider {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n\/* Remove focus outline *\/\n.slider:focus {\n  outline: none;\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const comparison = document.querySelector('.image-comparison');\n  const topImage = comparison.querySelector('.image-top');\n  const slider = comparison.querySelector('.slider');\n  let isDragging = false;\n\n  slider.addEventListener('mousedown', startDragging);\n  slider.addEventListener('touchstart', startDragging);\n\n  function startDragging(e) {\n    isDragging = true;\n    document.addEventListener('mousemove', moveSlider);\n    document.addEventListener('touchmove', moveSlider);\n    document.addEventListener('mouseup', stopDragging);\n    document.addEventListener('touchend', stopDragging);\n  }\n\n  function moveSlider(e) {\n    if (!isDragging) return;\n\n    const rect = comparison.getBoundingClientRect();\n    const offsetX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;\n    let percentage = ((offsetX - rect.left) \/ rect.width) * 100;\n\n    \/\/ Restrict slider movement within image bounds\n    percentage = Math.max(0, Math.min(100, percentage));\n\n    slider.style.left = `${percentage}%`;\n    topImage.style.clipPath = `polygon(0 0, ${percentage}% 0, ${percentage}% 100%, 0 100%)`;\n  }\n\n  function stopDragging() {\n    isDragging = false;\n    document.removeEventListener('mousemove', moveSlider);\n    document.removeEventListener('touchmove', moveSlider);\n    document.removeEventListener('mouseup', stopDragging);\n    document.removeEventListener('touchend', stopDragging);\n  }\n});\n<\/script>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">[<strong>SDR vs HDR side by side comparison<\/strong>]\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Brief High Dynamic Range Overview&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Most devices can take advantage of HDR, but what exactly is it?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2018High dynamic range\u2019 is the ratio between the darkest and brightest parts of a scene and is measured in <a href=\"https:\/\/photographylife.com\/what-are-exposure-stops-in-photography\" target=\"_blank\" rel=\"noreferrer noopener\">stops<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our eyes can discern up to 14 stops of dynamic range. High quality, non-HDR displays (SDR or Standard Dynamic Range) can show around 9 stops of range.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As each \u2018stop\u2019 is twice as much light as the last, the difference between the 9 stops of older displays and the 14 stops of your eyes is significant!<\/p>\n\n\n\n<div class=\"bar-chart-container\" style=\"max-width: 800px; margin: 20px auto; padding: 10px; position: relative; isolation: isolate;\">\n  <div class=\"bar-chart\" style=\"display: flex; align-items: flex-end; height: 450px; border-bottom: 2px solid #333; border-left: 2px solid #333; position: relative; box-sizing: border-box; padding-bottom: 10px;\">\n    <div class=\"bar\" style=\"height: 2px; min-height: 2px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">1<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 2px; min-height: 2px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">2<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 2px; min-height: 2px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">3<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 2px; min-height: 2px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">4<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 2px; min-height: 2px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">5<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 2px; min-height: 2px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">6<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 3.125px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">7<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 6.25px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">8<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 12.5px; background-color: #00B0F0; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">9<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 25px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">10<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 50px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">11<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 100px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">12<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 200px; background-color: #E97132; width: 6.67%; margin-right: 0.5%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">13<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 400px; background-color: #00B050; width: 6.67%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">14<\/span>\n    <\/div>\n  <\/div>\n  <div class=\"y-axis-label\" style=\"position: absolute; left: -10px; top: 50%; transform: rotate(-90deg); font-size: 14px;\">Brightness<\/div>\n  <div class=\"x-axis-label\" style=\"text-align: center; font-size: 14px; margin-top: 10px;\">Stops<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Modern HDR displays show around 12 stops, more closely matching the light and dark levels that human eyes can discern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This makes HDR images and video content appear much more striking and true-to-life when shown on HDR displays.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There is another aspect to HDR that improves the experience for content consumers: colour.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"640\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-photo-of-bod-in-matlock.avif\" alt=\"HDR photograph of restaurant at night time\" class=\"wp-image-17303\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-photo-of-bod-in-matlock.avif 960w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-photo-of-bod-in-matlock-300x200.avif 300w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-photo-of-bod-in-matlock-768x512.avif 768w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-photo-of-bod-in-matlock-400x267.avif 400w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-photo-of-bod-in-matlock-800x533.avif 800w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-photo-of-bod-in-matlock-832x555.avif 832w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-photo-of-bod-in-matlock-150x100.avif 150w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Colour Spaces &amp; Colour Gamuts&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The photos and videos you\u2019ve used on websites to this point fit within the SDR colour space known as <a href=\"https:\/\/www.color.org\/chardata\/rgb\/srgb.xalter\" target=\"_blank\" rel=\"noreferrer noopener\">sRGB<\/a>. This standard was introduced in 1999 as a refined version of the rec.709 standard for broadcast television.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">SDR displays show just over a third of the colours that our eyes are capable of seeing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The two main HDR colour gamuts, <a href=\"https:\/\/www.benq.com\/en-us\/business\/resource\/trends\/understanding-color-gamut.html\" target=\"_blank\" rel=\"noreferrer noopener\">P3 and rec.2020<\/a>, both get significantly closer to displaying the full range of colours we can see than SDR displays.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The P3 colour space shares the white point, gamma curve and blue primary colour of sRGB, but red and green extend further to better represent how our eyes see colour for a more immersive and vibrant experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The established standards for HDR video, Dolby Vision, HLG, HDR10 and HDR10+, all target the superior rec.2020 gamut which provides an even greater breadth of colour than P3.<\/p>\n\n\n\n<div class=\"bar-chart-container\" style=\"max-width: 600px; margin: 20px auto; padding: 10px; position: relative; isolation: isolate;\">\n  <div class=\"bar-chart\" style=\"display: flex; align-items: flex-end; height: 450px; border-bottom: 2px solid #333; border-left: 2px solid #333; position: relative; box-sizing: border-box; padding-bottom: 10px;\">\n    <div class=\"bar\" style=\"height: 400px; background-color: #00B050; width: 23%; margin-right: 2%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">Human eye<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 143.6px; background-color: #00B0F0; width: 23%; margin-right: 2%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">SDR (sRGB)<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 182px; background-color: #0070C0; width: 23%; margin-right: 2%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">HDR (P3)<\/span>\n    <\/div>\n    <div class=\"bar\" style=\"height: 303.2px; background-color: #002060; width: 23%; position: relative; text-align: center;\">\n      <span style=\"position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap;\">HDR (Rec. 2020)<\/span>\n    <\/div>\n  <\/div>\n  <div class=\"y-axis-label\" style=\"position: absolute; left: -30px; top: 50%; transform: rotate(-90deg); font-size: 14px;\">% CIE 1931<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HDR File Types &amp; Supported Browsers&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The streaming, social media and video gaming industries deliver HDR content to their users through established standards, but things are more fragmented when it comes to the web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are the browsers that support HDR content and file types:<\/p>\n\n\n\n<div style=\"overflow-x: auto;\">\n    <figure class=\"wp-block-table\">\n        <table class=\"has-fixed-layout\">\n            <thead>\n                <tr>\n                    <th class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(29, 164, 98, 0.11);\">Chrome<\/th>\n                    <th class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(251, 84, 43, 0.11);\">Brave<\/th>\n                    <th class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(0, 120, 215, 0.11);\">Edge<\/th>\n                    <th class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(255, 27, 45, 0.11);\">Opera<\/th>\n                    <th class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(15, 181, 238, 0.11);\">Safari<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" colspan=\"5\"><strong>Images<\/strong><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(29, 164, 98, 0.03);\">AVIF<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(251, 84, 43, 0.03);\">AVIF<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(0, 120, 215, 0.03);\">AVIF<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(255, 27, 45, 0.03);\">AVIF<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(15, 181, 238, 0.03);\">AVIF<\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(29, 164, 98, 0.03);\">PNG<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(251, 84, 43, 0.03);\">PNG<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(0, 120, 215, 0.03);\">PNG<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(255, 27, 45, 0.03);\">PNG<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(15, 181, 238, 0.03);\">PNG<\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(29, 164, 98, 0.03);\">JPG<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(251, 84, 43, 0.03);\">JPG<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(0, 120, 215, 0.03);\">JPG<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(255, 27, 45, 0.03);\">JPG<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(15, 181, 238, 0.03);\">JPG<\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(29, 164, 98, 0.03);\"><span style=\"color: #FF0000;\">HEIF<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(251, 84, 43, 0.03);\"><span style=\"color: #FF0000;\">HEIF<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(0, 120, 215, 0.03);\"><span style=\"color: #FF0000;\">HEIF<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(255, 27, 45, 0.03);\"><span style=\"color: #FF0000;\">HEIF<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(15, 181, 238, 0.03);\">HEIF<\/span><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(29, 164, 98, 0.03);\"><span style=\"color: #FF0000;\">HEIC<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(251, 84, 43, 0.03);\"><span style=\"color: #FF0000;\">HEIC<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(0, 120, 215, 0.03);\"><span style=\"color: #FF0000;\">HEIC<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(255, 27, 45, 0.03);\"><span style=\"color: #FF0000;\">HEIC<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(15, 181, 238, 0.03);\">HEIC<\/span><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" colspan=\"5\"><strong>Video<\/strong><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(29, 164, 98, 0.03);\">MP4<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(251, 84, 43, 0.03);\">MP4<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(0, 120, 215, 0.03);\">MP4<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(255, 27, 45, 0.03);\">MP4<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(15, 181, 238, 0.03);\">MP4<\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(29, 164, 98, 0.03);\"><span style=\"color: #FF0000;\">MOV<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(251, 84, 43, 0.03);\"><span style=\"color: #FF0000;\">MOV<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(0, 120, 215, 0.03);\"><span style=\"color: #FF0000;\">MOV<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(255, 27, 45, 0.03);\"><span style=\"color: #FF0000;\">MOV<\/span><\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(15, 181, 238, 0.03);\">MOV<\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n    <\/figure>\n<\/div>\n<style>\n    .wp-block-table table {\n        width: 100%;\n        max-width: 800px;\n        margin: 0 auto;\n        border-collapse: collapse;\n    }\n    .wp-block-table td, .wp-block-table th {\n        padding: 10px;\n        border: 1px solid #333;\n    }\n    .has-text-align-center {\n        text-align: center;\n    }\n    @media (max-width: 600px) {\n        .wp-block-table td, .wp-block-table th {\n            padding: 5px;\n            font-size: 12px;\n        }\n    }\n<\/style>\n\n\n\n<p class=\"wp-block-paragraph\"><em>At the time of writing, Mozilla is working on HDR support for their Firefox browser<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We recommend avoiding HEIF, HEIC and MOV files on your website to ensure compatibility with non-Apple users.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"640\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-image-of-guitar-bench.avif\" alt=\"HDR image of a guitar technician working on a Gibson Les Paul\" class=\"wp-image-17305\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-image-of-guitar-bench.avif 960w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-image-of-guitar-bench-300x200.avif 300w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-image-of-guitar-bench-768x512.avif 768w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-image-of-guitar-bench-400x267.avif 400w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-image-of-guitar-bench-800x533.avif 800w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-image-of-guitar-bench-832x555.avif 832w, https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/hdr-image-of-guitar-bench-150x100.avif 150w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress and HDR&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress is compatible with these image and video file types that support HDR content:<\/p>\n\n\n\n<div style=\"overflow-x: auto;\">\n    <figure class=\"wp-block-table\">\n        <table class=\"has-fixed-layout\">\n            <tbody>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" colspan=\"30\"><strong>Images<\/strong><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(29, 164, 98, 0.11);\" colspan=\"6\">AVIF<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(251, 84, 43, 0.11);\" colspan=\"6\">PNG<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(0, 120, 215, 0.11);\" colspan=\"6\">JPG<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(255, 27, 45, 0.11);\" colspan=\"6\">HEIF<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(15, 181, 238, 0.11);\" colspan=\"6\">HEIC<\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" colspan=\"30\"><strong>Video<\/strong><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(242, 106, 39, 0.11);\" colspan=\"15\">MP4<\/td>\n                    <td class=\"has-text-align-center\" data-align=\"center\" style=\"background-color: rgba(252, 203, 0, 0.11);\" colspan=\"15\">MOV<\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n    <\/figure>\n<\/div>\n<style>\n    .wp-block-table table {\n        width: 100%;\n        max-width: 800px;\n        margin: 0 auto;\n        border-collapse: collapse;\n    }\n    .wp-block-table td, .wp-block-table th {\n        padding: 10px;\n        border: 1px solid #333;\n    }\n    .has-text-align-center {\n        text-align: center;\n    }\n    @media (max-width: 600px) {\n        .wp-block-table td, .wp-block-table th {\n            padding: 5px;\n            font-size: 12px;\n        }\n    }\n<\/style>\n\n\n\n<p class=\"wp-block-paragraph\">If you sign into your WordPress site using your phone and upload a HDR image in one of the supported file types &#8211; you\u2019ll be disappointed by the results.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is because WordPress takes the images you upload and creates scaled down versions, stripping out the HDR metadata in the process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ll see \u201c<strong>-scaled<\/strong>\u201d&nbsp;added before the end of the filename in the Media Library, which confirms the default behaviour is active.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are two main ways to address this:\u00a0<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Change your theme&#8217;s function .php<\/strong>&nbsp;<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">One is to change your theme\u2019s functions.php file and add the following code after the opening PHP tag and before any closing tags or return statements:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Disable automatic image scaling in WordPress 5.3+&nbsp;\n\nadd_filter( 'big_image_size_threshold', '__return_false' );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This will stop WordPress from wrecking your images, but you\u2019ll need to be mindful of getting your images down to a reasonable file size <em>before<\/em> uploading so you don\u2019t slow your page load speeds and potentially degrade the user experience.<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Manually edit images<\/strong>&nbsp;<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The other way is to upload your images and put them on your pages or posts as normal, then use the \u201cEdit as HTML\u201d feature to strip the \u201c<strong>-scaled<\/strong>\u201d part out.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a238bb95d12a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a238bb95d12a\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1440\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/08\/HDR-and-WordPress-Edit-as-HTML.gif\" alt=\"GIF showing the steps required to remove the -scaled part of a file that WordPress autogenerates.\" class=\"wp-image-16457\" style=\"border: 1px solid #EBEBEB\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Having to repeat this process will eat up a lot of time for each image, so we\u2019d recommend the previous method if you plan to rollout HDR content at scale.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HDR Business Opportunities&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">99%+ of the web uses SDR imagery. Showcasing HDR content will make you stand out: it\u2019s a visible improvement that clients can immediately see the added value of.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HDR photography, WordPress integration and image optimisation are ideal as premium revenue generators to add to your list of services that your customers in the ecommerce, hospitality, real estate and other visual industries will benefit from.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Support for HDR is growing on the hardware and software side, and adoption rates increase with every modern mobile phone sale.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Building HDR-ready websites ensures your client\u2019s sites look their best now, and into the future.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our <a href=\"https:\/\/www.20i.com\/cdn\" target=\"_blank\" rel=\"noreferrer noopener\">CDN<\/a> is designed to handle HDR content with ease, so your clients will enjoy the same blazing fast speeds that they know and love while dazzling their users with cutting edge content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full no-srcset\">\n    <img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"640\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/10\/DSC09391-MadHatterMatlock.avif\"\n         alt=\"HDR image of the Mad Hatter bar at night time\"\n         class=\"wp-image-17306\"\n         srcset=\"\"\n         sizes=\"auto, \">\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Final thoughts&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The web is well on the way to becoming a brighter and more colourful place as HDR adoption continues across the hardware and software of mobile, tablet and desktops platforms.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The process of capturing, editing, exporting and uploading HDR content to websites is a little more complex than a conventional SDR workflow; but the results are stunning, and truly stand out.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Will you be providing HDR content for your customers or on your own website? <a href=\"#comments\">Leave a comment below<\/a> and share your thoughts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you liked this article, check out our <a href=\"https:\/\/www.20i.com\/blog\/wefco-photography\/\" target=\"_blank\" rel=\"noreferrer noopener\">WEFCo photography guide<\/a>.<\/p>\n\n\n<div class='code-block code-block-4' style='margin: 8px 0; clear: both;'>\n<hr>\n<br \/><a href=\"https:\/\/www.20i.com\/wordpress-hosting\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2026\/03\/Blog-Ad-WordPress-1200x625-1.png\" loading=\"lazy\" alt=\"Managed WordPress Hosting\"><\/a><\/div>\n\n","protected":false},"excerpt":{"rendered":"Make your WordPress site shine with HDR photos &#038; videos. Supported file formats, browsers, and everything you need to impress your visitors.","protected":false},"author":36,"featured_media":16652,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"ub_ctt_via":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[60,47,293],"tags":[57,70,76],"class_list":["post-16386","post","type-post","status-publish","format-standard","has-post-thumbnail","category-web-design-dev","category-web-hosting","category-wordpress","tag-web-design","tag-web-hosting","tag-wordpress","cs-entry"],"featured_image_src":"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/08\/HDR-on-WP.png","author_info":{"display_name":"Joseph Simpson","author_link":"https:\/\/www.20i.com\/blog\/author\/joseph20i\/"},"_links":{"self":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/16386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/comments?post=16386"}],"version-history":[{"count":78,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/16386\/revisions"}],"predecessor-version":[{"id":19086,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/16386\/revisions\/19086"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media\/16652"}],"wp:attachment":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media?parent=16386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/categories?post=16386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/tags?post=16386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}