Efforts to convert the site over to PNG-format images

All suggestions about TPFC should be posted here. Discussions about changes to TPFC will also be carried out here.
Post Reply
Message
Author
User avatar
webfork
Posts: 10818
Joined: Wed Apr 11, 2007 8:06 pm
Location: US, Texas
Contact:

Efforts to convert the site over to PNG-format images

#1 Post by webfork »

Background

So once upon a time, the site only supported GIF images. Then back in early 2013 Andrew enabled the use of PNG and JPEG files, which hopefully have cut down on bandwidth costs.

Before I continue, note that 1 in about 50 images I compress is smaller as a GIF file, especially thumbnails and icons. I'm not sure why this is, but it's very rare for the screenshot compression that I've done.

The Process

I have been going through the forums and slowly converting images from GIF to PNG, making sure I don't accidentally convert an animated GIF. Today I spent some time on the older entries in our System - Installation/Configuration category and decided to do a bulk conversion.

Steps
  1. I went through and downloaded all the images manually and gave them names since the database spits out random ones like "ecr4iN95U.gif". There were 39 GIFs total and, since I wanted a big batch of files to run FileOptimizer on, I grabbed 3 PNG files as well.
  2. I saved them all to a folder on my desktop and ran PNGOptimizer on all the files:

    • Image
  3. At this point, I'd saved 387k of space, about 30% decrease overall. One of the files dropped to 11% of its original size.

    • Image
  4. Then I ran FileOptimizer on all of them (with the "lossy" optimization option checked). This took a while but I ran two instances in tandem to optimize for a dual-processor system:

    • Image
  5. With this, I got an additional reduction of 120k, or 13% smaller.

The result

We now have about 62% smaller images in that section. Over the course of months and years with thousands of visitors and downloads, this can add up to many gigabytes of data saved. Again, the major focus of this is to reduce bandwidth costs over time, but it also means faster downloads and a better website.

Related

User avatar
Midas
Posts: 6710
Joined: Mon Dec 07, 2009 7:09 am
Location: Sol3

Re: Efforts to convert the site over to PNG-format images

#2 Post by Midas »

Great and instructive write up, dear webfork -- it really warms the heart to see someone quietly work in the background for the benefit of our little community. 8)

Bandwidth conservation is one of the main reasons I host my images off-site, the other being bit-rot prevention.

Here's my (not so*) little contribution... (from DesignTaxi, via Lifehacker).
    • Image
*) Sorry about that. :oops:

User avatar
Andrew Lee
Posts: 3052
Joined: Sat Feb 04, 2006 9:19 am
Contact:

Re: Efforts to convert the site over to PNG-format images

#3 Post by Andrew Lee »

Thanks webfork!

Image

User avatar
webfork
Posts: 10818
Joined: Wed Apr 11, 2007 8:06 pm
Location: US, Texas
Contact:

Re: Efforts to convert the site over to PNG-format images

#4 Post by webfork »

Andrew Lee wrote:Thanks webfork!
Sure thing :)

User avatar
tproli
Posts: 1172
Joined: Sat Sep 09, 2006 10:14 am
Location: Hungary
Contact:

Re: Efforts to convert the site over to PNG-format images

#5 Post by tproli »

Thanks, nice work!

So now all site images (screenshots) are optimized? I just tried this one and it seems PNGs could be further optimized (-48%):
http://www.portablefreeware.com/index.php?id=2676

Using the free web interface of kraken.io:
https://kraken.io/web-interface

It uses a technique called png quantizing (in lossy mode), which downgrades to 256 colors but usually there's no noticable quality loss. I think it would be fine for screenshots though I'm fine with the current sizes too.

User avatar
Midas
Posts: 6710
Joined: Mon Dec 07, 2009 7:09 am
Location: Sol3

Re: Efforts to convert the site over to PNG-format images

#6 Post by Midas »

tproli wrote:Using the free web interface of kraken.io:
https://kraken.io/web-interface

It uses a technique called png quantizing (in lossy mode), which downgrades to 256 colors but usually there's no noticeable quality loss.

User avatar
tproli
Posts: 1172
Joined: Sat Sep 09, 2006 10:14 am
Location: Hungary
Contact:

Re: Efforts to convert the site over to PNG-format images

#7 Post by tproli »

It may, I just mentioned Kraken to show a simple way to check before-after sizes. I often use their free service to quickly optimize images, and sometimes hundreds of them in one go. One drawback is that it offers downloading images in one flat zip file, which isn't convenient when you have images in subfolders.

I wrote a tutorial how to set up such file optimizers to automate the process with DropIt, this could be tweaked to use with PNGoo too:
https://dropitblog.wordpress.com/2015/0 ... s-for-web/

Post Reply