¿Cuál es el mejor formato de imagen para nuestro sitio web si necesitamos que nuestra imagen tenga un fondo transparente?

Si realmente desea el mejor formato, no se saldrá con la suya. De hecho, ¡necesitarás tres al menos!

Hay nuevos formatos de imagen webp [1] y jpeg2000 [2] que proporcionan sorprendentes tasas de compresión sin pérdidas. Lamentablemente, estos no son muy compatibles en todos los navegadores, ¡pero no se preocupe!

Cuando se usa en conjunto, el soporte es mucho más prometedor. Puede ofrecerlos todos en su código y dejar que los navegadores elijan uno que admitan, dentro del elemento de imagen [3] y con el recurso png backback para asegurarse de que las personas atrapadas con IE antiguos también obtengan alguna imagen.

Además, no tienes que parar aquí. Ahora, esto es un poco exagerado, pero bueno, estamos hablando del mejor formato aquí. El jpeg tradicional le proporcionará una mejor compresión con una calidad decente; desafortunadamente no admiten el canal alfa para la transparencia. Así que aquí está el trato: úselo en SVG y enmascare [4] esos bits transparentes con transparencia y ahí lo tiene, simplemente colóquelo en otra etiqueta fuente dentro del elemento de imagen.

Avíseme si esto ayudó, y cualquier persona con mejores soluciones puede comentar para agregar una idea.

Notas al pie

[1] Un nuevo formato de imagen para la Web | WebP | Desarrolladores de Google

[2] JPEG 2000 – Wikipedia

[3] – HTML | MDN

[4] JPG transparente (con SVG) | CSS-Tricks

Png es el mejor formato que recomendaré, ya que admite casi todos los tonos de color y también puede tener un fondo transparente. Por lo tanto, esto se puede colocar en cualquier lugar del sitio web sin importar dónde lo coloque, también puede usar CSS para proporcionar su propio color de fondo.

#la paz mundial