Mira Nuestro Videotutorial sobre la Compresi\u00f3n con P\u00e9rdidas vs. Sin P\u00e9rdidas<\/a><\/h3>\n<\/kinsta-video>\nDiferencias entre Lossy y Lossless<\/h2>\n
Cuando se trata de cualquier compresi\u00f3n de im\u00e1genes digitales, hay varios formatos diferentes entre los que elegir. A veces tienen otros nombres, dependiendo de muchos factores. Sin embargo, a nivel b\u00e1sico, encontrar\u00e1s dos tipos:<\/p>\n
\n- Compresi\u00f3n con p\u00e9rdidas:<\/b> El objetivo aqu\u00ed es proporcionar el menor tama\u00f1o de archivo posible para una imagen. Por ello, la calidad de la imagen suele tener poca importancia en la lista de prioridades.<\/li>\n
- Compresi\u00f3n sin p\u00e9rdidas:<\/b> Con este formato de compresi\u00f3n seguir\u00e1s encontrando una reducci\u00f3n sustancial del tama\u00f1o del archivo, pero la imagen no sufrir\u00e1 artefactos ni otros problemas.<\/li>\n<\/ul>\n
En la mayor\u00eda de los casos, tu decisi\u00f3n sobre qu\u00e9 formato utilizar se reducir\u00e1 a tu objetivo final: \u00bfquieres archivos min\u00fasculos o te centras en preservar la calidad?<\/p>\n
La compresi\u00f3n con p\u00e9rdidas eliminar\u00e1 permanentemente de la imagen los datos que considere innecesarios. Utiliza muchas t\u00e9cnicas diferentes para conseguirlo, lo que da lugar a archivos mucho m\u00e1s peque\u00f1os.<\/p>\n
La compresi\u00f3n sin p\u00e9rdidas tambi\u00e9n elimina datos, pero puede restaurar el original si es necesario. El objetivo es mantener la calidad, pero reducir el tama\u00f1o del archivo.<\/p>\n
Hay varias formas de conseguirlo, pero el resultado suele ser el mismo. Para saber cu\u00e1l es la opci\u00f3n adecuada para tus necesidades, primero vamos a dar un paso atr\u00e1s y revisar los fundamentos de las im\u00e1genes y la compresi\u00f3n en general.<\/p>\n\n
Elementos de una imagen digital<\/h2>\n
Al igual que en el desarrollo de software y de la web, suele haber una \u00abpila\u00bb para llevar una imagen desde la c\u00e1mara hasta la web.<\/p>\n
Una imagen comienza como datos \u00aben bruto\u00bb (de ah\u00ed el nombre RAW). Esto es parecido al c\u00f3digo de una aplicaci\u00f3n: Los fragmentos, l\u00edneas y valores se traducen en fondos con color, marcadores de posici\u00f3n de la imagen, elementos din\u00e1micos y mucho m\u00e1s.<\/p>\n
En el caso de una imagen, el archivo RAW presenta una representaci\u00f3n de la imagen ligeramente diferente seg\u00fan el fabricante de la c\u00e1mara, el software de edici\u00f3n, el algoritmo del espacio de color, etc. A partir de ah\u00ed, editas la imagen y la exportas como uno de los diversos formatos de archivo (m\u00e1s adelante se habla de ellos):<\/p>\n![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/11\/editing-software.png\")
Un ejemplo de edici\u00f3n de un archivo RAW en Capture One.<\/figcaption><\/figure>\nHay algunos elementos diferentes que componen una imagen digital est\u00e1ndar:<\/p>\n
\n- Tipo de archivo:<\/b> Los diferentes tipos proporcionar\u00e1n calidades que pueden o no adaptarse a tu imagen final. La clave es elegir el tipo de archivo m\u00e1s adecuado para la aplicaci\u00f3n.<\/li>\n
- Resoluci\u00f3n:<\/b> A menudo lo ver\u00e1s expresado como megap\u00edxeles (MP), pero tambi\u00e9n se utilizan p\u00edxeles por pulgada (PPI) o puntos por pulgada (DPI). Las resoluciones m\u00e1s altas ofrecen mayor calidad, pero tambi\u00e9n aumentan el tama\u00f1o inicial del archivo<\/li>\n
- Profundidad de bits:<\/b> Este aspecto determina la informaci\u00f3n de color de una imagen. Una profundidad de bits baja representar\u00e1 s\u00f3lo unos pocos colores, mientras que una profundidad de bits alta podr\u00eda representar millones de colores a la vez. Por lo general, cuanto m\u00e1s alta sea, mejor.<\/li>\n
- Dimensiones:<\/b> Es el espacio f\u00edsico que ocupa una imagen. Por ejemplo, 1.000 p\u00edxeles x 500 p\u00edxeles podr\u00edan definir el tama\u00f1o total de una imagen.<\/li>\n
- Espacio de color:<\/b> Es un algoritmo que determina c\u00f3mo se muestran los colores. Cada espacio de color est\u00e1 configurado de forma diferente, y a menudo se reduce a la preferencia del fot\u00f3grafo.<\/li>\n<\/ul>\n
Estos elementos se combinan para ofrecer una imagen final de calidad variable. Por ejemplo, una fotograf\u00eda JPEG de gran tama\u00f1o y alta resoluci\u00f3n y profundidad de bits ofrecer\u00e1 una calidad y nitidez supremas:<\/p>\n![\"Una](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/11\/high-quality-image.jpg\")
Una imagen de alta calidad.<\/figcaption><\/figure>\nPor el contrario, incluso una imagen de grandes dimensiones y con capacidad para mostrar muchos colores puede tener un aspecto pobre a baja resoluci\u00f3n:<\/p>\n![\"Una](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/11\/low-quality-image.jpg\")
Una imagen con baja calidad.<\/figcaption><\/figure>\nEste equilibrio es la forma de revelar la imagen principal antes de aplicar la compresi\u00f3n. Sin embargo, el formato que utilices para la imagen tiene mucho que ver con la calidad final.<\/p>\n
\u00bfC\u00f3mo funciona la optimizaci\u00f3n de la imagen en la web?<\/h2>\n
Como la compresi\u00f3n de im\u00e1genes es la misma en un sentido general bajo el cap\u00f3, puedes aplicar reglas est\u00e1ndar a la forma de optimizar las im\u00e1genes para la web.<\/p>\n
Cubrimos muchos de estos conceptos en otra parte del blog de Kinsta<\/a>, pero vale la pena hacer un resumen r\u00e1pido para que sirva de referencia:<\/p>\n\n- Utiliza una resoluci\u00f3n de 72 PPI, ya que es el est\u00e1ndar para la web. Puedes utilizar un PPI\/DPI m\u00e1s alto por razones de archivo, pero suponemos que vas a publicar en la web.<\/li>\n
- Establece el \u00abborde largo\u00bb de la imagen en 2048px, ya que es \u00f3ptimo para muchas aplicaciones diferentes.<\/li>\n
- Utiliza una profundidad de color de 8 bits si tienes la opci\u00f3n.<\/li>\n
- Pasa la imagen por una herramienta de compresi\u00f3n y optimizaci\u00f3n antes de publicarla.<\/li>\n<\/ul>\n
Es un formato sencillo que puede darte resultados consistentes, aunque la compresi\u00f3n y la optimizaci\u00f3n es algo que ampliaremos en el resto de este art\u00edculo.<\/p>\n
Para ello, veamos las ventajas e inconvenientes de la compresi\u00f3n con p\u00e9rdidas frente a la compresi\u00f3n sin p\u00e9rdidas.<\/p>\n
\u00bfC\u00f3mo puede ayudar la compresi\u00f3n de im\u00e1genes a tus im\u00e1genes web?<\/h3>\n
En t\u00e9rminos generales, la \u00abcompresi\u00f3n\u00bb acerca el m\u00ednimo y el m\u00e1ximo. Por ejemplo, la compresi\u00f3n eleva el volumen m\u00e1s bajo de la m\u00fasica y reduce el m\u00e1s alto. Esto hace que el nivel medio sea m\u00e1s alto para el o\u00eddo.<\/p>\n
En el caso de las im\u00e1genes, la compresi\u00f3n es m\u00e1s bien un proceso de reducci\u00f3n. Esto significa que hay un mayor \u00e9nfasis en quitar datos de tu imagen para reducir el tama\u00f1o del archivo, manteniendo la calidad lo m\u00e1s alta posible.<\/p>\n
Hay muchos algoritmos propios que ayudan a reducir el tama\u00f1o de los archivos de imagen. En muchos casos, son propiedad de una empresa concreta. Encontrar\u00e1s muchos est\u00e1ndares de compresi\u00f3n \u00abcon p\u00e9rdida\u00bb y \u00absin p\u00e9rdida\u00bb, cada uno con descriptores \u00fanicos:<\/p>\n![\"Las](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/11\/compression-formats.png\")
Las opciones de compresi\u00f3n dentro de ShortPixel.<\/figcaption><\/figure>\nDicho esto, la aplicaci\u00f3n de la compresi\u00f3n de im\u00e1genes tiene muchas ventajas que no son exclusivas de un formato concreto:<\/p>\n
\n- Puedes mantener un tama\u00f1o de archivo bajo, lo que mejora el rendimiento de tu sitio.<\/li>\n
- Por extensi\u00f3n, el servidor de tu sitio tendr\u00e1 menos trabajo que hacer, lo que repercute en el rendimiento.<\/li>\n
- Los tama\u00f1os de archivo peque\u00f1os ayudan a reducir las emisiones del servidor. De este modo, ayudas a contribuir a un futuro sostenible y \u00e9tico.<\/li>\n
- Podr\u00e1s mostrar una calidad casi perfecta y comparable seg\u00fan el algoritmo y la calidad de compresi\u00f3n que elijas.<\/li>\n<\/ul>\n
Al igual que para crear una imagen que se pueda compartir, jugar con varios valores de compresi\u00f3n, utilizar una compa\u00f1\u00eda espec\u00edfica y elegir el algoritmo correcto es vital para encontrar resultados que te funcionen.<\/p>\n
Ventajas y desventajas de la compresi\u00f3n con p\u00e9rdidas<\/h2>\n
La compresi\u00f3n con p\u00e9rdidas<\/a> reduce el tama\u00f1o del archivo de la imagen, casi con exclusi\u00f3n de todos los dem\u00e1s aspectos. El funcionamiento del algoritmo consiste en eliminar datos de forma permanente. Esto puede ser tan destructivo como parece.<\/p>\nAunque no vamos a entrar demasiado en los detalles, debes saber que algunos de los datos que la compresi\u00f3n con p\u00e9rdida elimina son visibles en la imagen. La idea es ofrecer la mejor representaci\u00f3n de la imagen original de alta calidad con un peso menor, y esto significa que algunos datos no pasar\u00e1n el corte.<\/p>\n
En general, el uso de la compresi\u00f3n con p\u00e9rdidas tiene un par de ventajas:<\/p>\n
\n- El tama\u00f1o de los archivos ser\u00e1 peque\u00f1o: en algunos casos, menos de 10 kilobytes (KB).<\/li>\n
- La p\u00e9rdida de calidad ser\u00e1 aceptable en muchos casos, a pesar de los artefactos.<\/li>\n<\/ul>\n
Esto nos lleva a los aspectos negativos del uso de la compresi\u00f3n con p\u00e9rdidas: que la calidad de la imagen se reducir\u00e1 con cualquier cantidad de compresi\u00f3n:<\/p>\n![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/11\/compression-slider.png\")
Un deslizador de compresi\u00f3n para una imagen JPEG.<\/figcaption><\/figure>\nVer\u00e1s que, en algunos casos, se aprecian bandas de color -donde los tonos de color no se representan de forma correcta- y una p\u00e9rdida de claridad en los bordes. Las im\u00e1genes con menos colores mostrar\u00e1n menos de esto, pero la reducci\u00f3n de la claridad seguir\u00e1 estando presente.<\/p>\n
Adem\u00e1s, la degradaci\u00f3n de la imagen es una caracter\u00edstica permanente del proceso de compresi\u00f3n. Esto significa que no hay forma de revertir los efectos m\u00e1s adelante.<\/p>\n
A pesar de los inconvenientes, la compresi\u00f3n con p\u00e9rdidas es excelente para la web y el rendimiento de tu sitio. El diminuto tama\u00f1o de los archivos no siempre da lugar a im\u00e1genes granuladas, aunque puedes (por supuesto) llevar las cosas al extremo:<\/p>\n![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/11\/over-compressed-cat-min.jpg\")
<\/a>Un ejemplo de imagen excesivamente comprimida.<\/figcaption><\/figure>\nSin embargo, la compresi\u00f3n con p\u00e9rdidas no es la \u00fanica opci\u00f3n. La compresi\u00f3n sin p\u00e9rdidas es una alternativa para los propietarios de sitios web preocupados por la calidad.<\/p>\n
Ventajas y desventajas de la compresi\u00f3n sin p\u00e9rdidas<\/h2>\n
La compresi\u00f3n sin p\u00e9rdidas hace lo que dice la etiqueta: Comprime el tama\u00f1o del archivo de una imagen tanto como sea posible sin afectar a la calidad visible. Lo hace eliminando los metadatos de la imagen, que pueden ocupar un espacio innecesario:<\/p>\n![\"Los](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/11\/image-metadata.png\")
Los metadatos de una imagen.<\/figcaption><\/figure>\nEl algoritmo de compresi\u00f3n sin p\u00e9rdidas tambi\u00e9n busca secuencias de p\u00edxeles que se repiten, y luego codifica un acceso directo para mostrarlas. Por ejemplo, tomemos \u00abInterfaz de l\u00ednea de comandos\u00bb A menudo definir\u00e1s su acr\u00f3nimo una vez, y luego usar\u00e1s \u00abCLI\u00bb (o el acr\u00f3nimo que elijas) para referirte a \u00e9l a la velocidad del rayo<\/p>\n
La compresi\u00f3n sin p\u00e9rdidas funciona del mismo modo, ya que es menos destructiva. Aunque la eliminaci\u00f3n de los metadatos no ser\u00e1 reversible, parte de la compresi\u00f3n s\u00ed lo ser\u00e1, lo que lo convierte en un algoritmo flexible para muchos usos.<\/p>\n
Las ventajas de utilizar la compresi\u00f3n sin p\u00e9rdidas giran en torno a la conservaci\u00f3n de la calidad:<\/p>\n
\n- La compresi\u00f3n sin p\u00e9rdidas conserva la mayor calidad de una imagen en comparaci\u00f3n con todos los dem\u00e1s algoritmos.<\/li>\n
- La compresi\u00f3n sin p\u00e9rdidas es fant\u00e1stica para fines de archivo. Por ejemplo, un fot\u00f3grafo puede equilibrar los recursos de almacenamiento con una imagen que conserve la mayor cantidad de datos.<\/li>\n
- El algoritmo sin p\u00e9rdidas es el preferido para las artes visuales: fotograf\u00eda, dise\u00f1o gr\u00e1fico, arte digital, etc. Combinando un algoritmo sin p\u00e9rdidas con la profundidad y la resoluci\u00f3n adecuadas se puede conseguir casi una copia \u00abuno a uno\u00bb.<\/li>\n<\/ul>\n
Sin embargo, hay que tener en cuenta que la compresi\u00f3n sin p\u00e9rdidas sirve para nichos espec\u00edficos: El abanico de aplicaciones es reducido. Esto reduce su disponibilidad general.<\/p>\n
Aqu\u00ed tienes otros contras de la compresi\u00f3n sin p\u00e9rdidas que debes tener en cuenta:<\/p>\n
\n- Si un sitio web utiliza muchas im\u00e1genes, la compresi\u00f3n sin p\u00e9rdidas puede no ser \u00f3ptima para mostrarlas. Esto se debe a que, en la mayor\u00eda de los casos, querr\u00e1s valorar los tama\u00f1os de archivo m\u00e1s peque\u00f1os en este tipo de situaciones.<\/li>\n
- Aunque la compresi\u00f3n reduce el tama\u00f1o de los archivos, los algoritmos sin p\u00e9rdida no alteran los datos de la imagen tanto como los que tienen p\u00e9rdida. Por ello, es posible que s\u00f3lo veas reducciones de tama\u00f1o marginales en lugar de resultados de adelgazamiento extremos.<\/li>\n<\/ul>\n
A continuaci\u00f3n, veremos la forma m\u00e1s r\u00e1pida (y potencialmente mejor) de hacerlo.<\/p>\n
\u00bfC\u00f3mo elegir entre con y sin p\u00e9rdidas?<\/h2>\n
Llegados a este punto, entiendes la diferencia entre la compresi\u00f3n con p\u00e9rdidas y sin p\u00e9rdidas. Sin embargo, es posible que a\u00fan no sepas cu\u00e1l es el mejor algoritmo para utilizar en tu sitio.<\/p>\n
Hay dos situaciones a tener en cuenta:<\/p>\n
\n- Para la mayor\u00eda de los casos de uso en la web, es aceptable utilizar la compresi\u00f3n con p\u00e9rdidas.<\/li>\n
- Si quieres mostrar fotograf\u00edas o arte fotografiado, la compresi\u00f3n sin p\u00e9rdidas te servir\u00e1 mejor.<\/li>\n<\/ol>\n
Estas consideraciones se basan en el uso de uno de los formatos de imagen web est\u00e1ndar, como JPEG, PNG o GIF. Sin embargo, tus necesidades de compresi\u00f3n pueden ser diferentes con formatos m\u00e1s modernos como HEIC y WebP.<\/p>\n
Nos atrever\u00edamos a decir que, a menos que muestres fotograf\u00edas en tu sitio, la compresi\u00f3n con p\u00e9rdidas deber\u00eda ser tu elecci\u00f3n por defecto. WordPress comprime las im\u00e1genes<\/a> por defecto, lo que demuestra que la compresi\u00f3n con p\u00e9rdidas es adecuada para casi todas las aplicaciones.<\/p>\nUtilizar un servicio de compresi\u00f3n online para optimizar tus im\u00e1genes<\/h2>\n
Hay muchas formas de comprimir tus im\u00e1genes antes de mostrarlas en tu sitio. Por ejemplo, puedes optar por aplicar la compresi\u00f3n en la fase de edici\u00f3n. De todos modos, esto podr\u00eda ser un subproducto de la conversi\u00f3n desde formatos RAW.<\/p>\n
Algunos alojamientos premium como Kinsta incluso ofrecen servicios integrados que pueden ayudarte a optimizar tus archivos de imagen autom\u00e1ticamente. La funci\u00f3n de optimizaci\u00f3n de im\u00e1genes de Kinsta<\/a>, que es gratuita para todos los clientes, crea versiones WebP<\/a> de tus im\u00e1genes y, a continuaci\u00f3n, muestra la m\u00e1s peque\u00f1a a tus visitantes mediante la CDN ultrarr\u00e1pida de Kinsta<\/a>. Puedes elegir entre compresi\u00f3n con o sin p\u00e9rdidas, y tambi\u00e9n puedes activar o desactivar la funci\u00f3n a voluntad.<\/p>\nAparte de las herramientas integradas, una opci\u00f3n popular es uno de los muchos servicios online. Cada uno ofrecer\u00e1 una selecci\u00f3n de algoritmos y una interfaz de usuario (UI) ejemplar. Adem\u00e1s, la mayor\u00eda tiene alg\u00fan servicio gratuito, al menos para probar la aplicaci\u00f3n antes de comprometerte.<\/p>\n
Cubrimos algunas opciones en nuestro art\u00edculo sobre optimizaci\u00f3n de im\u00e1genes<\/a>, aunque se trata de plugins espec\u00edficos de WordPress que se conectan a una interfaz de programaci\u00f3n de aplicaciones (API). La buena noticia es que muchos de estos plugins ofrecen tambi\u00e9n una interfaz online. Por ejemplo, considera ShortPixel<\/a>:<\/p>\n![\"La](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/11\/shortpixel-interface.png\")
La interfaz de ShortPixel.<\/figcaption><\/figure>\nAqu\u00ed, arrastrar\u00e1s las im\u00e1genes al cargador y esperar\u00e1s a que la aplicaci\u00f3n las comprima y procese. Sin embargo, primero deber\u00e1s elegir el algoritmo, ya que el proceso comenzar\u00e1 de inmediato.<\/p>\n
La elecci\u00f3n es sencilla: Dos formas de compresi\u00f3n con p\u00e9rdidas (\u00abLossy\u00bb y \u00abGlossy\u00bb), y una opci\u00f3n sin p\u00e9rdidas. La interfaz de ShortPixel explica muy bien la diferencia entre cada algoritmo, y puedes descargar las im\u00e1genes en cuesti\u00f3n de segundos.<\/p>\n
Diferencias entre Lossy y Lossless<\/h2>\n
Cuando se trata de cualquier compresi\u00f3n de im\u00e1genes digitales, hay varios formatos diferentes entre los que elegir. A veces tienen otros nombres, dependiendo de muchos factores. Sin embargo, a nivel b\u00e1sico, encontrar\u00e1s dos tipos:<\/p>\n
- \n
- Compresi\u00f3n con p\u00e9rdidas:<\/b> El objetivo aqu\u00ed es proporcionar el menor tama\u00f1o de archivo posible para una imagen. Por ello, la calidad de la imagen suele tener poca importancia en la lista de prioridades.<\/li>\n
- Compresi\u00f3n sin p\u00e9rdidas:<\/b> Con este formato de compresi\u00f3n seguir\u00e1s encontrando una reducci\u00f3n sustancial del tama\u00f1o del archivo, pero la imagen no sufrir\u00e1 artefactos ni otros problemas.<\/li>\n<\/ul>\n
En la mayor\u00eda de los casos, tu decisi\u00f3n sobre qu\u00e9 formato utilizar se reducir\u00e1 a tu objetivo final: \u00bfquieres archivos min\u00fasculos o te centras en preservar la calidad?<\/p>\n
La compresi\u00f3n con p\u00e9rdidas eliminar\u00e1 permanentemente de la imagen los datos que considere innecesarios. Utiliza muchas t\u00e9cnicas diferentes para conseguirlo, lo que da lugar a archivos mucho m\u00e1s peque\u00f1os.<\/p>\n
La compresi\u00f3n sin p\u00e9rdidas tambi\u00e9n elimina datos, pero puede restaurar el original si es necesario. El objetivo es mantener la calidad, pero reducir el tama\u00f1o del archivo.<\/p>\n
Hay varias formas de conseguirlo, pero el resultado suele ser el mismo. Para saber cu\u00e1l es la opci\u00f3n adecuada para tus necesidades, primero vamos a dar un paso atr\u00e1s y revisar los fundamentos de las im\u00e1genes y la compresi\u00f3n en general.<\/p>\n\n
Elementos de una imagen digital<\/h2>\n
Al igual que en el desarrollo de software y de la web, suele haber una \u00abpila\u00bb para llevar una imagen desde la c\u00e1mara hasta la web.<\/p>\n
Una imagen comienza como datos \u00aben bruto\u00bb (de ah\u00ed el nombre RAW). Esto es parecido al c\u00f3digo de una aplicaci\u00f3n: Los fragmentos, l\u00edneas y valores se traducen en fondos con color, marcadores de posici\u00f3n de la imagen, elementos din\u00e1micos y mucho m\u00e1s.<\/p>\n
En el caso de una imagen, el archivo RAW presenta una representaci\u00f3n de la imagen ligeramente diferente seg\u00fan el fabricante de la c\u00e1mara, el software de edici\u00f3n, el algoritmo del espacio de color, etc. A partir de ah\u00ed, editas la imagen y la exportas como uno de los diversos formatos de archivo (m\u00e1s adelante se habla de ellos):<\/p>\n
Un ejemplo de edici\u00f3n de un archivo RAW en Capture One.<\/figcaption><\/figure>\n Hay algunos elementos diferentes que componen una imagen digital est\u00e1ndar:<\/p>\n
- \n
- Tipo de archivo:<\/b> Los diferentes tipos proporcionar\u00e1n calidades que pueden o no adaptarse a tu imagen final. La clave es elegir el tipo de archivo m\u00e1s adecuado para la aplicaci\u00f3n.<\/li>\n
- Resoluci\u00f3n:<\/b> A menudo lo ver\u00e1s expresado como megap\u00edxeles (MP), pero tambi\u00e9n se utilizan p\u00edxeles por pulgada (PPI) o puntos por pulgada (DPI). Las resoluciones m\u00e1s altas ofrecen mayor calidad, pero tambi\u00e9n aumentan el tama\u00f1o inicial del archivo<\/li>\n
- Profundidad de bits:<\/b> Este aspecto determina la informaci\u00f3n de color de una imagen. Una profundidad de bits baja representar\u00e1 s\u00f3lo unos pocos colores, mientras que una profundidad de bits alta podr\u00eda representar millones de colores a la vez. Por lo general, cuanto m\u00e1s alta sea, mejor.<\/li>\n
- Dimensiones:<\/b> Es el espacio f\u00edsico que ocupa una imagen. Por ejemplo, 1.000 p\u00edxeles x 500 p\u00edxeles podr\u00edan definir el tama\u00f1o total de una imagen.<\/li>\n
- Espacio de color:<\/b> Es un algoritmo que determina c\u00f3mo se muestran los colores. Cada espacio de color est\u00e1 configurado de forma diferente, y a menudo se reduce a la preferencia del fot\u00f3grafo.<\/li>\n<\/ul>\n
Estos elementos se combinan para ofrecer una imagen final de calidad variable. Por ejemplo, una fotograf\u00eda JPEG de gran tama\u00f1o y alta resoluci\u00f3n y profundidad de bits ofrecer\u00e1 una calidad y nitidez supremas:<\/p>\n
Una imagen de alta calidad.<\/figcaption><\/figure>\n Por el contrario, incluso una imagen de grandes dimensiones y con capacidad para mostrar muchos colores puede tener un aspecto pobre a baja resoluci\u00f3n:<\/p>\n
Una imagen con baja calidad.<\/figcaption><\/figure>\n Este equilibrio es la forma de revelar la imagen principal antes de aplicar la compresi\u00f3n. Sin embargo, el formato que utilices para la imagen tiene mucho que ver con la calidad final.<\/p>\n
\u00bfC\u00f3mo funciona la optimizaci\u00f3n de la imagen en la web?<\/h2>\n
Como la compresi\u00f3n de im\u00e1genes es la misma en un sentido general bajo el cap\u00f3, puedes aplicar reglas est\u00e1ndar a la forma de optimizar las im\u00e1genes para la web.<\/p>\n
Cubrimos muchos de estos conceptos en otra parte del blog de Kinsta<\/a>, pero vale la pena hacer un resumen r\u00e1pido para que sirva de referencia:<\/p>\n
- \n
- Utiliza una resoluci\u00f3n de 72 PPI, ya que es el est\u00e1ndar para la web. Puedes utilizar un PPI\/DPI m\u00e1s alto por razones de archivo, pero suponemos que vas a publicar en la web.<\/li>\n
- Establece el \u00abborde largo\u00bb de la imagen en 2048px, ya que es \u00f3ptimo para muchas aplicaciones diferentes.<\/li>\n
- Utiliza una profundidad de color de 8 bits si tienes la opci\u00f3n.<\/li>\n
- Pasa la imagen por una herramienta de compresi\u00f3n y optimizaci\u00f3n antes de publicarla.<\/li>\n<\/ul>\n
Es un formato sencillo que puede darte resultados consistentes, aunque la compresi\u00f3n y la optimizaci\u00f3n es algo que ampliaremos en el resto de este art\u00edculo.<\/p>\n
Para ello, veamos las ventajas e inconvenientes de la compresi\u00f3n con p\u00e9rdidas frente a la compresi\u00f3n sin p\u00e9rdidas.<\/p>\n
\u00bfC\u00f3mo puede ayudar la compresi\u00f3n de im\u00e1genes a tus im\u00e1genes web?<\/h3>\n
En t\u00e9rminos generales, la \u00abcompresi\u00f3n\u00bb acerca el m\u00ednimo y el m\u00e1ximo. Por ejemplo, la compresi\u00f3n eleva el volumen m\u00e1s bajo de la m\u00fasica y reduce el m\u00e1s alto. Esto hace que el nivel medio sea m\u00e1s alto para el o\u00eddo.<\/p>\n
En el caso de las im\u00e1genes, la compresi\u00f3n es m\u00e1s bien un proceso de reducci\u00f3n. Esto significa que hay un mayor \u00e9nfasis en quitar datos de tu imagen para reducir el tama\u00f1o del archivo, manteniendo la calidad lo m\u00e1s alta posible.<\/p>\n
Hay muchos algoritmos propios que ayudan a reducir el tama\u00f1o de los archivos de imagen. En muchos casos, son propiedad de una empresa concreta. Encontrar\u00e1s muchos est\u00e1ndares de compresi\u00f3n \u00abcon p\u00e9rdida\u00bb y \u00absin p\u00e9rdida\u00bb, cada uno con descriptores \u00fanicos:<\/p>\n
Las opciones de compresi\u00f3n dentro de ShortPixel.<\/figcaption><\/figure>\n Dicho esto, la aplicaci\u00f3n de la compresi\u00f3n de im\u00e1genes tiene muchas ventajas que no son exclusivas de un formato concreto:<\/p>\n
- \n
- Puedes mantener un tama\u00f1o de archivo bajo, lo que mejora el rendimiento de tu sitio.<\/li>\n
- Por extensi\u00f3n, el servidor de tu sitio tendr\u00e1 menos trabajo que hacer, lo que repercute en el rendimiento.<\/li>\n
- Los tama\u00f1os de archivo peque\u00f1os ayudan a reducir las emisiones del servidor. De este modo, ayudas a contribuir a un futuro sostenible y \u00e9tico.<\/li>\n
- Podr\u00e1s mostrar una calidad casi perfecta y comparable seg\u00fan el algoritmo y la calidad de compresi\u00f3n que elijas.<\/li>\n<\/ul>\n
Al igual que para crear una imagen que se pueda compartir, jugar con varios valores de compresi\u00f3n, utilizar una compa\u00f1\u00eda espec\u00edfica y elegir el algoritmo correcto es vital para encontrar resultados que te funcionen.<\/p>\n
Ventajas y desventajas de la compresi\u00f3n con p\u00e9rdidas<\/h2>\n
La compresi\u00f3n con p\u00e9rdidas<\/a> reduce el tama\u00f1o del archivo de la imagen, casi con exclusi\u00f3n de todos los dem\u00e1s aspectos. El funcionamiento del algoritmo consiste en eliminar datos de forma permanente. Esto puede ser tan destructivo como parece.<\/p>\n
Aunque no vamos a entrar demasiado en los detalles, debes saber que algunos de los datos que la compresi\u00f3n con p\u00e9rdida elimina son visibles en la imagen. La idea es ofrecer la mejor representaci\u00f3n de la imagen original de alta calidad con un peso menor, y esto significa que algunos datos no pasar\u00e1n el corte.<\/p>\n
En general, el uso de la compresi\u00f3n con p\u00e9rdidas tiene un par de ventajas:<\/p>\n
- \n
- El tama\u00f1o de los archivos ser\u00e1 peque\u00f1o: en algunos casos, menos de 10 kilobytes (KB).<\/li>\n
- La p\u00e9rdida de calidad ser\u00e1 aceptable en muchos casos, a pesar de los artefactos.<\/li>\n<\/ul>\n
Esto nos lleva a los aspectos negativos del uso de la compresi\u00f3n con p\u00e9rdidas: que la calidad de la imagen se reducir\u00e1 con cualquier cantidad de compresi\u00f3n:<\/p>\n
Un deslizador de compresi\u00f3n para una imagen JPEG.<\/figcaption><\/figure>\n Ver\u00e1s que, en algunos casos, se aprecian bandas de color -donde los tonos de color no se representan de forma correcta- y una p\u00e9rdida de claridad en los bordes. Las im\u00e1genes con menos colores mostrar\u00e1n menos de esto, pero la reducci\u00f3n de la claridad seguir\u00e1 estando presente.<\/p>\n
Adem\u00e1s, la degradaci\u00f3n de la imagen es una caracter\u00edstica permanente del proceso de compresi\u00f3n. Esto significa que no hay forma de revertir los efectos m\u00e1s adelante.<\/p>\n
A pesar de los inconvenientes, la compresi\u00f3n con p\u00e9rdidas es excelente para la web y el rendimiento de tu sitio. El diminuto tama\u00f1o de los archivos no siempre da lugar a im\u00e1genes granuladas, aunque puedes (por supuesto) llevar las cosas al extremo:<\/p>\n
<\/a>Un ejemplo de imagen excesivamente comprimida.<\/figcaption><\/figure>\n Sin embargo, la compresi\u00f3n con p\u00e9rdidas no es la \u00fanica opci\u00f3n. La compresi\u00f3n sin p\u00e9rdidas es una alternativa para los propietarios de sitios web preocupados por la calidad.<\/p>\n
Ventajas y desventajas de la compresi\u00f3n sin p\u00e9rdidas<\/h2>\n
La compresi\u00f3n sin p\u00e9rdidas hace lo que dice la etiqueta: Comprime el tama\u00f1o del archivo de una imagen tanto como sea posible sin afectar a la calidad visible. Lo hace eliminando los metadatos de la imagen, que pueden ocupar un espacio innecesario:<\/p>\n
Los metadatos de una imagen.<\/figcaption><\/figure>\n El algoritmo de compresi\u00f3n sin p\u00e9rdidas tambi\u00e9n busca secuencias de p\u00edxeles que se repiten, y luego codifica un acceso directo para mostrarlas. Por ejemplo, tomemos \u00abInterfaz de l\u00ednea de comandos\u00bb A menudo definir\u00e1s su acr\u00f3nimo una vez, y luego usar\u00e1s \u00abCLI\u00bb (o el acr\u00f3nimo que elijas) para referirte a \u00e9l a la velocidad del rayo<\/p>\n
La compresi\u00f3n sin p\u00e9rdidas funciona del mismo modo, ya que es menos destructiva. Aunque la eliminaci\u00f3n de los metadatos no ser\u00e1 reversible, parte de la compresi\u00f3n s\u00ed lo ser\u00e1, lo que lo convierte en un algoritmo flexible para muchos usos.<\/p>\n
Las ventajas de utilizar la compresi\u00f3n sin p\u00e9rdidas giran en torno a la conservaci\u00f3n de la calidad:<\/p>\n
- \n
- La compresi\u00f3n sin p\u00e9rdidas conserva la mayor calidad de una imagen en comparaci\u00f3n con todos los dem\u00e1s algoritmos.<\/li>\n
- La compresi\u00f3n sin p\u00e9rdidas es fant\u00e1stica para fines de archivo. Por ejemplo, un fot\u00f3grafo puede equilibrar los recursos de almacenamiento con una imagen que conserve la mayor cantidad de datos.<\/li>\n
- El algoritmo sin p\u00e9rdidas es el preferido para las artes visuales: fotograf\u00eda, dise\u00f1o gr\u00e1fico, arte digital, etc. Combinando un algoritmo sin p\u00e9rdidas con la profundidad y la resoluci\u00f3n adecuadas se puede conseguir casi una copia \u00abuno a uno\u00bb.<\/li>\n<\/ul>\n
Sin embargo, hay que tener en cuenta que la compresi\u00f3n sin p\u00e9rdidas sirve para nichos espec\u00edficos: El abanico de aplicaciones es reducido. Esto reduce su disponibilidad general.<\/p>\n
Aqu\u00ed tienes otros contras de la compresi\u00f3n sin p\u00e9rdidas que debes tener en cuenta:<\/p>\n
- \n
- Si un sitio web utiliza muchas im\u00e1genes, la compresi\u00f3n sin p\u00e9rdidas puede no ser \u00f3ptima para mostrarlas. Esto se debe a que, en la mayor\u00eda de los casos, querr\u00e1s valorar los tama\u00f1os de archivo m\u00e1s peque\u00f1os en este tipo de situaciones.<\/li>\n
- Aunque la compresi\u00f3n reduce el tama\u00f1o de los archivos, los algoritmos sin p\u00e9rdida no alteran los datos de la imagen tanto como los que tienen p\u00e9rdida. Por ello, es posible que s\u00f3lo veas reducciones de tama\u00f1o marginales en lugar de resultados de adelgazamiento extremos.<\/li>\n<\/ul>\n
A continuaci\u00f3n, veremos la forma m\u00e1s r\u00e1pida (y potencialmente mejor) de hacerlo.<\/p>\n
\u00bfC\u00f3mo elegir entre con y sin p\u00e9rdidas?<\/h2>\n
Llegados a este punto, entiendes la diferencia entre la compresi\u00f3n con p\u00e9rdidas y sin p\u00e9rdidas. Sin embargo, es posible que a\u00fan no sepas cu\u00e1l es el mejor algoritmo para utilizar en tu sitio.<\/p>\n
Hay dos situaciones a tener en cuenta:<\/p>\n
- \n
- Para la mayor\u00eda de los casos de uso en la web, es aceptable utilizar la compresi\u00f3n con p\u00e9rdidas.<\/li>\n
- Si quieres mostrar fotograf\u00edas o arte fotografiado, la compresi\u00f3n sin p\u00e9rdidas te servir\u00e1 mejor.<\/li>\n<\/ol>\n
Estas consideraciones se basan en el uso de uno de los formatos de imagen web est\u00e1ndar, como JPEG, PNG o GIF. Sin embargo, tus necesidades de compresi\u00f3n pueden ser diferentes con formatos m\u00e1s modernos como HEIC y WebP.<\/p>\n
Nos atrever\u00edamos a decir que, a menos que muestres fotograf\u00edas en tu sitio, la compresi\u00f3n con p\u00e9rdidas deber\u00eda ser tu elecci\u00f3n por defecto. WordPress comprime las im\u00e1genes<\/a> por defecto, lo que demuestra que la compresi\u00f3n con p\u00e9rdidas es adecuada para casi todas las aplicaciones.<\/p>\n
Utilizar un servicio de compresi\u00f3n online para optimizar tus im\u00e1genes<\/h2>\n
Hay muchas formas de comprimir tus im\u00e1genes antes de mostrarlas en tu sitio. Por ejemplo, puedes optar por aplicar la compresi\u00f3n en la fase de edici\u00f3n. De todos modos, esto podr\u00eda ser un subproducto de la conversi\u00f3n desde formatos RAW.<\/p>\n
Algunos alojamientos premium como Kinsta incluso ofrecen servicios integrados que pueden ayudarte a optimizar tus archivos de imagen autom\u00e1ticamente. La funci\u00f3n de optimizaci\u00f3n de im\u00e1genes de Kinsta<\/a>, que es gratuita para todos los clientes, crea versiones WebP<\/a> de tus im\u00e1genes y, a continuaci\u00f3n, muestra la m\u00e1s peque\u00f1a a tus visitantes mediante la CDN ultrarr\u00e1pida de Kinsta<\/a>. Puedes elegir entre compresi\u00f3n con o sin p\u00e9rdidas, y tambi\u00e9n puedes activar o desactivar la funci\u00f3n a voluntad.<\/p>\n
Aparte de las herramientas integradas, una opci\u00f3n popular es uno de los muchos servicios online. Cada uno ofrecer\u00e1 una selecci\u00f3n de algoritmos y una interfaz de usuario (UI) ejemplar. Adem\u00e1s, la mayor\u00eda tiene alg\u00fan servicio gratuito, al menos para probar la aplicaci\u00f3n antes de comprometerte.<\/p>\n
Cubrimos algunas opciones en nuestro art\u00edculo sobre optimizaci\u00f3n de im\u00e1genes<\/a>, aunque se trata de plugins espec\u00edficos de WordPress que se conectan a una interfaz de programaci\u00f3n de aplicaciones (API). La buena noticia es que muchos de estos plugins ofrecen tambi\u00e9n una interfaz online. Por ejemplo, considera ShortPixel<\/a>:<\/p>\n
La interfaz de ShortPixel.<\/figcaption><\/figure>\n Aqu\u00ed, arrastrar\u00e1s las im\u00e1genes al cargador y esperar\u00e1s a que la aplicaci\u00f3n las comprima y procese. Sin embargo, primero deber\u00e1s elegir el algoritmo, ya que el proceso comenzar\u00e1 de inmediato.<\/p>\n
La elecci\u00f3n es sencilla: Dos formas de compresi\u00f3n con p\u00e9rdidas (\u00abLossy\u00bb y \u00abGlossy\u00bb), y una opci\u00f3n sin p\u00e9rdidas. La interfaz de ShortPixel explica muy bien la diferencia entre cada algoritmo, y puedes descargar las im\u00e1genes en cuesti\u00f3n de segundos.<\/p>\n
- Resoluci\u00f3n:<\/b> A menudo lo ver\u00e1s expresado como megap\u00edxeles (MP), pero tambi\u00e9n se utilizan p\u00edxeles por pulgada (PPI) o puntos por pulgada (DPI). Las resoluciones m\u00e1s altas ofrecen mayor calidad, pero tambi\u00e9n aumentan el tama\u00f1o inicial del archivo<\/li>\n
- Compresi\u00f3n sin p\u00e9rdidas:<\/b> Con este formato de compresi\u00f3n seguir\u00e1s encontrando una reducci\u00f3n sustancial del tama\u00f1o del archivo, pero la imagen no sufrir\u00e1 artefactos ni otros problemas.<\/li>\n<\/ul>\n
![\"La](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/11\/imagify-interface.png\")
![\"La](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/11\/kraken-interface.png\")
![\"Las](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/11\/kraken-expert-mode.png\")