it-swarm-es.com

¿Qué puedo hacer para reducir el tamaño de archivo de mis imágenes?

Trabajando con algunos temas wordpress, he estado modificando algunos de los archivos de imagen y noté que mis versiones editadas son a veces 3-4 veces más grandes que las originales (guardadas usando el mismo formato). No quiero degradar la calidad: ¿cuáles son algunas de las formas de reducir el tamaño de un archivo para que se cargue más rápido?

En este momento, por ejemplo, uso Photoshop y configuro el control deslizante de calidad de imagen en '8' (de 10).

15
Ryan Elkins

Smashing Magazine hizo 2 excelentes artículos sobre Optimización PNG y Optimización JPG .

Son bastante profundos y explican con gran detalle algunas cosas que quizás no conozca sobre los formatos y sus implementaciones. Por ejemplo, el artículo JPEG: "Tenga en cuenta que cuando establece la Calidad en menos de 50 en Photoshop, ejecuta un algoritmo de optimización adicional llamado muestreo descendente de color, que promedia el color en los bloques de ocho píxeles vecinos".

Ambos artículos incluyen técnicas específicas que puede usar en Photoshop para preparar sus archivos para una mayor compresión. Lo cual es mucho más efectivo que las técnicas utilizadas después de guardar un archivo.

Una vez que haya guardado estos archivos, o en archivos que no tenga la suerte de tener archivos fuente en capas para ajustar en Photoshop, todavía hay más compresión para escurrir estos archivos.

Yo uso una aplicación para Mac llamada ImageOptim . Desde su sitio:

ImageOptim optimiza las imágenes, por lo que ocupan menos espacio en disco y se cargan más rápido, al encontrar los mejores parámetros de compresión y al eliminar comentarios innecesarios y perfiles de color. Maneja animaciones PNG, JPEG y GIF.

ImageOptim proporciona GUI para varias herramientas de optimización: AdvPNG de AdvanceCOMP, OptiPNG , PngCrush , JpegOptim , jpegtran de libjpeg, Gifsicle y opcionalmente PNGOUT .

Es excelente para publicar imágenes en la web (reduce fácilmente las imágenes "Guardado para la Web" en Photoshop) y también es útil para hacer más pequeñas las aplicaciones de Mac y iPhone.

Pedazo de pastel Arrastre sus imágenes (o carpetas de imágenes) a la ventana, se ejecuta a través de todas estas herramientas que modifican los esquemas de compresión y eliminan metadatos innecesarios e información de perfil de color (que de todos modos no son ampliamente compatibles; debe corregir los perfiles de color antes de guardar, no guardarlos e incrustarlos).

Todas las herramientas vinculadas en esa cita tienen versiones de Windows/Linux/Mac, excepto PNGOUT, pero afortunadamente alguien portó PNGOUT a OS X y Linux porque son muy reflexivos. Si elige usar ImageOptim, incluirá todos menos PNGOUT en el .app, así que tome el puerto PNGOUT, suéltelo en/usr/local/bin (o donde sea) y dígale a ImageOptim dónde está.

No es raro para mí, especialmente con imágenes PNG, ver que los tamaños de archivo caen más del 30% incluso después de guardarlos a través de "Guardar para Web y dispositivos" de Photoshop.

Protip: después de ejecutar la optimización, ordene por la columna del icono a la izquierda y seleccione todas las filas con el icono (X), archivos que ya no se redujeron. Elimínelos de la lista y vuelva a ejecutar todas las imágenes que tengan el icono de marca de verificación. Casi puedo prometerle que tendrá imágenes que aún perderán tamaño de archivo. Repita la clasificación, la selección, la eliminación y la repetición hasta que obtenga todos los iconos (X) y lo llame por día.

14
Bryson

Al guardar fotografías en Photoshop, recomiendo usar File > Save for Web and Devices. Te permitirá jugar con niveles de compresión y ver el resultado visual en tiempo real. En las fotografías, generalmente puede guardarlo por debajo del nivel 8 y aún así obtener excelentes resultados. alt text

10
jessegavin

Es posible que desee consultar Yahoo's Smush.it . He encontrado que funciona muy bien.

4
Travis Northcutt

Para las imágenes PNG, puede reducir el número de colores en el mapa de colores y guardarlo como un PNG indexado. Por ejemplo, considere un logotipo de 128x128 píxeles (sin comprimir). Imagine que solo hay 16 colores que realmente usa.

  • PNG-32, cuatro bytes por píxel - 65 KB
  • PNG-8, un byte por píxel - 16 kB
  • PNG-4, cuatro bits por píxel - 8 KB

Puede ver que sin reducir la calidad de la imagen (esto solo se aplica a ciertos tipos de imágenes) puede reducir sustancialmente el tamaño.

Para botones e íconos de sitio, también puede considerar agregarlos en una imagen y usar CSS o JavaScript para controlar su visualización (sprites). Esto ahorra en el número de solicitudes HTTP realizadas para cada imagen.

4
dmsnell

Prueba otros formatos.

  • JPEG para fotografías
  • PNG para fotografías con alfa y/o sombreado
  • GIF para imágenes con una pequeña paleta de colores (negro/blanco o un icono amarillo o algo)
3
Aaron

Básicamente, intente guardar su imagen en diferentes formatos y luego mire el tamaño del archivo.

Si está utilizando JPEG, debería poder ajustar la calidad de la imagen hacia arriba y hacia abajo en un editor de gráficos como Paint.net. La calidad de imagen del 50% suele ser lo suficientemente buena para la web y hace que la imagen sea mucho más pequeña.

Con PNG no puede hacer esto, pero vale la pena señalar que a veces PNG es mucho más grande y otras mucho más pequeño que JPEG. PNG es mucho más pequeño para imágenes en blanco y negro, por ejemplo, como dibujos lineales en blanco y negro.

El consejo que se da en estos días es usar sprites CSS para acelerar los tiempos de carga al reducir las solicitudes, pero de nuevo debes mirar el tamaño de imagen que obtienes. Es bastante posible que la imagen CSS Sprite sea mucho más grande que las imágenes componentes, si, por ejemplo, combina varios PNG en blanco y negro con uno en color.

2
delete

También desea asegurarse de que está eliminando todos los datos EXIF: casi todo esto es irrelevante para los usuarios en la web, ¿realmente necesitan saber que utilizó una Canon 5D para tomar la foto y que utilizó un F-Stop de 2.8, expuesto durante 0.5 segundos, con un ISO de 160, sin sesgo de exposición y una distancia focal de 9 mm?

Todos estos metadatos agregan peso a su imagen y, en general, deben eliminarse.

Como señala jessegavin , la mayoría de las aplicaciones de imágenes le mostrarán una vista previa de los efectos de la compresión; úselas, ya que una configuración general de "8" rara vez le dará la mejor compensación posible.

Finalmente, el plugin Google Page Speed Firefox/ Firebug puede darle una buena idea de cuánto podría reducir el tamaño de las imágenes (incluso le permite ver y guardar las versiones más pequeñas) .

2
1
adamcodes

Una vez que haya hecho todas las otras sugerencias para asegurarse de que su imagen sea lo más pequeña posible mientras conserva el nivel de calidad deseado, también querrá configurar su sitio web para que sirva imágenes con encabezados HTTP mínimos y asegúrese de que los encabezados que está sirviendo permiten que las imágenes se almacenen de manera adecuada mediante el almacenamiento en caché de servidores proxy y navegadores web.

Para reducir el tamaño de las solicitudes, asegúrese de que su servidor web esté configurado para no enviar encabezados inútiles como X-Powered-By. Además, asegúrese de que está sirviendo cosas como imágenes, CSS y otros componentes estáticos desde un Host que no establece cookies (por ejemplo, static.example.com).

Para las imágenes que son estáticas, establezca su encabezado Expires en una fecha futura. Esto garantiza que el navegador web y los servidores proxy de almacenamiento en caché en el medio mantendrán la imagen el mayor tiempo posible. El único inconveniente de esto es que si desea mostrar una imagen diferente, necesitará usar un nombre de archivo diferente y un enlace a eso. La numeración de versiones en el nombre de archivo (por ejemplo, myimage_1.png o /images/3/logo.png) puede ser una forma efectiva de hacerlo. Para páginas menos estáticas, establezca un encabezado realista Caduca (acceso más X horas) y asegúrese de configurar el encabezado Última modificación o el encabezado eTag (no ambos) para que los navegadores que hayan descargado previamente los archivos puedan probar rápidamente si tienen la versión actual al comparar encabezados en lugar de desplegar toda la imagen.

Aunque hay muchos recursos disponibles para analizar estas técnicas, Yahoo ha hecho un gran trabajo al brindar muchos consejos para mejorar el rendimiento de la entrega de contenido en un solo lugar.

1
JasonBirch