{"id":476,"date":"2024-12-11T10:03:41","date_gmt":"2024-12-11T09:03:41","guid":{"rendered":"http:\/\/bluekea.com\/blog\/?p=476"},"modified":"2024-12-11T10:09:56","modified_gmt":"2024-12-11T09:09:56","slug":"color-space-for-web-srgb-vs-adobergb","status":"publish","type":"post","link":"https:\/\/bluekea.com\/en\/blog\/digital-photography-techniques\/color-space-for-web-srgb-vs-adobergb","title":{"rendered":"What color space to use for web photography: sRGB or AdobeRGB"},"content":{"rendered":"\n<p>Sometimes we upload a photo to a website or social media, and we\u2019re surprised to see that the colors look very different depending on the device or, more precisely, the browser we\u2019re using at the moment. Usually, there\u2019s a loss of saturation and a shift in color and contrast. In these cases, the number one suspect is always the color space (or color profile).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Quick answer: sRGB<\/strong><\/h2>\n\n\n\n<p>Work in RAW, AdobeRGB, or another similar space, and when saving the photo as a JPG for the web, choose sRGB. If you\u2019re using Adobe software, follow these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Photoshop<\/strong>: File \/ Export \/ Save for Web, check <strong>Convert to sRGB<\/strong>.<\/li>\n\n\n\n<li><strong>Lightroom<\/strong>: Export option, in the color space box, select <strong>sRGB<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>Or the equivalent option in your regular software. Let\u2019s take a closer look at the topic.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is the color space of an image?<\/h2>\n\n\n\n<p>Without getting into complicated concepts, the color space is how the colors are encoded within a digital image file. Depending on the color space, the image can contain a certain number of colors. Some spaces allow for more colors than others.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why do colors look different in different browsers?<\/h2>\n\n\n\n<p>Any software that works with images, including a browser, must interpret how the colors are stored within an image file to display it on the screen. Some browsers don\u2019t perform color management, meaning they don\u2019t take the image\u2019s color space into account when displaying it, and they use sRGB by default.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1525\" src=\"https:\/\/bluekea.loc\/en\/blog\/wp-content\/uploads\/2022\/01\/Captura-de-pantalla-2022-01-27-a-las-17.55.15-scaled-1.jpg\" alt=\"Comparaci\u00f3n de una foto en espacio de color sRGB frente a Adobe RGB\" class=\"wp-image-5861\" title=\"med-13-rgb\" srcset=\"https:\/\/bluekea.com\/blog_en\/wp-content\/uploads\/2022\/01\/Captura-de-pantalla-2022-01-27-a-las-17.55.15-scaled-1.jpg 2048w, https:\/\/bluekea.com\/blog_en\/wp-content\/uploads\/2022\/01\/Captura-de-pantalla-2022-01-27-a-las-17.55.15-scaled-1-300x223.jpg 300w, https:\/\/bluekea.com\/blog_en\/wp-content\/uploads\/2022\/01\/Captura-de-pantalla-2022-01-27-a-las-17.55.15-scaled-1-1024x763.jpg 1024w, https:\/\/bluekea.com\/blog_en\/wp-content\/uploads\/2022\/01\/Captura-de-pantalla-2022-01-27-a-las-17.55.15-scaled-1-768x572.jpg 768w, https:\/\/bluekea.com\/blog_en\/wp-content\/uploads\/2022\/01\/Captura-de-pantalla-2022-01-27-a-las-17.55.15-scaled-1-1536x1144.jpg 1536w, https:\/\/bluekea.com\/blog_en\/wp-content\/uploads\/2022\/01\/Captura-de-pantalla-2022-01-27-a-las-17.55.15-scaled-1-900x670.jpg 900w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><figcaption class=\"wp-element-caption\">A photo on the web. Left: sRGB &#8211; Right: Adobe RGB<\/figcaption><\/figure>\n\n\n\n<p>The result of displaying an image encoded as Adobe RGB (or another color space) as sRGB is a significant color shift\u2014definitely worse, as seen in the previous example.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What\u2019s the difference between sRGB and Adobe RGB \/ ProPhoto RGB?<\/h2>\n\n\n\n<p>Adobe RGB\u2019s color gamut is wider, so it\u2019s generally recommended to work with images in Adobe RGB or other even larger spaces like ProPhoto RGB, which contain the maximum amount of colors and nuances possible.<\/p>\n\n\n\n<p>However, sRGB is a more universal format, and as such, an image in sRGB will appear with nearly the same colors across all browsers, making sRGB the ideal space for the web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recommended workflow: Shoot in RAW, edit, and choose the color space at the end<\/h2>\n\n\n\n<p>In digital photography, it\u2019s best to always shoot in RAW, the format that comes directly from the camera\u2019s sensor. Its color space is the largest possible for an image captured with that camera because it hasn\u2019t been converted or altered yet. Almost all professional and advanced amateur photographers shoot in RAW.<\/p>\n\n\n\n<p>The advantage of RAW is that we can do digital processing in software like Lightroom on the file and choose the color space when exporting the image and converting it to JPG or another format depending on how the image will be used.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>This article was first published in 2011 and was reviewed and updated in January 2022 and December 2024.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes we upload a photo to a website or social media, and we\u2019re surprised to see that the colors look very different depending on the device or, more precisely, the browser we\u2019re using at the moment. Usually, there\u2019s a loss of saturation and a shift in color and contrast. In these cases, the number one suspect is always the color space (or color profile). <a href=\"https:\/\/bluekea.com\/en\/blog\/digital-photography-techniques\/color-space-for-web-srgb-vs-adobergb\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":5861,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-photography-techniques"],"_links":{"self":[{"href":"https:\/\/bluekea.com\/en\/blog\/wp-json\/wp\/v2\/posts\/476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluekea.com\/en\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluekea.com\/en\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluekea.com\/en\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluekea.com\/en\/blog\/wp-json\/wp\/v2\/comments?post=476"}],"version-history":[{"count":6,"href":"https:\/\/bluekea.com\/en\/blog\/wp-json\/wp\/v2\/posts\/476\/revisions"}],"predecessor-version":[{"id":6524,"href":"https:\/\/bluekea.com\/en\/blog\/wp-json\/wp\/v2\/posts\/476\/revisions\/6524"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bluekea.com\/en\/blog\/wp-json\/wp\/v2\/media\/5861"}],"wp:attachment":[{"href":"https:\/\/bluekea.com\/en\/blog\/wp-json\/wp\/v2\/media?parent=476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluekea.com\/en\/blog\/wp-json\/wp\/v2\/categories?post=476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluekea.com\/en\/blog\/wp-json\/wp\/v2\/tags?post=476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}