Reduce website download time by heavily compressing PNG and JPEG

PNG and JPEG are two most popular formats for web graphics. JPEG
is used for photographs, screenshots and backgrounds where PNG is
used for all other graphics need including cliparts, buttons,
headers, footers, borders and so on. As a result, these two types
of graphics file usually take up 80% of the total graphics used in
a website. Of course, there’s the GIF, which is very popular. But
as it supports only 256 colors, it is losing its popularity day by
day. PNG seems to be a all rounder winner for all kinds of graphics
need. As all browsers support PNG well enough and PNG supports
alpha transparency, it’s surely the best format so far on the web
for all purpose graphics need for websites. So, if you can optimize
all PNG and JPEG on your website and compress them rigorously, you
can easily shed off several seconds of load time from your website
without doing any coding. Especially if your website is graphics
rich like Pageflakes, 30%
reduction in total size of graphics throughout the website is a big
performance win.

Optimize all PNG on your website

PNG has a lot of scope for optimization. Generally regular
graphics tools like Photoshop, Paintshop pro, Paint.NET all
generate PNG using a moderate compression. So, PNG can be
compressed further by using advanced compression tools. "http://en.wikipedia.org/wiki/OptiPNG">OptiPNG is such a tool
that can compress PNG and sometimes produce 50% smaller output. At
Pageflakes, we have around 380 PNG which when compressed using
OptiPNG, gives us 40% reduction in total size. This is a big win
for us.

Here’s what wikipedia says about OptiPNG:

OptiPNG is an open source command line computer program that
reduces the size of PNG files. The compression is lossless, meaning
that the resulting image will have exactly the same appearance as
the source image.

The main purpose of OptiPNG is to reduce the size of the PNG
IDAT data stream by trying various filtering and compression
methods. It also performs automatic bit depth, color type and color
palette reduction where possible, and can correct some data
integrity errors in input files.

Here’s a poweshell script that you can run from the root folder
of your website. It will scan through all the PNG files in the
webtree and run OptiPNG on each file. This takes quite some time if
you have hundreds of files. So, you should make it a part of your
build script.

gci -include *.png -recurse | foreach
 { fileName = _.FullName; cmd /c "C:softpngoptipng.exe -o7 "fileName"" }

Here I have stored the optipng.exe on the c:softpng
folder.

OptiPNG gives very good compression. But there’s even more scope
for compression. "http://en.wikipedia.org/wiki/AdvanceCOMP">AdvanceCOMP is the
ultimate in compression technology for PNG as it uses the mighty
7zip compression algorithm. It
can squeeze down PNG even further after being compressed by OptiPNG
using its maximum compression mode. PNG files are compressed using
DEFLATE algorithm. DEFLATE has 0 to 9 compression level, where 9 is
the highest. AdvanceCOMP uses 7zip DEFLATE encoder, that extends
the compression factor even more. During 7zip compression, a much
more detailed search of compression possibilities is performed, at
the expense of significant further processor time spent on
searching. Effectively, the 10-point scale used in gzip is extended
to include extra settings above 9, the previous maximum search
level. There will be no difference in decompression speed,
regardless of the level of compressed size achieved or time taken
to encode the data.

Here’s a poweshell script that you can run from the root folder
of your website. It will scan through all the PNG files in the
webtree and run AdvanceCOMP on each file. You need to run
AdvanceCOMP after running OptiPNG.

gci -include *.png -recurse | foreach
 { fileName = _.FullName; cmd /c "C:softpngadvpng.exe
 --shrink-insane -z "fileName"" }

I have collected "http://omar.mvps.org/tool/png.zip">both optipng and advpng in this
zip
file.

Optimize all JPEG on your website

Unfortunately, there’s not much powerful tool like OptiPNG for
jpeg that you can run on all your jpeg files and compress them
rigorously. JPEG file is compressed when it is saved. Generally all
graphics applications provide you an option to select what’s the
quality ratio of the jpeg being saved. So, you have to consciously
make the best compression vs quality choice while saving the jpeg
file. However, "http://en.wikipedia.org/wiki/Libjpeg">libjpeg project has a
jpeg optimizer tool that does some optimization on jpeg files. It
has a jpegtran utility which does the optimization according to
wikipedia:

jpegtran – a utility for lossless transcoding between different
JPEG formats. The jpegtran command-line program is useful to
optimize the compression of a JPEG file, convert between
progressive and non-progressive JPEG formats, eliminate
non-standard application-specific data inserted by some image
programs, or to perform certain transformations on a file —
such as grayscaling, or rotating and flipping (within certain
limits) — all done “losslessly” (i.e. without decompressing
and recompressing the data, and so causing a reduction of image
quality due to generation loss).

However, when we ran jpegtran on all the jpeg files in
Pageflakes, we are able to reduce about 20% total size of all jpeg.
So, that was not too bad.

Here’s how you run jpegtran to get all the jpeg files within
your website directory optimized:

gci -include *.jpg -recurse | foreach
 { fileName = _.FullName; newFileName = fileName + ".tmp";
cmd /c "C:softjpegjpegtran.exe -optimize -outfile "newFileName" "fileName"";
copy newFileName fileName; del newFileName; }

The libjpeg
binaries are uploaded here
for your convenience.

Warning: You have to run all these powershell commands in a
single line. I have broken the commands in multiple line for better
readability.

Let’s save global bandwidth, go green.

13 Comments

  1. Can you please tell me the procedure to use these scripts in my website project. Do i have to make a separate deployment project to run those scripts or i have to place this code inside a batch file. i am simply not getting the way to do this.Please help me to handle this.

    Otherwise your post sounds really interesting and is going to save a lot of bandwidth.

    Thanks in advance for help and support and good work out their to help everyone.

  2. Install powershell and run powershell

    Go to you website folder within powershell console

    Run the scripts

    It will compress all the pictures inside your website folder

    Now you can copy those compressed files to your production environment.

  3. Thanks omar for your quick reply from your busy schedule. I am new to powershell and i tried to do what you asked for but it gave me some errors as follows:

    cmdlet foreach at command pipeline position 2

    Supply values for the following parameters:

    Process[0]:

    I dont know what it wants to say i have already copied the optiping.exe to the specified folder and i am running this command from my website root, do i have to run it from my App_Themes images folder or what i cant figure it out.Please Help.

    Thankx

    Aashish

  4. Dear Omar, please help me.

    when i'm trying to open the project “dropthings”, I got an error as following

    “cannot open the Dropthing.Silverlight , this project is not supported by this installation “

    can you please help me to solve this problem?

  5. Assalamualaikum wr. wb

    for optimized PNG, i recommended using PNGOut.
    it’s much better from optiPNG

    here a small quote for an article:

    First, note that PNGOUT strips out any interlacing. If you have interlaced PNG images, you can expect a very substantial reduction in file size. But even without interlacing, PNGOUT reduces the file size by 22 KB, or nearly 10 percent. I know it doesn’t sound like much, but PNG is by definition lossless compression. JPEG is lossy, so as file sizes decrease, more and more of the image is lost. With PNG, we haven’t lost any detail in our images, we’ve just made them smaller. Folks, this is free bandwidth! It doesn’t get much better than that.

    To see how effective PNGOUT really is, I ran it on a subset of my /images folder. The trick here is that these images are already optimized; I run OptiPNG on every file in this folder periodically.

    OptiPNG PNGOUT
    267 PNG files 4.40 MB 4.04 MB

    It took a while to run, but we get a further 9% reduction in PNG image size beyond what OptiPNG could do. How is this possible?

    I thought the name Ken Silverman sounded familiar. Ken, the author of PNGOUT, is the wunderkind behind the original Duke Nukem 3D build rendering engine, which he wrote at the age of 18.

  6. Thanks Omar, now works like a charm.
    I wasn’t familiar with powershell and was getting some errors trying to run the script but after a little research, I realised that the script was not written properly to work so i amended it to this:

    gci -include *.png -recurse | foreach { $fileName = $_.FullName; cmd /c “C:softpngoptipng.exe -o7 `”$fileName`”" }

Leave a Reply