¿Cómo funciona la compresión de imagen sin pérdida de velocidad de página de Google?

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

Por ejemplo:

  • La compresión sin pérdida http://sofes.miximages.com/imaging/photo_unavailable.png podría ahorrar 33.5KiB (85% de reducción).
  • La compresión sin pérdida http://sofes.miximages.com/imaging/5137875594_28d0e287fb_s.jpg podría ahorrar 18.5KiB (77% de reducción).
  • La compresión sin comprimir http://sofes.miximages.com/imaging/feedback_tab_white.png podría ahorrar 262B (reducción del 11%).
  • La compresión sin pérdida de http://sofes.miximages.com/imaging/ui-bg_flat_75_ffffff_40x100.png podría ahorrar 91B (reducción del 51%).
  • La compresión sin pérdida http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm podría ahorrar 61B (reducción del 5%).

Esto se aplica a todos 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 75×75 píxeles). Son algunos ahorros bastante grandes. Si esto es realmente genial, ¿por qué Yahoo no está aplicando este servidor a toda su biblioteca y reduciendo su almacenamiento y cargas de ancho de banda?

Incluso Stackoverflow.com representa ahorros muy pequeños:

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

He visto que PageSpeed ​​sugiere ahorros bastante buenos en los 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 JPG? ¿Y cómo pueden vencer a Photoshop? ¿Debo ser un poco sospechoso 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 archivos PNG, usan OptiPNG con cierto 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.

(NB: la herramienta de línea de comando optipng también lo hace si proporciona -o 2 a -o 7 )


Para 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 usa para convertir sin pérdidas al formato más pequeño.

Uso jpegoptim para optimizar archivos JPG y optipng para optimizar archivos PNG.

Si está en bash , 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 jpegoptim a las imá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 {} \; 

-o2 es el nivel de optimización predeterminado, puede cambiarlo de o2 a 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.

Es cuestión de intercambiar el tiempo de CPU del codificador por la eficiencia de la compresión. La compresión es una búsqueda de representaciones más cortas, y si busca más, encontrará las más cortas.

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

Photoshop no se esfuerza al máximo para guardar imágenes para la web, por lo que no sorprende 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 con PageSpeed ​​usando la versión de Windows de jpegtran que puede obtener en http://www.jpegclub.org/jpegtran . Ejecuté el archivo ejecutable usando el indicador de DOS (use Inicio> CMD). Para obtener exactamente el mismo tamaño de archivo (hasta el byte) como compresión de 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 acceder a los archivos optimizados de PageSpeed. Esperemos que la captura de pantalla aquí proporcione mayor claridad para el entorno FireFox. (Pero no pude acceder a una versión local de estos archivos optimizados en Chrome).

Y para limpiar los nombres de los archivos de PageSpeed ​​desordenados con Adobe Bridge y expresiones regulares:

Aunque PageSpeed ​​en FireFox fue capaz de generar archivos de imagen optimizados para mí, también cambió sus nombres convirtiendo 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 Rename de Adobe Bridge junto con una expresión regular. Podría 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. Comience 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 Preset, selecciona “String Substitution”. Los campos Nuevos nombres de archivo ahora deberían mostrar “Sustitución de cadenas”, seguido de “Nombre de archivo original”
  5. Habilite la checkbox llamada “Usar expresión regular”
  6. En el campo “Buscar”, ingrese la expresión regular (que seleccionará todos los caracteres que comiencen 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 de lotes propuestos, 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 nombres de 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 correctamente la expresión RegEx (culpen a mis caracteres de escape), por lo que para una captura de pantalla de la configuración (junto con estas instrucciones), consulte:

Cómo utilizar la herramienta de cambio de nombre por lotes de Adobe Bridge para limpiar imágenes optimizadas de PageSpeed ​​que tienen nombres de archivo desordenados

En mi opinión, la mejor opción que maneja de manera efectiva la mayoría de los formatos de imagen en un bash es el ajuste . Utiliza de manera efectiva 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, encontrarás una interfaz bastante simple para hacerlo manualmente también.

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

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

¡UNA LÍNEA!

Si está buscando un procesamiento por lotes, recuerde que trimage se queja si no tiene Xserver disponible. En ese caso, solo escriba un script bash o php para hacer algo como

 < ?php echo "Processing jpegs
"; exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;"); echo "Processing pngs
"; 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 incluidas en este GIU. Simplemente arrastre y suelte y lo hace por usted.

https://pnggauntlet.com/

Aunque lleva tiempo, intente comprimir un archivo png de 1MB. 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 formas y gana la mejor: D

En cuanto a la compresión JPG, me parece arriesgado eliminar los 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

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