Skip to main content
D
defaultoiiey0nok5uh
Participant
August 21, 2021
Question

How can I maintain the exact same colors when exporting a jpeg?

  • August 21, 2021
  • 1 reply
  • 3430 views

Hi,

 

I’m having an issue with Photoshop when I’m exporting jpegs from PSDs. 

 

I have several PSD files with paintings imposed digitally on a “wall” that I’ve created out of a layer using the color #f9f6f6. 

 

When I export the jpegs, I’m checking them in photoshop afterwards and I’m noticing that the color of the wall has changed to either #faf6f5 or #faf6f7. Not only are these colors different tones to the wall layer in my PSD files, they are slightly (but noticeably) different from each other as well - one looks a couple of shades more pink, which isn’t ideal when I’m trying to keep things consistent.

 

I’ve set the document profile in the bottom left corner to sRGB IEC61966-2.1 (8bpc) and when I export as a jpeg I’ve tried having “convert to sRGB” and “Embed color profile” both checked and unchecked, and it doesn’t make any difference.

 

Under the mode settings I have RGB color and 8-bit selected.

 

Is there any way I can prevent the colors from changing? I should probably mention that these jpegs are intended for web use.

    1 reply

    T
    Test Screen Name
    Legend
    August 21, 2021

    You may have heard people describe JPEG as "lossy". Every time you save or open a JPEG it is changed, so JPEGs should never be edited more than once, as the damage gets worse and worse.

     

    Why? Because JPEG is designed to make very small files; it does this by changing and compromising the exact colours. Yes, it deliberately changes the colours. No, it cannot be switched off. Only reduced by choosing the higher JPEG quality settings. You don't mention your JPEG quality settings at all, so it's possible you aren't bothering to set them at all and they may be low. But even at the highest quality, expect some change. The changes you mention are moving just one colour value, and are extremely close - do you need help understand what the numbers in a hex code mean?

      D
      defaultoiiey0nok5uhAuthor
      Participant
      August 21, 2021

      Hi there, thanks so much for your quick reply! You're right, I forgot to mention the quality settings - I've been saving them at reasonably high quality, but some compression was needed given that they are for a website, so I saved them at 1200px width and set the quality so that the file size was around 350kb. 

       

      As for understanding hex color codes, any advice you can give me would be much appreciated. Maybe there is a way of setting the color in the PSD file at a different code so that when I export the jpegs, the color ends up being closer to what I originally intended? 🤔 🤔

      D
      defaultoiiey0nok5uhAuthor
      Participant
      August 21, 2021

      As Test Screen Name says - welcome to jpeg compression.

       

      I did some testing, and you'll always get these small shifts. It will be easier to see what's going on if you look at the RGB numbers instead of hex. Hexadecimal is just base 16 notation instead of base 10 notation. They are the same numbers. You may get a red jump from 249 to 250, a blue jump from 246 to 245, and so on.

       

      Jpeg compresses the color component more aggressively than the luminance component. So the color snaps into discrete "slots". In this case your original color is outside these slots. It's pretty unpredictable and if you need a perfect numerical match it may take a lot of trial and error.

       

      The only way to get closer is to dial down the compression (increase quality). But make no mistake, there is no such thing as "full quality" jpeg - there's always compression, even at "max" quality (which is very far from max).

       

      In Save For Web there is an "optimized" checkbox, which supposedly pushes color compression further. You could experiment a bit with that off and on, but I don't know how much effect it has.


      Thank you, that's very helpful 🙂. I will have a play around in photoshop and see how close I can get it. 

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices