0

I want to use this picture as the background of my website

background

Right now it is at 1040 x 660 and using JPEG compression at 70%. This seems to be same technique that Twitter is using for their homepage when you visit it signed out. This technique has gotten the image size down to about 180 KB which is acceptable to me. It's the same size as Twitter's.

However, I want to be able to provide even higher resolution versions of the image for high res screens such as my Macbook Pro Retina and iPad. I know I can do this with media queries but if the resolution goes up so does the size. Are there any compression technologies that would allow me to apply more or less compression to specific sections of an image? In this image, it would be idea to apply more compression to the out of focus sections behind the grill while leaving the asparagus and grill itself less compressed. Since the out of focus area is a large part of the image this should save a lot of space.

jophde
  • 444
  • 1
  • 5
  • 13
  • The way JPEG works, the out of focus parts of the image already compress to fewer bits than the parts in sharp focus. By applying more compression to them, you'll start to see block artifacts. – BitBank Sep 25 '13 at 17:35
  • Is there a way to make the out of focus area even more out of focus so that JPEG attacks them more or does it look about optimal? – jophde Sep 25 '13 at 17:50
  • Have you tried something like www.jpegmini.com ? – BitBank Sep 25 '13 at 18:55
  • 1
    A colleague wrote a [blog entry about using retina-resolution images with high compression](http://blogg.bouvet.no/2013/06/28/lettere-bilder-med-dobbel-opplosning/) (instead of normal res/low compression), and demonstrates that at the same file size, the quality is still comparable. Might contain some interesting techniques for you (the google translate version is readable in english :-)). – Harald K Sep 29 '13 at 08:24
  • That's exactly what I was looking for. If you make that link an answer I will accept it. It was definitely readable after it was translated. – jophde Sep 29 '13 at 15:07

1 Answers1

0

How are you saving your image? Are you doing this with File>Save As? If yes, give File>Save for Web and Devices a try. It gives you more control over the settings and allows you to compare different settings. I also have the feeling that this compression algorithm is a bit better.

Marjolein
  • 131
  • 1
  • 1
  • 5