¿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?

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