stevesouders / spriteme

Automatically exported from code.google.com/p/spriteme
11 stars 8 forks source link

ImageMe #41

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
We could do something similar to SpriteMe for image optimization. 

  - ImageMe finds all the images in the page (both IMG images as well as
CSS background images). 
  - ImageMe sends the list of image URLs to coolRunnings. 
  - CoolRunnings fetches each image and optimizes it. This has to be
lossless - so it's okay to change image format, but not at loss of quality. 
  - CoolRunnings returns a JSON structure that has the list of original
image URLs. For each image URL there is the original size, the coolRunnings
optimized image URL, and the optimized size. (Even if the optmized size is
greater than the original size - leave it to the client to deal with this.)
What about removing JPG comments?
  - For each improved image, ImageMe swaps it out for the optimized image
URL. Need some logic to determine "improved" - saving 5 bytes on a 50K file
isn't worth it. 

Thoughts?

Original issue reported on code.google.com by stevesou...@gmail.com on 9 Sep 2009 at 11:40

GoogleCodeExporter commented 9 years ago
It seems natural to run this as a second step, after running SpriteMe. In fact, 
the
images marked 'bad candidates'/'already sprited' by the SpriteMe logic would be
exactly the images we'd want to optimize.

Retaining comments (copyright info and possibly SpriteMe sprite-maintenance 
comments)
is definitely necessary. I'll have to look into the particular tools for 
different
image formats, to see which ones have comments-related options. *Worst* case, 
we can
use PHP Imagick to fetch the comments, then optimize the image, then reinsert
comments. coolRunnings used to do this because smush.it clobbered PNG comments.

Aside from adding code to optimize image types other than PNG, and a little 
'action
controller'-type glue script to translate between the optimization classes and 
the
request/response, we can pretty much use existing materials.

Original comment by jaredhir...@yahoo.com on 15 Sep 2009 at 4:54

GoogleCodeExporter commented 9 years ago
http://www.gracepointafterfive.com/punypng does a really good job on 
coolrunnings
results - I tested it on resulting sprites and some increase in size is of 
spriting
almost completely illuminated by punipng.

Original comment by sergey.c...@gmail.com on 29 Oct 2009 at 3:06

GoogleCodeExporter commented 9 years ago
Would it be possible to use this proposed ImageMe service to not just optimize 
images, but also to add and convert <img> to sprites?

I can see a lot of issues with it but when I optimized my websites beyond what 
spriteme could help with, I found a lot of leftover <img> tags that should be 
handled 
by an advanced service like this. Convert them to a similar tag (although 
leaving 
<img> and just emptying the src attribute could work too) and add the sprite as 
the 
background image with correct position.

The icons I found were generally things like website logo in the header, search 
icon 
next to the search bar, rss/twitter icon in the footer. I think these are 
general 
enough issues to make it possibly worth it for a wide range of users.

Original comment by shika...@gmail.com on 7 Feb 2010 at 10:35