¿Cuál es el mejor formato de imagen para usar en una página web para obtener la máxima calidad y la mínima velocidad?

Para comprender los formatos de imagen, debe tener en cuenta algunos factores clave.

Tipos de compresión: sin pérdida y con pérdida.

Sin pérdida significa que la imagen se hace más pequeña, pero sin perjudicar la calidad.

Pérdida significa que la imagen se hace (incluso) más pequeña, pero en detrimento de la calidad. Si guarda una imagen en un formato con pérdida una y otra vez, la calidad de la imagen empeorará progresivamente.

También hay diferentes profundidades de color (paletas): color indexado y color directo.

Con Indexado , significa que la imagen solo puede almacenar una cantidad limitada de colores (generalmente 256) elegidos por el autor de la imagen, con

Directo significa que puede almacenar miles de colores que no han sido elegidos por el autor.

  • Formato BMP : sin pérdida / indexado y directo.
    • BMP es bueno para nada realmente. Es un formato más antiguo. No hay nada en lo que BMP sobresalga, o otros formatos no lo hacen mejor.
  • GIF : sin pérdida / solo indexado
    • Las imágenes GIF también pueden ser animadas y tener transparencia.
    • Bueno para: pequeñas animaciones, logotipos, dibujos lineales y otras imágenes simples que deben ser pequeñas. Solo se usa realmente para sitios web.
  • JPEG : con pérdida / directa
    • Bueno para: fotografías. Además, gradientes.
  • PNG-8 – Sin pérdidas / indexado
    • PNG es un formato más nuevo, y PNG-8 (la versión indexada de PNG) es realmente un buen reemplazo para los GIF. Lamentablemente, sin embargo, tiene algunos inconvenientes: en primer lugar, no puede admitir animación como puede GIF (bueno, puede, pero solo Firefox parece admitirlo, a diferencia de la animación GIF que es compatible con todos los navegadores). En segundo lugar, tiene algunos problemas de soporte con navegadores antiguos como IE6. En tercer lugar, un software importante como Photoshop tiene una implementación muy pobre del formato. (¡Maldita sea, Adobe!) PNG-8 solo puede almacenar 256 colores, como GIF.
    • Bueno para: Lo principal que PNG-8 hace mejor que los GIF es tener soporte para Alpha Transparency.
  • PNG-24 – Sin pérdidas / Directo
    • PNG-24 es un gran formato que combina la codificación sin pérdida con el color directo (miles de colores, como JPEG). Es muy similar a BMP en ese aspecto, excepto que PNG realmente comprime las imágenes, por lo que resulta en archivos mucho más pequeños. Desafortunadamente, los archivos PNG-24 seguirán siendo mucho más grandes que los JPEG, GIF y PNG-8, por lo que aún debe considerar si realmente desea usar uno.
    • Aunque los PNG-24 permiten miles de colores mientras tienen compresión, no están destinados a reemplazar imágenes JPEG. Una fotografía guardada como PNG-24 probablemente será al menos 5 veces más grande que la imagen JPEG equivalente, con muy poca mejora en la calidad visible. (Por supuesto, este puede ser un resultado deseable si no le preocupa el tamaño del archivo y desea obtener la mejor calidad de imagen posible).
    • Al igual que PNG-8, PNG-24 también admite alfa-transparencia.

Para más consultas sobre diseño web y gráfico y diseño publicitario, escríbame a mí o a mi equipo en [correo electrónico protegido]

Nisarg Mavani,

Ingenioso Brandcare

(Empresa de diseño web y gráfico)

JPG, PNG o GIF son buenos formatos. Si utiliza Adobe Photoshop, utilice la opción “” Guardar como para Web y dispositivos “. El uso de resolución media o alta es bastante pequeño para descargar. Dos cosas a tener en cuenta. 1) El tamaño de la imagen determinará qué tan grande es el tamaño de la imagen. el tamaño del archivo es. 2) Verifique la información de la parte inferior izquierda para juzgar cuánto tiempo tomará la descarga. Ya casi nadie usa el acceso telefónico, pero las imágenes más grandes pueden ocupar CPU y memoria, haciendo que parezca ser su sitio web, cuando realmente es el máquina de los usuarios. Pero usted tendrá la culpa de ello. ¡Por supuesto!

Espero que te ayude!

Solo como nota al margen, otra cosa a considerar aparte del formato sería usar conjuntos de fuentes HTML (el atributo ‘tamaños’ para etiquetas img: – HTML | MDN) que lo ayuda a cargar el tipo correcto de imagen para su usuario tamaño de pantalla.

En pocas palabras, no intentaría renderizar una imagen de 2M para una pantalla de 280 px de ancho.

Mucha gente dice que depende de lo que intentes hacer. Yo diría que solo está tratando de hacer una cosa en la web: mostrar su imagen lo más atractiva posible, lo más rápido posible.

Como este es el objetivo, la respuesta es siempre archivos JPEG o .jpg. (OK, casi siempre)

¿Por qué no siempre, siempre? Porque a veces, si no planifica bien, probará con diferentes fondos de color después de crear su imagen o logotipo, por lo que desea fondos transparentes en sus logotipos para mayor flexibilidad.

Esto es técnicamente un error. Identifique qué colores necesita y cree un jpg de su logotipo transparente. Será más pequeño y más rápido renderizar que cualquier archivo PNG con transparencia.

Con el énfasis de Google en el móvil y la velocidad de carga, esto no es simplemente “pureza de diseño” a la que aspiro. Es pragmático mantener todo pequeño y rápido de cargar. Usar PNG para un solo archivo: su logotipo no es el fin del mundo. Sin embargo, usar imágenes PNG en su sitio web es una idea terrible.

Además de las otras respuestas, puede probar con imágenes WebP .

WebP es un formato de imagen desarrollado y lanzado por primera vez por Google en 2010. Admite la codificación de imágenes en formatos sin pérdida y con pérdida, lo que lo convierte en un formato versátil para cualquier tipo de medio visual y un excelente formato alternativo a PNG o JPEG. La calidad visual de WebP es a menudo comparable a formatos más ubicuos.

Las imágenes sin pérdida de WebP son un 26% más pequeñas en tamaño que las PNG. Las imágenes con pérdida de WebP son un 25-34% más pequeñas que las imágenes JPEG comparables.

WebP sin pérdida admite la transparencia (también conocido como canal alfa) a un costo de solo 22% de bytes adicionales. Para los casos en que la compresión RGB con pérdida es aceptable, WebP con pérdida también admite transparencia , por lo general, proporciona 3 veces más pequeños tamaños de archivo en comparación con PNG.

Sin embargo, es importante recordar que WebP no reemplaza las imágenes JPEG y PNG. Es un formato que puede servir a los navegadores que pueden usarlo, pero debe tener a mano otros formatos de imágenes anteriores para otros navegadores. Esta es la naturaleza del desarrollo para la web: Tenga su Plan A listo para los navegadores que puedan manejarlo, y tenga su Plan B (y tal vez el Plan C) listo para aquellos navegadores que son menos capaces.

Las respuestas hasta ahora se centran en formatos img “tradicionales”, pero creo que es justo incluir en webp. Ya sabes … el formato de imagen que se desarrolló específicamente para la entrega web / en red 😉 Un nuevo formato de imagen para la Web | WebP
El | Desarrolladores de Google

Podría estar inclinado a votar por webp.

“Mejor” es un término relativo.
¿Es un logotipo (con relativamente pocos colores), es una foto (o incluye imágenes fotográficas), la imagen tiene que incluir transparencia?
Esas preguntas dictarían si usa .gif, png. jpeg o .svg.

Gráficos web para principiantes: un manual de mejores prácticas | 8Days – Jimdo Blog