¡Los mejores formatos de imagen para sitios web comparados!PNG, JPG, GIF y WEBP

La optimización de imágenes comienza con la elección del mejor formato de archivo para sus necesidades. Esto excede PNG vs. Jpeg. No hay un formato de archivo único para gobernarlos a todos. Las necesidades de imagen de cada uno son diferentes, incluso las diferentes imágenes de un solo sitio tienen diferentes requisitos. Pero no se preocupe, le ofrecemos cobertura. En esta publicación, le enseñaré cómo elegir el mejor formato de imagen para su sitio de WordPress. Repasaremos los viejos favoritos, JPEG, PNG y GIF y algunas de las nueve generaciones, como WebP y SVG. Cubriremos sus fortalezas, debilidades y casos de uso ideales, para que pueda optimizar sus imágenes como profesionales. ¡También preparé un archivo PDF descargable, al que puede consultar! Haga clic aquí para obtener su copia

Use la guía Smush para formatos de archivo para encontrar el mejor tipo de archivo para sus imágenes.
¿Nunca tuvo que compartir datos con sus hermanos y puede ver por qué es importante elegir el formato de archivo correcto? Porque cada vez más visitantes visitan sitios web en dispositivos móviles. No solo las velocidades de red son relativamente más lentas en comparación con las redes dedicadas, sino que no todos tienen datos ilimitados. Y, debido a que Google penaliza las páginas que son demasiado lentas, mostrándolas por debajo de los resultados de la búsqueda, la mejora de los tiempos de carga es una forma de agotarse para aumentar el tráfico, las ventas y las conversiones.
Al elegir el formato de imagen incorrecto, es posible difundir una imagen más grande de lo necesario. Las capacidades adicionales de los archivos de imagen (como la transparencia), los detalles innecesarios y demasiados colores, todos agregan hinchazón a sus imágenes. A veces, son necesarios, a veces no. Si su imagen no tiene transparencia, por ejemplo, entonces realmente no renuncia a nada si elige un tipo de imagen que no acepta transparencia. La clave es agregar solo lo que necesita. Elegir el tamaño óptimo del archivo también debe considerar la imagen en relación con el resto de su página web para elegir el tamaño óptimo del archivo. La página web promedio está actualmente cerca de 2 MB, por lo que debe mantenerse por debajo de este límite para tener un sitio relativamente rápido. Esto significa que debe mirar el total de todos los activos de su sitio, no solo imágenes. Una imagen grande de un héroe detallado que es 1 MB no será un gran problema si es la única imagen de una parte de texto de gran página ; Sin embargo, si va a mostrar 10 imágenes grandes en una página que tienen 1 MB, entonces será difícil de cargar. Puede hacer compromisos mostrando menos imágenes o mostrándolas todas a un tamaño más pequeño. Cómo comprimir imágenes: con pérdida vs sin pérdida Para elegir el formato de imagen ideal, debe comprender la diferencia entre pérdidas y pérdidas. Idealmente, su imagen debe usar ambos procesos algorítmicos para producir el tamaño de archivo más pequeño. No todos los formatos aceptan ambos.
Con una compresión de pérdidas, algunos de sus datos se perderán para siempre. La compresión de pérdida de imagen elimina permanentemente los datos de la imagen y degrada la imagen en este proceso. Esto no es tan malo como parece, porque algunos de estos detalles adicionales pueden no ser perceptibles para el ojo humano. La compresión libre de imagen, por el contrario, mantiene los datos, de modo que no se pierde nada. Los algoritmos libres de pérdida conservan todos los datos necesarios para recrear la imagen exactamente. Idealmente, su imagen primero pasará por una fase de compresión con pérdidas y luego una fase sin pérdidas en la que se optimizará lo que queda. . Como formato de archivo estándar para la mayoría de las cámaras digitales y teléfonos móviles, lo encontrará en casi todas partes. Los JPEG tienen más ventajas:
Los JPEG pueden contener millones de colores para que produzcan imágenes ricas y vívidas
Producen un tamaño de archivo relativamente pequeño, incluso con tantos colores
Son aceptados en todos los navegadores modernos.
No es de extrañar que JPEG sea un formato de archivo tan popular para la web.
Debido a que JPEG ha sido diseñado para fotos estáticas, no acepta transparencia o animación. La compresión JPEG JPEG utiliza compresión de pérdidas para mantener un tamaño de archivo pequeño. La compresión de JPEG no es una configuración de todo o nada. Puede ajustar la relación de compresión entre el 0% (compresión fuerte) y el 100% (sin compresión) para crear el equilibrio ideal para su situación. Compresar una imagen entre el 75-100% mantendrá la integridad y la alta calidad de la imagen, pero AT AT 75% La imagen es medio más grande. ¡Mitad! Es por eso que la mayoría de las redes sociales comprimen sus imágenes entre 70-85%. Facebook, por ejemplo, comprime sus imágenes 85%. Entonces, al preparar sus imágenes en Adobe Photoshop o Lightroom, no tiene miedo de mover esa diapositiva. Mira estas dos fotos. Uno no fue comprimido y tiene 229k, mientras que el otro fue comprimido 75% y tiene 95k.
Opción 1
¿Puedes decir cuál es?
opcion 2

Hay un formato JPEG de pérdidas llamado JPEG-2000, pero no se adopta ampliamente. Además, siempre debe evitar volver a compresar una imagen comprimida. ¿Alguna vez ha hecho una copia de una fotocopia o ha descargado y recargado una imagen en las redes sociales? La calidad se distorsiona porque pasas por otra ronda de compresión.
(Por cierto, la opción 1 es la imagen comprimida) Cómo cambiar el tamaño y transmitir correctamente las imágenes con WordPress JPG vs PNG JPEGS son una mala elección para imágenes de alto contraste. Es por eso que las capturas de pantalla JPEG con texto negro sobre el fondo blanco tienden a no estar claro. JPEG es el tipo de archivo de imagen ideal para fotos, especialmente para las sin texto, cuando un archivo de imagen más pequeño tiene la prioridad de calidad de imagen. Por ejemplo, las imágenes con grandes héroes, destacando los JPEG de fotografía profesional son significativamente más pequeñas que los PNG. Nuestra imagen del paisaje de arriba como PNG es 329 K, es decir, casi 3.5 veces más grande que la versión comprimida. Esta es la versión PNG de la misma imagen que arriba, solo 329 kb

PNGS para profundizar el otro tipo de archivo de imagen preferido en la web, PNGS. Los PNG fueron diseñados para reemplazar el GIF debido a problemas de licencia, de ahí las similitudes funcionales. El poder de PNG es su algoritmo de compresión sin pérdidas. No pierda ninguna fecha durante el proceso de compresión, por lo que la imagen puede recrearse sin pérdida de calidad. Como resultado, el PNG mantiene los detalles finos en las imágenes, incluso cuando se trata de texto. La desventaja es que las dimensiones del archivo PNG tienden a ser más grandes en comparación con otros tipos de archivos de imagen debido a todos estos datos.
Otra ventaja es el soporte para la transparencia. No solo puede crear un archivo de logotipo con un fondo transparente, sino que también puede crear gradientes de transparencia avanzados y más con PNG. Los tres tipos de PNG hay tres tipos de PNG: PNG-8, PNG-24 y el misterioso PNG-32. Desde un punto de vista técnico, hay PNG animados, pero no entraremos en esto porque aún no son ampliamente aceptados. PNG-8 es como PNG GIF. PNG-8 acepta 256 colores indexados, pero a un tamaño de archivo mucho más pequeño, incluso más pequeño que su JPEG equivalente. A diferencia de GIFS, PNG-8 tiene un apoyo débil para la animación. PNG-8 es ideal para gráficos web simples con un fondo transparente, como logotipos e iconos del sitio. Mientras que PNG-8 acepta colores de 8 bits, PNG-21 acepta colores de 24 bits, lo que significa soporte para 16 millones de colores. ¡Yas! PNG-24 es más como un JPEG, pero con un tamaño de archivo significativamente mayor. Pero la calidad de la imagen PNG-21 es excelente, incluso cuando se amplía, lo que lo hace ideal para fotos comerciales electrónicas, así como para capturas de pantalla o imágenes de texto. No hay opción para PNG-32, probablemente por diseño, por lo que las personas no Lo usará a menos que necesiten esas capacidades
Si crea PNG en el cuadro de diálogo web de Photoshop, no verá PNG-32 enumerado como una opción, pero su PNG estará en silencio en un PNG-32 si agrega soporte de transparencia. ¿Porqué es eso?

PNG-32 admite colores de 24 bits con un canal alfa adicional de 8 bits para capacidades de transparencia avanzada. PNG-32 fue diseñado para tener la capacidad de crear imágenes avanzadas con gradientes de transparencia. Estas capacidades avanzadas significan que PNG-32 produce archivos mucho más grandes. Si no crea una imagen que necesita una transparencia compleja, manténgase con PNG-21. Si crea una superposición de la imagen que se desvanece en nada, entonces esta es una tarea para PNG-32. Puedes ver un ejemplo aquí mismo. La imagen que creamos en Photoshop tiene un gradiente transparente de dos colores que se desvanece de opacidad completa a transparencia incolora. Para ilustrar esto, hice el fondo detrás de la imagen negra usando .png-32 /166kb
Puede ver cómo el fondo negro afecta cómo se muestra la imagen, ya que oscurece los colores en todo el gradiente.
PNG-8 / 37KB

Para PNG-8 arriba, este efecto está distorsionado. Las imágenes PNG-8 aceptan solo un nivel de transparencia, por lo que la transparencia aparece solo en una cinta distorsionada delgada en la parte superior. WEBPS no sería genial si pudieras combinar los mejores PNG y JPEG? Google pensó lo mismo e inventó el formato de código abierto WebP. WebP podría ser solo uno de los secretos mejor guardados cuando se trata de optimización de imágenes. Enormes sitios, como YouTube y eBay, ya han comenzado a usarlo para mejorar el rendimiento del sitio. Hay dos tipos de imágenes webp. Uno simplemente se conoce como webp y usa pérdidas. Puede pensar en esto como la versión JPEG del formato WebP. Al crear una webp con pérdidas en un programa como Photoshop, podrá elegir la tasa de compresión. La otra versión se conoce como WebP sin pérdida y es más como PNG. Obtendrá un tamaño de archivo más grande, pero no perderá detalles. Ambos tipos de formatos WebP producen una imagen mucho más pequeña que sus homólogos JPEG y PNG. ¿Qué tan preciso? Según los datos de Google, en promedio, las imágenes WEBP son 25-34% más bajas que los JPEG comparables y un 26% más bajo que los PNG comparables. ¡Eso es enorme! Entonces, ¿por qué no hemos pasado las imágenes WebP?
Bueno, aquí están las malas noticias. Aunque WebP pisó la escena de la imagen en 2010, Firefox y Safari no la aceptaron. Safari aún no, aunque ahora que Firefox se ha subido a bordo, lo más probable es que sea solo cuestión de tiempo. Entonces, en este momento, WebP no es una solución completamente aceptada por el navegador. Puede evitar esta limitación proporcionando el equivalente PNG o JPEG para los visitantes utilizando un navegador sin WebP. En términos de crear estos interesantes archivos webp para WordPress, puede usar un complemento para hacerlo por usted. De hecho, Smush Pro CDN convierte imágenes en WebP. Si alguien visita su sitio en un navegador que acepta WebP, Smush convertirá sus imágenes y transmitirá imágenes WebP. Si están en un navegador que no acepta WebP, recibirán JPEG o PNG todos los días. Una historia sobre dos tipos de gráficos de imágenes, hay dos tipos de imágenes gráficas, vectoriales y ráster. Las imágenes vectoriales se generan matemáticamente a partir de una serie de puntos que están conectados por líneas y curvas para formar formas geométricas. Con gráficos vectoriales, una imagen se puede cambiar el tamaño de cualquier forma, grande o pequeño, sin dañar la calidad de la imagen. Los gráficos de trama, por el contrario, consistieron en un píxel dispuesto en una cuadrícula, cada píxel que representa un color. Gráficos de trama de alta calidad solo en la resolución que tenían que mostrarse. Si la imagen se escala a un tamaño más grande, se producirá píxeles. SVGS Para aclarar una cosa, los SVG no son en realidad un formato de archivo de imagen. SVG es un lenguaje de marcado que le permite crear gráficos de dos dimensiones. Los SVG son más como HTML que PNGS o JPEG.

Los SVG se basan técnicamente en XML y se pueden manejar y animar con JavaScript y CSS. Mira esta maravillosa imagen de héroe. Los SVG también son únicos, porque, a diferencia de los formatos de imagen que hemos cubierto hasta ahora, crean imágenes vectoriales. Esto significa que las imágenes son escalables infinitas y se ven bien en todas las resoluciones. Lo que los hace excelentes para adaptarse a diferentes dispositivos. No obtendrá ese píxel que aparece en otros tipos de archivos de imagen. Sin embargo, debido a que los SVG se han diseñado para mostrar imágenes simples basadas en formas geométricas, como logotipos, banderas, diagramas e iconos. No funciona bien para la fotografía. Puede crear SVG en un programa vectorial, como Adobe Illustrator, Inkscape, Vectr, SVG-edit o Sketch. Si crea imágenes simples, el tamaño del archivo resultante será mucho más pequeño que una imagen PNG, JPEG o WebP, incluso imágenes grandes a altas resoluciones. Sin embargo, los archivos SVG complejos cancelarán estas ventajas. Incluso si se trata de un lenguaje de marcado, Google indexa SVGS para que aparezcan en las búsquedas de imágenes. Y son compatibles con todos los navegadores. A SVG o no en SVG? Si te he vendido en SVGS y has intentado cargar uno en WordPress mientras leo este artículo, es posible que hayas notado que WordPress no permite SVG por razones de seguridad. Pero WordPress no es el único. Las redes sociales como Medium, Tumblr y Facebook tampoco permiten SVG. Puede intentar omitir esto y cambiar su archivo con funciones para permitir SVGS, pero no lo recomendaría.

Debido a que los SVG son un idioma de marcado, están abiertos a la inyección de malware. Si es un administrador del sitio y activa el SVGS, pero los autores y colaboradores de su sitio no son conscientes del riesgo, podrían cargar los archivos SVG comprometidos sin saberlo. Si decide instalar un complemento para permitir SVGS, entonces solo debe cargar SVGS de las personas en las que confía y limitar la capacidad de cargar SVGS a las personas que entienden cómo cargar la seguridad SVGS. GIFS guardé el tipo de archivo más famoso para el final. Aunque son excelentes para animar chistes de una manera irónicamente estúpida, los GIF no son buenos para muchos otros hoy en día. ¿Quieres saber algo que te sorprenda? ¡Los GIF animados en Twitter ni siquiera son GIF! Son archivos webm. Porque la verdad es que los GIF nunca han sido diseñados para animaciones. Producen archivos excepcionalmente grandes. Cuantos más marcos, peor se vuelve. Si cambia a un archivo WebM, tendrá un archivo 9 veces más bajo y una calidad mucho mayor. Los MP4 son otra opción viable que es compatible con todos los navegadores. Los GIF tienen una paleta de colores limitada de 256 colores y no usan compresión de pérdida. Pero, así como los archivos PNG-8 y a un tamaño de archivo mucho más pequeño y tienen transparencia. Entonces, quizás el único caso de uso para GIF es cuando intenta proporcionar algo que sea compatible con los navegadores más antiguos que no acepten HTML 5, se ve malicioso o por un efecto nostálgico.
Mega Supreme Guide para acelerar el tamaño de archivo óptimo de WordPress es lo más pequeño posible mientras usa imágenes en su sitio para expresar su punto de vista es excelente, ¡esas 1000 palabras no son baratas! Necesitan muchos recursos para servir. El mejor enfoque es elegir el formato de archivo que le brinde lo que necesita y nada más. Una breve recapitulación de la funcionalidad

WordPress está tratando de ayudar en el departamento de optimización de imágenes comprimiendo automáticamente las imágenes, pero no hace mucho. Para esto, una herramienta dedicada como Smush Pro puede ahorrarle mucho tiempo y entregar imágenes más rápido de lo que creía posible. Mientras escribía esta publicación y aprende sobre imágenes de WebP, compresión y otras técnicas de optimización de imágenes, me complació usar mi nuevo conocimiento que se encontró para mejorar mi sitio personal. Estaba a punto de leer un largo tutorial sobre cómo crear imágenes WebP cuando supe que Smush Pro está haciendo esto con un interruptor. También activé el Smush CDN y vi que el tiempo de carga de mi página ha disminuido. Antes de que Smush Pro cargara las imágenes duraron 3 segundos en algunas páginas, pero después de la conversión a WebP y el uso de la SMUSH CDN, el trabajo se cargó en menos de un segundo. Me sorprendió. Puedes probar gratis Smush Pro. Continúe y vea cuánta diferencia hace para su sitio.
¿Te sientes más seguro en tus habilidades de elección de imágenes ahora? ¿Has probado alguno de mis consejos en tu sitio? ¿Cómo mejoraste la velocidad de la página?
Etiquetas:
formato de imagen
Optimización de imágenes
Rubor
Webp