una recursos que página puede pese para optimize optimizar optimizados menos los las insights imágenes imagenes imagen gran google formatear esta descarga datos correctamente comprimir como chrome cantidad bytes ahorrar compression imaging pagespeed google-pagespeed

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



pagespeed (9)

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

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:

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 75x75 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:

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?

En mi opinión, la mejor opción que maneja de manera efectiva la mayoría de los formatos de imagen en un trimage es el trimage . 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.

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

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!

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!

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<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.

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

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.

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 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 here 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 casilla de verificación 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