I'm working on reducing the size of my dom content,

As an example, Amazon's current home page graphic is 1500x600px, while remaining only 88.8K (link) and shows very little jpg artifacting. How are they able to compress it so well? The best our team has been able to achieve in photoshop for a similarly sized graphic is ~200K.

  • I don't know what source file you have but try to make indexed picture (or save to PNG with limited colors) and then to jpg. – SZCZERZO KŁY Oct 17 '19 at 15:50
  • 1
    Without providing an image it's impossible to say, maybe yours has more colors and details. Also note that Photoshop uses not so smart conversion methods and there're solutions (tinyJPG for instance) that may make jpg files smaller while retaining better quality. – Sergey Kritskiy Oct 17 '19 at 16:03
  • That's a question for Amazon software engineers to answer. – Luciano Oct 18 '19 at 11:37
  • I'm voting to close this question as off-topic because this question cannot be meaningfully answered by anyone other than the people at Amazon who put up the graphic in question. – PieBie Oct 24 '19 at 12:34

JPG artifacts are most often noticeable at the edges of large areas containing similar color... there are very few such areas in your particular sample image.

However, there are some considerable artifacts.

enter image description here

What Amazon uses, I'm afraid would require Amazon to answer.

Ultimately, the quality of the final jpg depends highly upon the image itself and any setting used when saving.

The jpg format uses a lossy compression scheme. You should try and avoid ever saving a jpg as a jpg. Each subsequent save of a jpg as a jpg throws out more image data and further degrades any image - introducing more artifacts.

  • 1
    "depends highly upon the image itself" JPEG artifacts are very notiecable on solid color transitions. One (limited) way to mitigate this is by adding noise or "texture." In the example, the tablecloth looks like it had a pattern on it, and they may have added some sort of colored noise prior to compression. – Yorik Oct 17 '19 at 16:00
  • @Yorik, but noise increases file size significantly. – Wolff Oct 17 '19 at 16:15
  • Thanks for the tips. We're going to give some of these a shot. – Front_End_Dev Oct 17 '19 at 17:28
  • @Wolff that is not necessarily true. If I were to take a tablecloth texture and overlay with low opacity on a photo of glasses on a "blown out" white tablecloth, then jammed to compression down to its lowest setting, the resulting file size would be very similar (almost identical) to one without the texture but the artifacting would be masked somewhat and the halo effect of solid transitions would have less perceptual impact. – Yorik Oct 17 '19 at 17:37
  • and recall that my point is that the technique is for hiding extra compression. – Yorik Oct 17 '19 at 17:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.