Al trabajar con algunos temas de 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).
Respuestas:
Smashing Magazine hizo 2 excelentes artículos sobre optimización de PNG y optimización de JPG .
Son bastante profundos y explican con gran detalle algunas cosas que quizás no sepa sobre los formatos y sus implementaciones. Por ejemplo, el artículo JPEG: "Tenga en cuenta que cuando establece la calidad por debajo de 50 en Photoshop, ejecuta un algoritmo de optimización adicional llamado muestreo 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.
Después de guardar estos archivos, o en archivos que no tiene la suerte de tener capas de archivos fuente para retocar 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 los archivos caen más del 30% incluso después de guardar 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 ejecución hasta que obtenga todos los íconos (X) y lo llame por día.
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.
Es posible que desee ver Smush.it de Yahoo . He encontrado que funciona muy bien.
Para las imágenes PNG, puede reducir la cantidad 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.
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.
Prueba otros formatos.
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 muy posible que la imagen de sprites CSS sea mucho más grande que las imágenes componentes, si, por ejemplo, combina varios PNG en blanco y negro con uno en color.
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. Úselos , ya que una configuración general de "8" rara vez le dará la mejor compensación posible.
Finalmente, el complemento Google Page Speed Firefox / Firebug puede darle una buena idea de cuánto podría reducir el tamaño de las imágenes (lo que incluye permitirle ver y guardar las versiones más pequeñas).
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 en el futuro lejano. 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 vincularlo. La numeración de versiones en el nombre del 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 comparando 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.