¿Cómo funciona la compresión de imágenes sin pérdida de Page Speed ​​de Google?

Cuando ejecuta el complemento PageSpeed ​​de Google para Firebug / Firefox en un sitio web, sugerirá casos en los que una imagen puede comprimirse sin pérdidas y proporcionará un enlace para descargar esta imagen más pequeña.

Por ejemplo:

• La compresión sin pérdidas de http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg podría ahorrar 33.5KiB (reducción del 85%).
• La compresión sin pérdidas de http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg podría ahorrar 18,5 KB (reducción del 77%).
• La compresión sin pérdidas http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png podría ahorrar 262B (reducción del 11%).
• La compresión sin pérdida http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png podría ahorrar 91B (reducción del 51%).
• La compresión sin pérdidas http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm podría ahorrar 61B (reducción del 5%).

Esto se aplica a los tipos de archivo JPG y PNG (no he probado GIF u otros).

Tenga en cuenta también las miniaturas de Flickr (todas esas imágenes son de 75x75 píxeles). Son algunos ahorros bastante grandes. Si esto es realmente genial, ¿por qué Yahoo no aplica este lado del servidor a toda su biblioteca y reduce sus cargas de almacenamiento y ancho de banda?

Incluso Stackoverflow.com representa algunos ahorros muy menores:

• La compresión sin pérdidas de http://sstatic.net/stackoverflow/img/sprites.png?v=3 podría ahorrar 1,7 KB (reducción del 10%).
• La compresión sin pérdidas de http://sstatic.net/stackoverflow/img/tag-chrome.png podría ahorrar 11B (reducción del 1%).

He visto que PageSpeed ​​sugiere ahorros bastante decentes en archivos PNG que creé usando la función 'Guardar para Web' de Photoshop.

Entonces mi pregunta es, ¿qué cambios están haciendo en las imágenes para reducirlas tanto? Supongo que hay diferentes respuestas para diferentes tipos de archivos. ¿Es esto realmente sin pérdidas para los JPG? ¿Y cómo pueden vencer a Photoshop? ¿Debería sospechar un poco de esto?

Si está realmente interesado en los detalles técnicos, consulte el código fuente:

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

Para los archivos PNG, usan OptiPNG con un enfoque de prueba y error

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

Cuando se aplican las cuatro combinaciones, se mantiene el resultado más pequeño. Simple como eso.

(Nota: La optipngherramienta de línea de comandos que hace demasiado si se proporciona -o 2a través -o 7)

Para los archivos JPEG, usan jpeglib con las siguientes opciones:

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

Del mismo modo, WEBP se comprime usando libwebp con estas opciones:

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

También hay image_converter.cc, que se utiliza para convertir sin pérdidas al formato más pequeño.

Utilizo jpegoptimpara optimizar archivos JPG y optipngpara optimizar archivos PNG.

Si está bashactivado, el comando para optimizar sin pérdidas todos los JPG en un directorio (recursivamente) es:

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

Puede agregar -m[%]a las jpegoptimimágenes JPG de compresión con pérdida, por ejemplo:

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

Para optimizar todos los PNG en un directorio:

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2es el nivel de optimización predeterminado, puede cambiar esto de o2a o7. Tenga en cuenta que un mayor nivel de optimización significa un mayor tiempo de procesamiento.

Eche un vistazo a http://code.google.com/speed/page-speed/docs/payload.html#CompressImages que describe algunas de las técnicas / herramientas.

Se trata de intercambiar el tiempo de CPU del codificador por la eficiencia de compresión. La compresión es una búsqueda de representaciones más cortas, y si buscas más, encontrarás otras más cortas.

También hay una cuestión de utilizar las capacidades de formato de imagen al máximo, por ejemplo PNG8 + a en lugar de PNG24 + a, tablas Huffman optimizadas en JPEG, etc.

Photoshop realmente no se esfuerza por hacer eso al guardar imágenes para la web, por lo que no es sorprendente que ninguna herramienta lo supere.

Ver

• ImageOptim (sin pérdidas) y
• ImageAlpha (con pérdida) para archivos PNG más pequeños ( descripción de alto nivel de cómo funciona ) y
• JPEGmini / MozJPEG (con pérdida) para un mejor compresor JPEG.

Para replicar los resultados de compresión JPG de PageSpeed ​​en Windows:

Pude obtener exactamente los mismos resultados de compresión que PageSpeed ​​usando la versión de Windows de jpegtran que puede obtener en www.jpegclub.org/jpegtran . Ejecuté el ejecutable usando el indicador de DOS (use Inicio> CMD). Para obtener exactamente el mismo tamaño de archivo (hasta el byte) que la compresión PageSpeed, especifiqué la optimización de Huffman de la siguiente manera:

jpegtran -optimize source_filename.jpg output_filename.jpg

Para obtener más ayuda sobre las opciones de compresión, en el símbolo del sistema, simplemente escriba: jpegtran

O para usar las imágenes generadas automáticamente desde la pestaña PageSpeed ​​en Firebug:

Pude seguir los consejos de Pumbaa80 para obtener acceso a los archivos optimizados de PageSpeed. Esperemos que la captura de pantalla aquí proporcione mayor claridad para el entorno FireFox. (Pero no pude obtener acceso a una versión local de estos archivos optimizados en Chrome).

Y para limpiar los nombres de archivo de PageSpeed ​​desordenados usando Adobe Bridge y expresiones regulares:

Aunque PageSpeed ​​en FireFox pudo generar archivos de imagen optimizados para mí, también cambió sus nombres convirtiéndose en nombres simples como:

nice_picture.jpg

dentro

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

Descubrí que esto parece ser una queja común. Como no quería cambiar el nombre de todas mis imágenes a mano, utilicé la herramienta Cambiar nombre de Adobe Bridge junto con una Expresión regular. Puede usar otros comandos / herramientas de cambio de nombre que acepten expresiones regulares, pero sospecho que Adobe Bridge está disponible para la mayoría de nosotros que trabajamos con problemas de PageSpeed.

1. Inicie Adobe Bridge
2. Seleccionar todos los archivos (usando el Control A)
3. Seleccione Herramientas> Cambiar nombre de lote (o Control Shift R)
4. En el campo Preajuste, seleccione "Sustitución de cadena". Los campos Nuevos nombres de archivo ahora deberían mostrar "Sustitución de cadena", seguido de "Nombre de archivo original"
5. Active la casilla de verificación llamada "Usar expresión regular"

6. En el campo "Buscar", ingrese la Expresión regular (que seleccionará todos los caracteres comenzando en el separador de subrayado más a la derecha):

   _ (?!. * _) (. *) \. jpg $

7. En el campo "Reemplazar con", ingrese:

   .jpg

8. Opcionalmente, haga clic en el botón Vista previa para ver los resultados de cambio de nombre del lote propuesto, luego cierre

9. Haga clic en el botón Cambiar nombre

Tenga en cuenta que después del procesamiento, Bridge anula la selección de los archivos que no se vieron afectados. Si desea limpiar todos sus archivos .png, debe volver a seleccionar todas las imágenes y modificar la configuración anterior (para "png" en lugar de "jpg"). También puede guardar la configuración anterior como un ajuste preestablecido como "Limpiar imágenes jpg de PageSpeed" para que pueda limpiar los nombres de los archivos rápidamente en el futuro.

Captura de pantalla de configuración / Solución de problemas

Si tiene problemas, es posible que algunos navegadores no muestren la expresión RegEx anterior correctamente (culpe a mis caracteres de escape), así que para una captura de pantalla de la configuración (junto con estas instrucciones), consulte:

Cómo usar la herramienta de cambio de nombre de lote de Adobe Bridge para limpiar imágenes de velocidad de página optimizadas que tienen nombres de archivo desordenados

En mi opinión, la mejor opción que maneja eficazmente la mayoría de los formatos de imagen de una vez es el recorte . Utiliza eficazmente optipng, pngcrush, advpng y jpegoptim en función del formato de imagen y ofrece una compresión sin pérdidas casi perfecta.

La implementación es bastante fácil si se usa una línea de comando.

sudo apt-get install trimage    
trimage -d images/*

¡y voilá! :-)
Además, también encontrarás una interfaz bastante simple para hacerlo manualmente.

Hay un script por lotes muy útil que optimiza recursivamente las imágenes debajo de una carpeta usando OptiPNG (de este blog ):

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G

¡UNA LÍNEA!

Si está buscando procesamiento por lotes, tenga en cuenta que el recorte se queja si no tiene Xserver disponible. En ese caso, simplemente escriba un script bash o php para hacer algo como

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

Cambie las opciones para satisfacer sus necesidades.

Para Windows hay varias interfaces de arrastrar y soltar para facilitar el acceso.

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

Para archivos PNG, encontré este para mi disfrute, aparentemente 3 herramientas diferentes envueltas en esta GIU. Simplemente arrastre y suelte y lo hace por usted.

https://pnggauntlet.com/

Sin embargo, lleva tiempo, intente comprimir un archivo png de 1 MB: me sorprendió la cantidad de CPU que entró en esta comparación de compresión que tiene que ser lo que está sucediendo aquí. Parece que la imagen está comprimida de 100 maneras y gana la mejor: D

Con respecto a la compresión JPG, creo que es arriesgado extraer perfiles de color y toda la información adicional; sin embargo, si todos lo hacen, es el estándar comercial, así que lo hice yo mismo: D

Hoy guardé 113MB en archivos 5500 en una instalación de WP, ¡así que definitivamente vale la pena!