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


138

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:

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:

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?


Parece que Pagespeed ahora exige compresión con pérdida. Antes de que los resultados dijeran: "La compresión sin pérdidas xxx.jpg podría ahorrar xx kb (xx% de reducción)". Ahora dice "Comprimir xxx.jpg podría ahorrar xx kb (xx% de reducción)" Es importante destacar que Google parece solicitar comprimir con pérdida solo las imágenes más pequeñas (miniaturas, etc.). ¿Alguien puede averiguar qué herramientas y parámetros de compresión con pérdida está utilizando Google?
Martin

Respuestas:


83

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


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.


3
Específicamente, reta_color_profile (falso) para JPEG puede ser una mala idea. A medida que las pantallas de gama de colores extendidos se vuelven más comunes, una instrucción de reproducción del color claramente definida se vuelve ambigua. Si la imagen original estaba codificada con sRGB, esto todavía funcionará en algunos navegadores (Safari, Firefox con aproximadamente: modificación de configuración), mientras que en otros solo las imágenes etiquetadas en realidad podrían ser administradas por color (Firefox predeterminado). De los navegadores curso sin ningún color capacidades de gestión no le importa ...
CO

2
He estado corriendo optipng file.png -o7y yo no estoy en cualquier lugar cerca de lo que se muestra Google. ¿Quizás se convierten a SVG cuando es posible?
Nateowami

@Nateowami Tuve el mismo problema ... para algunos PNG, Google funciona mejor que optipng -o7. Para estos, puede descargar las imágenes optimizadas desde el sitio web de velocidad de página.
chrisvdb

46

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.


29

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


1
Gracias por el enlace. Supongo que realmente estoy buscando aprender más sobre qué tipos de redundancias hay en los archivos de imagen que pueden eliminarse si el principal problema es el tamaño del archivo. Sé que la información está disponible en la web, solo quería tener un buen lugar para recopilarla aquí en SO.
Drew Noakes

Utilizo una herramienta de compilación personalizada que comprime las imágenes con optipng y pngcrush, luego selecciona el archivo más pequeño. Aún así, Page Speed ​​se queja de imágenes no óptimas. Entonces, ¿qué herramienta utilizan realmente?
user123444555621

@ Pumbaa80 También puede probar advsys.net/ken/util/pngout.htm (que dice específicamente que a veces puede obtener tamaños más pequeños que optipng y pngcrush).
Ámbar

Me acabo de enterar de que Page Speed ​​usa optipng, con un contenedor personalizado que determina las mejores opciones de configuración. @Amber No es una opción, no estoy usando Windows;)
user123444555621

15

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


La única respuesta que intenta responder a la pregunta real que realmente hizo la O / P, en lugar de la pregunta diferente "¿cómo puedo comprimir más mis imágenes"? lol
toddmo

13

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


¡Gracias por compartir esto!
rotaercz

1
Si usa IIS, PageSpeed ​​fue portado recientemente a Windows y realiza estas mismas optimizaciones automáticamente. iispeed.com Para obtener la mejor reducción, aunque sin ninguna pérdida, he estado convirtiendo masivamente directorios completos de archivos JPEG usando JPEGmini jpegmini.com
James Moberg

Parece que ya no hay una extensión de PageSpeed ​​para Firebug.
Stephan Schielke

10

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.


2
¿Alguna alternativa para Windows?
Mathias Lykkegaard Lorenzen

2

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!


1
FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full "%G" si tiene espacios en su nombre de archivo
Ned Martin

0

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.


0

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!

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.