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

Question

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:

• sin pérdida de compresión http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg podría salvar 33.5KiB (reducción del 85%).
• La compresión sin pérdida http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg podría ahorrar 18.5KiB (77% de reducción).
• La compresión sin pérdida 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 (51% de reducción).
• 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 través de ambos tipos de archivos JPG y PNG (no he probado GIF u otros.)

Nota también las miniaturas de Flickr (todas esas imágenes son de 75x75 píxeles.) Son algunas bastante grandes ahorros . 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 un ahorro muy menores:

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

He visto que PageSpeed ​​sugiere ahorros bastante buenos en los archivos PNG que he creado utilizando la función 'Guardar para Web' de Photoshop.

Así que mi pregunta es, ¿qué cambios están haciendo en las imágenes para reducirlas por 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?

Answer 1

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

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

---

Para los archivos PNG, utilizan OptiPNG con algún enfoque de ensayo 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, el resultado más pequeño se mantiene. Simple como eso.

(NB: La herramienta de línea de optipng comando hace que también, si usted proporciona -o 2 través -o 7)

---

Para archivos JPEG, utilizan 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) {} 

---

Existe también image_converter.cc que se utiliza para convertirlo sin pérdidas al formato más pequeño.

Answer 2

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

Answer 3

Es cuestión de invertir el tiempo de CPU del codificador para la eficiencia de 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, p. PNG8 + a en lugar de PNG24 + a, tablas optimizadas de Huffman en JPEG, etc.

Photoshop no se esfuerza al hacer las imágenes para la web, por lo que no es sorprendente que una herramienta lo supere.

Ver

• ImageOptim (sin pérdida) y
• ImageAlpha (pérdidas) para los archivos más pequeños (PNG) y high-level description how it works
• JPEGmini/MozJPEG (con pérdida) para una mejor compresor JPEG.

Answer 4

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

que fue capaz de obtener exactamente los mismos resultados de compresión como Page Speed ​​utilizando la versión Windows de jpegtran que se puede obtener en 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 la compresión de Page Speed, he especificado Huffman optimización 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, escriba: jpegtran

o para utilizar las imágenes de síntesis automática de la pestaña Page Speed ​​en Firebug:

que era capaz de seguir el consejo de Pumbaa80 para obtener acceso a los archivos optimizados de PageSpeed.Afortunadamente, la captura de pantalla here proporciona más claridad para el entorno FireFox. (Pero yo no era capaz de obtener acceso a una versión local de estos archivos optimizados en Chrome.)

Y para limpiar el sucio Page Speed ​​Los nombres de archivo mediante Adobe Bridge & expresiones regulares:

Aunque Page Speed ​​en Firefox fue capaz de generar archivos de imagen optimizada para mí, sino que también cambiaron sus nombres que dan vuelta nombres simples como:

nice_picture.jpg 

en

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. de inicio de Adobe Bridge
2. Seleccionar todos los archivos (utilizando el Control A)
3. Seleccione Herramientas> Cambiar nombre de lote (o control de cambio R)
4. En el campo de selección de selecciones previas "sustitución de cadenas". Los campos Nuevos nombres de archivos debería mostrar ahora “sustitución de cadenas”, seguido de "Nombre del archivo original"
5. Active la casilla llamada “Utilizar expresiones regulares”

6. En la sección “Buscar”, introduzca la expresión regular (que seleccionará todos caracteres empezando por el separador de guión más a la derecha):?!...

   _ (* _) (*) \ jpg $

7. en el “Sustituir por”, introduzca:

   .jpg

8. Opcionalmente, haga clic en el botón Vista previa para ver los resultados de cambio de nombre por lotes propuestos, a continuación, cierre

9. Haga clic en el botón Cambiar nombre

Tenga en cuenta que después del procesamiento, Puente anula la selección de los archivos que no eran afectado. 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.

Configuración de pantalla/Solución de problemas

Si tiene problemas, es posible que algunos navegadores podrían no mostrar la expresión regex arriba correctamente (culpar a mis caracteres de escape) por lo que para una captura de pantalla de la configuración (junto con estas instrucciones), ver:

How to Use Adobe Bridge's Batch Rename tool to Clean up Optimized PageSpeed Images that have Messy Filenames

Answer 5

utilizo jpegoptim para optimizar los archivos JPG y optipng para optimizar los archivos PNG.

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

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

Puedes añadir -m[%] a jpegoptim a pérdidas comprimir imágenes JPG, por ejemplo:

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

Para optimizar todos los archivos 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.

Answer 6

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

Answer 7

Si está buscando el procesamiento por lotes, recuerde que trimage se queja si no tiene Xserver disponible. En ese caso, solo escriba una secuencia de comandos 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.

Answer 8

Hay un script por lotes muy práctico que optimiza de forma recursiva imágenes debajo de una carpeta mediante OptiPNG (de this blog):

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

UNA LÍNEA!

Answer 9

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

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

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

https://pnggauntlet.com/

Se necesita tiempo, sin embargo, tratar de comprimir un archivo de 1 MB png - Me sorprendió la cantidad de CPU entró en esta comparación de compresión que tiene que ser lo que está pasando aquí. Parece que la imagen está comprimida de 100 maneras 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

Hoy guardé 113MB en 5500 archivos en una instalación de WP, por lo que definitivamente vale la pena.