#013751: Optimize image for size

Description:

Use Smush It! [1] on a page with the new Online Editor shows that some images can be optimized by running pngcrush (or another PNG optimizer tool) or by using PNG instead of GIF.

Those files can be optimized with pngcrush :


design/standard/images/tango/bookmark-new.png
design/standard/images/tango/mail-attachment22.png
design/standard/images/tango/document-open.png
design/standard/images/tango/mail-attachment32.png
design/standard/images/tango/go-previous.png
design/standard/images/tango/emblem-unreadable.png
design/standard/images/tango/system-search.png
design/standard/images/tango/mail-attachment.png
design/standard/images/tango/document-save.png
design/standard/images/tango/folder.png
design/standard/javascript/plugins/advimage/image.htm
design/standard/javascript/themes/advanced/skins/o2k7/img/button_bg_black.png
design/standard/javascript/themes/advanced/skins/o2k7/img/button_bg.png
design/standard/javascript/themes/advanced/skins/o2k7/img/button_bg_silver.png
design/standard/javascript/themes/advanced/skins/default/img/buttons.png
design/standard/javascript/themes/simple/skins/o2k7/img/button_bg.png
design/standard/javascript/classes/firebug/warningIcon.png
design/standard/javascript/classes/firebug/errorIcon.png
design/standard/javascript/classes/firebug/infoIcon.png
design/standard/stylesheets/skins/o2k7/img/button_bg_black.png
design/standard/stylesheets/skins/o2k7/img/button_bg.png
design/standard/stylesheets/skins/o2k7/img/button_bg_silver.png
design/standard/stylesheets/skins/default/img/buttons.png

Those files are smaller with PNG :


design/standard/javascript/plugins/inlinepopups/skins/clearlooks2/img/button.gif
design/standard/javascript/plugins/inlinepopups/skins/clearlooks2/img/corners.gif
design/standard/javascript/plugins/inlinepopups/skins/clearlooks2/img/buttons.gif
design/standard/javascript/plugins/inlinepopups/skins/clearlooks2/img/horizontal.gif
design/standard/javascript/plugins/advimage/img/sample.gif
design/standard/javascript/themes/advanced/skins/default/img/tabs.gif
design/standard/javascript/themes/advanced/img/icons.gif
design/standard/javascript/themes/ez/img/icons.gif
design/standard/stylesheets/skins/default/img/tabs.gif

A tar with new and modified images is attached. A patch to CSS files is attached in the first comment.

[1] http://www.smushit.com/url


Environment:

Operating System:
PHP Version: (please be specific, like '4.4.3' or '5.1.5')
Database and version:
Browser (and version):


- Attachments
optimize_img_png.tar.gz (49.3 kb)
[Download] [Permanent Link]
New and modified images

- Comments

Patch on CSS stylesheets

#258521 by Damien Pobel on October 12th, 2008 [Permanent Link]
- Attachments: » optimize_img.patch (Patch on CSS stylesheets)

*How much did you save?
*Haven't checked but guess some of the files are gif for a reason (to not have to deal with the ie6 / png transparency issue, but since your converting from gif I guess you don't end up with any alpha transparency anyway).
*Many of the files are not in use in oe.
Note:All files except the tango/* files are tinyMCE files, so I won't change them unless moxiecode does it. As in I need to create an enhancement request for it on their sourceforge tracker (http://sourceforge.net/tracker/?group_id=103281&atid=635685url).

#258533 by André R. on October 13th, 2008 [Permanent Link]

Hi André,

It saves about 30Kb. For some files the gain is quite small.
But I think for some images it's important, for example :
* design/standard/stylesheets/skins/o2k7/img/button_bg.png optimized with pngcrush saves about 2.9Kb (more than 50% of the original size, for button_bg_black.png it's more than 70% !)
* design/standard/javascript/themes/ez/img/icons.gif converted in PNG and optimized saves about 2.3 Kb (about 20% of the original size)
* design/standard/stylesheets/skins/default/img/buttons.gif converted in PNG and optimized saves about 0.5Kb (about 42% of the original size)
* design/standard/stylesheets/skins/default/img/tabs.gif converted in PNG and optimized saves about 0.5kb (about 50% of the original size)

On a slow Internet line, it's important to save bandwidth (even 10kb), I experienced it last week.

There's no problem of transparency in IE6 as GIF are converted in PNG8 (GIF and PNG8 have the same features) so the new files don't use alpha channel. I used my own script that only converts images to PNG if the resulted PNG is smaller (I will shortly publish the script).

#258537 by Damien Pobel on October 13th, 2008 [Permanent Link]

Partly implemented in
ezoe/trunk ( ezoe 5.0.0rc8 ) rev. 3347

(As in the tinymce related images needs to be implemented by the tinymce developers, so tango images implemented)

Update: Posted TinyMCE enhancement request here:
https://sourceforge.net/tracker2/?func=detail&aid=2345881&group_id=103281&atid=635685url

#259198 by André R. on November 25th, 2008 [Permanent Link]

- History
Load History
Properties
Type Enhancement
Priority Medium
Component Online Editor
Affects 5.0.0rc6
5.0.0rc7
Fix Version 5.0.0rc8
Reporter Damien Pobel
Responsible André R.
Status 0 Closed
Resolution Implemented
Created October 12th, 2008
Updated November 26th, 2008
Resolved November 25th, 2008
 
Navigation [Permanent Link]
Previous Issue
Back to Issues List
Next Issue: #019111
  OE strips nested custom, non inline, empty, tags