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 incorporada 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 te dirán que uses 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 ser adecuado para un sitio web, pero no para imprimir. Esto suele ocurrir cuando cambia la resolución de una imagen, por ejemplo, de 2560 × 1440 a 1920 × 1080.
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. Pérdida 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 imagen normal que tome de su 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 utiliza GIF. PNG es un formato sin pérdida que puede ser altamente comprimido. 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 utilizando varios formatos para que pueda 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 a la vez que mantiene la calidad original de la imagen. Obviamente, el uso de la 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 (600 × 319) 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 original: 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 hace bien aquí ya que solo tiene 27 KB en comparación con PNG, que es de 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 de tamaño, pero no mucho. El PNG fue a 45 KB y el JPG fue a 58 KB. Cuando hice una compresión con pérdida, los números para PNG fueron los más impresionantes.
GIF con pérdida: 22 KB
JPEG con pérdida: 50 KB
Lossy PNG: 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. Normalmente, JPEG siempre será mejor para imágenes de fotografía con muchos colores. Pero recuerde, JPG es solo de 16 bits, mientras que PNG es de 24 bits, entonces 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 lo hacen los PNG.
Puede usar su aplicación de fotos para cambiar el formato de una imagen para ver qué tamaño es el más pequeño. Para la compresión, recomiendo usar herramientas en línea ya que hacen un gran trabajo. Personalmente uso Kraken.io para mis sitios web, pero hay otros buenos como TinyPNG y Optimizilla.
Cambiar la resolución de la imagen
La forma principal de reducir una imagen es reducir la resolución de la imagen. Si tiene un archivo que es 4000 × 2500, entonces reducir el tamaño a 2000 × 1250 hará que el archivo sea 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 son puntos por pulgada (DPI) o píxeles por pulgada (PPI). Lea este gran artículo sobre la diferencia entre DPI y PPI. Para cualquier cosa en la web, solo tienes que preocuparte por los píxeles, no los puntos. Los puntos solo afectarán a las imágenes impresas.
Así, por ejemplo, mi sitio web solo puede tener imágenes de hasta 680 píxeles de ancho. Por lo tanto, siempre redimensiono una imagen a 680 píxeles o menos antes de subirla porque, de lo contrario, WordPress la redimensionará a 680px para mí, pero el tamaño del archivo será más grande de lo necesario.
Si quieres saber más sobre el número de 72 píxeles / pulgada y la opción de remuestrear, echa un vistazo a esta excelente publicación que entra en gran detalle.
Cambiar la profundidad del color / modo
En el ejemplo anterior, si tiene una imagen con pocos colores, no necesita utilizar un formato de imagen que admita millones de colores. En mi ejemplo de página web, el GIF solo necesita ser compatible con el color indexado y 8 bits / canal.
Puede elegir el color RGB y 16 bits / canal, pero la imagen se verá exactamente igual, pero tendrá un tamaño de archivo más grande. Puede leer más sobre estos modos de colores 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 forma fácil de reducir el tamaño de una imagen es simplemente recortarla. Todo lo que se recorte se eliminará de la imagen. Independientemente de la imagen que tenga, normalmente puede recortarla al menos un poco, lo que definitivamente ayudará a reducir el tamaño.
Y tenga en cuenta que un recorte no solo tiene que ser el típico en el que se recortan elementos de la parte superior / inferior o izquierda / derecha.SnagIt Editor, uno de mis favoritos, tiene una herramienta de recorte que te permite recortar partes de las imágenes desde la mitad de una imagen horizontal o verticalmente. Esto viene de manera práctica más a menudo de lo que piensas. Aquí hay un ejemplo donde tengo que incluir una captura de pantalla del menú Inicio mientras escribo un comando.
El tamaño de archivo anterior era originalmente de 22 KB de tamaño. En lugar de usar eso, corté la parte media, que no necesitaba como se muestra a continuación.
El nuevo tamaño del archivo es de solo 9 KB! Todo eso sin siquiera hacer ninguna compresión o cambiar el formato de archivo. Una vez que lo comprimí, lo bajé a solo 4.4 KB. Por lo tanto, recortar es una forma importante de reducir el tamaño de una imagen.
¡Con suerte, redujo el tamaño de su imagen y aprendió un poco sobre cómo funcionan las imágenes digitales en el camino! Si tiene alguna pregunta, no dude en comentar. ¡Disfrutar!