Imágenes PNG, JPG, JPEG, SVG y WEBP, características y ejemplos prácticos de su uso en páginas de internet. Comparación de su tamaño y calidad. Como usar fotos con buena resolución y poco tamaño.
En la web a pesar de la creciente velocidad de las redes de transmisión y las conexiones, se necesitan imágenes optimizadas, para que carguen rápido, consumiendo la menor cantidad de recursos, tanto del servidor donde se almacenan, como en el dispositivo de los lectores.
Esto es muy importante debido al creciente uso y demanda de fotografías y la necesidad de mostrarlas con la mejor calidad posible.
En este artículo compartimos con los aficionados, cuales son las imágenes que más se utilizan actualmente en las páginas internet, tratando de explicar de modo elemental sus diferencias y comparándolas con ejemplos prácticos.
Imágenes en formato PNG
Las imágenes PNG se usan en imágenes pequeñas como logotipos, iconos, botones y otras o en las que poseen grande espacios de un mismo color, cuando principalmente necesitamos transparencia.
Las imágenes PNG al igual que las GIF que ya prácticamente no se usan, permiten esta característica.
Necesitamos transparencia en imágenes que algunas de sus partes, no poseen color alguno.
Adicionalmente PNG es un formato de imagen sin pérdidas.
Ejemplo práctico del uso de imágenes PNG
Por ejemplo, la siguiente imagen, que es el logotipo de nuestro sitio web, en esta página que posee el fondo de color blanco, luce perfecto.
Si la usamos en una página con el fondo de otro color o el usuario usa alguna aplicación en su navegador que permita ver la página en modo oscuro, revelará su área exterior blanca, lo que le resta lucidez.
Al usar una imagen PNG con transparencia, en vez de la anterior JPG, podemos ocultar el borde blanco y lograr que se muestre correctamente.
Otra de las ventajas del formato PNG en imágenes sencillas, es que son de menor tamaño. Se puede comprobar descargando y comprobando las imágenes anteriores de ejemplo.
Guardar imágenes PNG con transparencia
Al guardar una imagen en formato PNG en un editor de imágenes, comprobaremos que existen dos opciones: PNG8 y PNG24.
Lógicamente el segundo de ellos es el indicado, siempre asegurándonos de marcar la casilla: "Transparencia".
Imágenes y fotos en formato JPG o JPEG
JPG y JPEG es el mismo tipo de imagen, con diferente extensión.
Este formato es el más utilizado actualmente.
Se puede emplear en casi cualquier imagen, pero es ideal para fotografías o imágenes con mucho contraste, degradados y elementos que necesitan buena resolución.
Se pueden optimizar (comprimir) para la web, usando valores entre el 40 y el 60%.
Valores menores hacen disminuir su tamaño aún más, pero no es factible por el deterioro excesivo de su calidad.
Se recomienda en fotografías, comprimirlas en un 50%.
Para optimizar las imágenes JPG para la web, se puede emplear el poderoso Photoshop u otros editores de imágenes similares como GIMP (gratis).
Guardando la imagen de portada de este artículo en formato JPG, optimizada para la web en Photoshop.
Lee más información detallada
Optimizar imágenes JPG con el algoritmo Guetzli
El algoritmo Guetzli es un software creado por Google, que permite optimizar aún más las imágenes reduciendo su tamaño y manteniendo la calidad.
En otro artículo detallamos esta funcionalidad y como aprovecharla:
Optimizar imágenes con FileOptimizer usando el algoritmo Guetzli
Imágenes en formato SVG
A diferencia de todos los formatos de imágenes anteriores que son de mapas de bits, las imágenes SVG son vectoriales.
Su principal característica y ventaja es que no se deforman o pierden calidad al aumentarlas.
Además consisten en un archivo de texto plano en el que se representan lo que les confiere muy poco tamaño.
Son ideales cuando se trata de elementos sencillos como gráficos, diagramas, logos, iconos, etc.
No se pueden emplear en fotos, porque su tamaño sería excesivo.
Ejemplo del uso de imágenes SVG
A continuación se muestran dos imágenes de ejemplo, la primera representada usando una imagen PNG y la siguiente con una imagen SVG.
Se puede comprobar que poseen la misma calidad, pero la diferencia de tamaño es de 10 veces.
En la medida que la imagen PNG se represente a un tamaño mayor, aumentará su tamaño de archivo, en cambio la imagen SVG, mantendrá exactamente el mismo tamaño.
✔ Insertando directamente el código en el HTML, sin tener que cargar archivos externos.
✔ Insertándola como una imagen tradicional con la etiqueta IMG. Este es el método que usamos en esta página.
En ambos casos el tamaño de la imagen o del código es el mismo, aunque se usen diferentes dimensiones.
Crear imágenes o convertirlas al formato SVG
Convertir una imagen tradicional al formato SVG no es factible, aunque si es posible. En este caso las aplicaciones para dicha tarea, lo que hacen es crear un archivo en base 64.
Lo ideal es crearla desde cero, para eso se emplean editores vectoriales como InkScape (gratis), Adobe Ilustrator y otros.
Lee más información: Qué son las imágenes SVG, como crearlas y usarlas Programas para crear, editar y convertir imágenes SVG
Imágenes en formato WEBP
WebP es un formato desarrollado por Google para la web, que permite optimizar aún más las fotos en JPG y disminuir su tamaño, sin afectar la calidad.
Se pueden usar cuando se necesita mostrar varias fotos con buena calidad, asegurándose de que consumen menos recursos de lo habitual.
La principal desventaja de este formato de imágenes, es que no es compatible con todos los navegadores.
Comenzó siendo aceptado solo por Google Chrome, más tarde se agregó la compatibilidad a navegadores como Firefox, Waterfox y Microsoft Edge.
En este momento de los navegadores no compatibles, el más importante es Safari (navegador predeterminado del iPho e iPad).
Ejemplo del uso de imágenes WEBP
La alternativa que recomienda Google es usar el elemento PICTURE de HTML5, para mostrar una imagen WebP y el tradicional IMG, para mostrar en el resto de los navegadores, la misma imagen en formato JPG.
A continuación usamos este método.
La siguiente imagen está en formato WebP.
Pueden ver el paisaje de la Jijira, los que usan el navegador Google Chrome y otros compatibles.
Los que empleen otro navegador web, cargan una imagen JPG similar, pero con el rotulo encima "IMAGEN JPG".
La diferencia entre las dos imágenes, ambas con el mismo tamaño, es la siguiente:
✔ Imagen WebP al 50% de calidad: 50 KB
✔ Imagen JPG al 50% de calidad: 100 KB
Etiqueta para insertar una imagen WebP en HTML
La imagen anterior se insertó de la siguiente forma, para asegurar la compatibilidad de los navegadores que aún no admiten este formato.
<picture>
<source type="image/webp" srcset="../img/web/paisaje-jijira.webp">
<source type="image/jpeg" srcset="../img/web/paisaje-jijira.jpeg">
<img src="../img/web/paisaje-jijira.jpeg" width="720" height="624" alt="Paisaje de la Jijira" title="Paisaje de la Jijira">
</picture>
Lee más información: Como usar imágenes WebP en las páginas de mi sitio y mantener la compatibilidad.
