26

I use following .htaccess to set gzip compression:

AddOutputFilterByType DEFLATE text/html image/png image/jpeg text/css text/javascript

Please check this url: http://www.coinex.com/cn/silver_panda/proof/china_1984_27_gram_silver_panda_coin/

the gzip compression works for html, css, js and jpg, but not working for png (really amazing..)

Mark Ma
  • 1,342
  • 3
  • 19
  • 35

4 Answers4

43

PNG is already a compressed data format. Compressing it with GZIP is not likely to decrease the size, and can in fact make it larger.

I'm surprised you're seeing benefits when GZIP-ing JPGs, as they are also compressed.

See here for Google's tips on using GZIP. They recommend not applying it to images.

Matthias Braun
  • 32,039
  • 22
  • 142
  • 171
Rob Trickey
  • 1,301
  • 11
  • 13
16

The PNG image format already uses deflate compression internally. So you will not usually see any appreciable decrease in transmitted size by using HTTP compression on top of that. Therefore you should remove image/png from the list you mentioned to avoid wasting CPU cycles at the server and client on a redundant compression step.

tialaramex
  • 3,761
  • 1
  • 21
  • 23
8

If you want to make your PNGs smaller use https://tinypng.com/ or other png optimizer. Yes, it fully supports alpha channel too.

Pawel
  • 16,093
  • 5
  • 70
  • 73
  • just reduced a 14k bytes png down to 540 bytes using tinypng.com !! – user2677034 Jan 29 '18 at 00:10
  • It supports what is effectively a 1 bit alpha channel - so either 100% transparent or 100% opaque. This can give horrible anti aliasing on certain backgrounds, but if you know the background color it will be sitting on you can adjust the edge of the image to blend well. – Simon_Weaver Jun 06 '18 at 21:18
  • @Simon_Weaver sorry but you're wrong. There is gradual alpha channel on optimized images from this website. I don't know where did you get this information but you can find out yourself by optimizing this image https://commons.wikimedia.org/wiki/File:Wilber-huge-alpha.png – Pawel Jun 07 '18 at 09:39
  • @Pawel I hope I am wrong :) but any time I've ever used tinypng it's made sharp edges. Will try this when I wake up. – Simon_Weaver Jun 07 '18 at 09:41
  • @Pawel thanks for the correction. Not sure what I must have done before. I know Photoshop does what I was saying (and you have to use the matte feature), but then why bother with Photoshop if it doesn't do full alpha. – Simon_Weaver Jun 07 '18 at 18:48
  • Does tinypng have as library for using on the client side? – rraallvv Aug 19 '18 at 16:08
  • 2
    @rraallvv there's CLI but it's using paid, remote service. There are free, local alternatives https://stackoverflow.com/questions/28583799/image-optimization-like-tinypng – Pawel Sep 05 '18 at 16:30
6

PNG is a lossless image compression format. Basically it uses spatial compression to fully preserve the original image quality. It cannot be compressed further without loss of quality (you would need to use another lossless format to see if it works better).

There is no need to use GZIP (or equivalent) as it will just add processing for the decompression of images client side.

For JPEG the best you can do is make sure you use the correct resolution and quality settings for your purpose. GZIP produces mix results at best. Make sure you strip all metadata from it (unless you need those info client side but you would be better off holding those data in a database).

Arnaud Leyder
  • 6,674
  • 5
  • 31
  • 43