Anteriormente, escribí un artículo sobre cómo reducir el tamaño de un archivo de imagen usando la opción de correo electrónico integrada en explorer o usando un programa de escritorio llamado Image resizer para Windows. Estas son buenas opciones, pero hay otras formas de optimizar una imagen. Además, muchos sitios web le dirán que use Paint, pero he descubierto que no es un buen método porque las imágenes se ven mucho peor.
En primer lugar, es importante comprender que algunos métodos utilizados para reducir el tamaño de una imagen darán como resultado una imagen de menor calidad, lo que puede estar bien para un sitio web, pero no para imprimir. Esto suele ocurrir cuando cambia la resolución de una imagen, por ejemplo, de 25601440 a 19201080.
Otra forma de reducir el tamaño de una imagen es comprimir la imagen. Hay dos tipos de compresión: sin pérdida y con pérdida. La compresión sin pérdida reducirá el tamaño de la imagen sin perder un solo píxel del archivo original. Lossy significa que algunos datos se perderán.
Finalmente, el formato de la imagen también hace una gran diferencia en el tamaño del archivo. Una foto normal que tomes con tu cámara probablemente será una imagen JPG porque funciona bien en términos de compresión. Sin embargo, las imágenes con pocos colores (256 colores o menos) serán mucho más pequeñas si usa GIF. PNG es un formato sin pérdidas que se puede comprimir mucho. Funciona bien para gráficos web y fotografías complejas.
En este artículo, doy algunos ejemplos con capturas de pantalla de cómo comprimir una imagen usando múltiples formatos para que puedas ver las diferencias de tamaño y calidad.
¿Cómo reducir el tamaño de la imagen?
Comencemos hablando de cómo puede reducir el tamaño de la imagen sin perder calidad. Esto le dará el archivo más pequeño manteniendo la calidad original de la imagen. Obviamente, el uso de compresión con pérdida le dará archivos mucho más pequeños, como verá en los ejemplos a continuación, pero perderá algo de calidad.
Formato y compresión
Primero, comencemos con un gráfico de color plano. Como ejemplo, acabo de tomar una captura de pantalla del sitio web de HDG (600319) ya que tiene pocos colores y no es complejo. Aquí están los tamaños de los archivos en los diferentes formatos sin ningún tipo de compresión:
GIF original: 27 KB
JPEG original: 67 KB
PNG originales: 68 KB
Como puede ver, los archivos PNG y GIF son definitivamente más nítidos que los JPEG. Como se mencionó anteriormente, JPEG es mejor para la fotografía. GIF funciona bien aquí, ya que solo pesa 27 KB en comparación con PNG, que tiene 68 KB. Sin embargo, en mi experiencia, los PNG se comprimen mucho mejor si se trata de una compresión con pérdida y la calidad de la imagen sigue siendo muy buena.
Cuando hice una compresión sin pérdida de los tres, solo las imágenes JPG y PNG se redujeron en tamaño, pero no mucho. El PNG pasó a 45 KB y el JPG pasó a 58 KB. Cuando hice una compresión con pérdida, los números de PNG fueron los más impresionantes.
GIF con pérdida: 22 KB
JPEG con pérdida: 50 KB
PNG con pérdida: 23 KB
Como puede ver, el PNG se ve mejor y es solo 1 KB más grande que el GIF. Es por eso que uso imágenes PNG en este sitio web para la mayoría de mis capturas de pantalla. JPEG normalmente siempre será mejor para imágenes fotográficas con muchos colores. Pero recuerde, JPG es solo de 16 bits, mientras que PNG es de 24 bits, por lo que JPG admite millones de colores, pero PNG admite colores ilimitados.
El GIF solo se redujo en 5 KB, pero al mismo tiempo perdió mucha calidad. El JPG no se comprimió mucho, pero los JPG normalmente no se comprimen tan bien como los PNG.
Puede usar su aplicación de fotos para cambiar el formato de una imagen para ver cuál es el tamaño más pequeño. Para la compresión, recomiendo usar herramientas en línea, ya que hacen un gran trabajo. Yo personalmente uso Kraken.io para mis sitios web, pero hay otros buenos como TinyPNG y Optimizilla.
Cambiar resolución de imagen
La forma principal de reducir el tamaño de una imagen es reducir la resolución de la imagen. Si tiene un archivo que es 40002500, reducir el tamaño a 20001250 hará que el archivo tenga la mitad del tamaño. Obviamente perderá una gran parte de la imagen original en los datos, pero dependiendo de su propósito, puede que no importe.
Cada programa de edición de imágenes tendrá una forma de cambiar o cambiar el tamaño de la imagen. Aquí puede cambiar el ancho/alto o la resolución, que normalmente es puntos por pulgada (DPI) o píxeles por pulgada (PPI). Lea este excelente artículo sobre la diferencia entre DPI y PPI. Para cualquier cosa en la web, solo tiene que preocuparse por los píxeles, no por los puntos. Los puntos solo afectarán a las imágenes impresas.
Entonces, por ejemplo, mi sitio web solo puede tener imágenes de hasta 680 píxeles de ancho. Por lo tanto, siempre cambio el tamaño de una imagen a 680 píxeles o menos antes de subirla porque, de lo contrario, WordPress la cambiará a 680 píxeles para mí, pero el tamaño del archivo será mayor de lo necesario.
Si desea obtener más información sobre el número de 72 píxeles/pulgada y la opción de remuestreo, consulte esta excelente publicación que incluye muchos detalles.
Cambiar profundidad/modo de color
En el ejemplo anterior, si tiene una imagen con solo unos pocos colores, entonces no necesita usar un formato de imagen que admita millones de colores. En mi ejemplo de página web, el GIF solo necesita admitir color indexado y 8 bits/canal.
Puede elegir el color RGB y 16 bits/canal, pero la imagen se vería exactamente igual, pero tendría un tamaño de archivo más grande. Puede leer más sobre estos modos de color en el sitio web de Adobe. Además de Photoshop, la mayoría de los editores de imágenes también le permiten cambiar la profundidad/modo de color de una imagen.
Delimitar imagen
¡Otra manera fácil de reducir el tamaño de una imagen es simplemente recortarla! Todo lo que esté recortado se eliminará por completo de la imagen. No importa qué imagen tenga, normalmente puede recortarla un poco al menos, lo que definitivamente ayudará a reducir el tamaño.
Y ten en cuenta que un recorte no tiene por qué ser el típico en el que recortas cosas de arriba/abajo o de izquierda/derecha. SnagIt Editor, uno de mis favoritos, tiene una herramienta de corte que te permite cortar partes de imágenes desde el medio de una imagen horizontal o verticalmente. Esto es útil con más frecuencia de lo que piensas. Aquí hay un ejemplo en el que tengo que incluir una captura de pantalla del menú Inicio mientras escribo un comando.
El tamaño del archivo anterior era originalmente de 22 KB. En lugar de usar eso, corté la parte del medio, que no necesitaba como se muestra a continuación.
¡El nuevo tamaño de archivo es de solo 9 KB! Todo eso sin siquiera hacer ninguna compresión o cambiar el formato del archivo. Una vez que lo comprimí, lo reduje a solo 4.4 KB. Por lo tanto, recortar es una forma importante de reducir el tamaño de una imagen.
