PNG24 vs. PNG8: The battle to reduce file size continues

Before you get scared of the long almost “techy” post, know that this is something all people who work with images and graphics can benefit from.

In hopes of a faster loading e-commerce site, I’ve gone through a few tests to determine how could we optimize product images in a more efficient way.

Currently, because of the glow around the products used in our e-commerce site, all PNGs are saved as PNG24. We think that, by using PNG8 in images less than 201 pixels (in width or height), we can save up to 60% in space, allowing for the site to load much faster. True that PNG8 will not allow for the glow to be stored, but on images with small dimensions, it truly doesn’t matter. It is still as transparent as it used to be.

On top of that, we can use image-crushing software, like Ping or PNGCrusher, that compresses both PNG8 and PNG24 files, resulting in approximately 15% in file size savings. Both these little programs work for Mac OSX. For a PC version, I suggest you guys to Google it. (I don’t recommend one in particular because I don’t have the means to be able to test it.)

What are the best Photoshop Optimization settings we have encountered so far? When creating PNG8s, we use 64 Colors, and the Selective / Diffusion / Transparent settings in the Save For Web menu.

This Excel doc documents the trajectory of the tested images.

1) First column offers the original sizes (the sizes currently used in the TNF website)

4. Fourth column documents the Savings. These happen by taking the original folder size (in column 1) and putting it together with the final folder size (in column 3). Notice how there are less savings in the PNG24 folders, because they didn’t go through the PNG8 optimization process, to save the glow in larger product display images. To make things simpler, I used green to calculate the percentage of savings in the PNG8 images, while yellow is used to calculate the percentage of PNG24 images.

None of these PNGs were interlaced. Interlacing an image causes it to “appear” to load faster, but it adds a few bites to your file, so it depends on what your needs are.

Recently, an engineer at my office came across an interesting Powerpoint presentation that also covers the subject of image optimization from a back-end perspective. Of course, the data is kinda dry and the image compression software it mentions is really more of an MS-DOS command. Still, interesting to click through. You can also download the ppt directly from here.

Hope this helps shed off some weight from your heavy-on-the-back-end sites!

-Alex

MISS-IN-SCENE #4 (YES, YET ANOTHER WEB COMIC)

In honor of everyone who stops doing something they like, and starts doing what’s expected.

-Alex

Robogina

“Her name is Robogina. She’s a black belt in karate. Cuz she knows that it would be tragic if we let those evil robots win.”

Since I love cliches, I thought the mantis needed a giant robot (no pun intended, peeps from Giant Robot); this one in particular is slightly different, because “it” is really a “she.” Notice the robotic female genitalia. I’m sure a new fetish in RedTube is born today.

What I like about this is the concept of chaos beneath the surface. A glass wall and bridge protect the unsuspecting “tourist” of the inferno that’s taking place a few meters away. And yes, the mediums used to create this piece were Photoshop and Flash. The inspiration for Robogina’s design came from Gamago and Jeff Soto.

-Alex

Paraiso Perdido.

Aun adolecente, con el futuro infinito por delante recuerdo andar con mi primer amor y escuchar a lo lejos una canción. Esta cancion no era comun, ya que era una de nuestras canciones (como todo adolecente latino enamorado que le dedica el sol, la luna y las estrellas a su pareja). Ingenuamente nos abrazamos y dijimos que era seguramente una señal del destino de que nuestro amor nunca encontraría fin y que no importase que pasase el tiempo y que estuviesemos lejos aun asi nos encontrariamos nuevamente. Esa noche nos besamos y nos reimos del mundo y de como la gente no encuentra lo que busca, pero como nosotros si lo encontramos. Nos sentimos por encima del mundo.

Cuando escucho esa cancion aun pienso en ese momento… pero extrañamente, ese momento me lleva a otro. Al momento en que unos dias mas tarde nos cogio la lluvia en medio de la noche y en vano buscamos refugio del agua y el frio. Yo temblando sintiendo que moria, con un temblor de esos que rompen los huesos y con mi amor encima de mi, calentandome y llorando porque pensaba que yo fallecia. Recuerdo entonces reir incontrolablemente porque senti ese amor infinito que sana todo malestar y toda herida. Realmente no me importaba morir porque sentia que habia alcanzado lo que todo ser humano añora.

Desafortunadamente, el tiempo no se congela como en las peliculas, y al final de cada acto, empieza uno nuevo con conflictos que separan a los hombres como particulas subatomicas por el tiempo y el espacio (pura prueba de que la perfección no se pesca ni se atrapa). Asi que, como pueden imaginar, despues de este amor he tenido otros. Aun asi no lo siento perdido. Momentos de intensa emocion, ingenuidad y pasion siempre se quedan y se disfrutan a lo maximo cuando no se teme a las consecuencias. Momentos inmortales que mediante ondas auditivas se reconectan con las neuronas enpolvadas y regresan a ti como dice Sylvia, como una “triste caravana de recuerdos”.

Las lagrimas que esta noche derramo, las derramo en honor a todo aquel que en mis brazos lloro por mi: por la emocion de quererme, por la decepcion de no quererme, y por la agonia de nuestra triste despedida.

Miss-In-Scene #3 (Yet another web comic)

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

                  Sometimes nature is out of place… literally.