NorfiPC
NorfiPC » Diseño Web » Imágenes para la web

Formatos de imágenes optimizadas para la web, diferencias



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.
Formatos de imágenes optimizadas para la web, diferencias
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".
Guardando una imagen en formato PNG con transparencia en Photoshop



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
Guardando una imagen en formato JPG optimizada para la web
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.
Bandera de Cuba en formato PNG (4 KB).
Bandera de Cuba en formato PNG
Bandera de Cuba en formato SVG (0.4 KB).
Bandera de Cuba en formato SVG
Mostrar código fuente del archivo SVG anterior
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="250" viewBox="0 0 268.07 136.03">
<g transform="translate(-188.70442,-413.86449)">
<path fill="#002a8f" d="M190.7,415.86h264.07v132.04h-264.07"/>
<g fill="#FFF" transform="matrix(0.33008558,0,0,0.33008558,190.70442,415.86449)">
<path d="m0,80h800v80h-800v80h800v80h-800"/></g>
<path fill="#cf142b" d="M305.05,481.88,190.7,415.86v132.03"/>
<path fill="#FFF" d="m228.83,462.08,11.669,35.814-30.533-22.116h37.696l-30.533,22.116"/></g>
</svg>




¿Cómo insertar las imágenes SVG?

Las imágenes SVG se pueden usar de dos formas:
✔ 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 hasta el momento solo son soportadas por los navegadores Google Chrome, Opera y Waterfox (alternativa a Firefox).
Lógicamente no podemos mostrar fotos solo para un grupo de usuarios.

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.
Los que empleen otro navegador web, cargan una imagen JPG similar, pero con el rotulo encima "IMAGEN JPG".
Paisaje de la Jijira, litoral norte al este de la Habana
Mostrar código fuente
<picture>
  <source type="image/webp" srcset="../img/web/paisaje-jijira.webp">
<img src="../img/web/paisaje-jijira.jpeg" width="720" height="624" alt="Paisaje de la Jijira" title="Paisaje de la Jijira, litoral norte al este de la Habana. En la foto el autor y su esposa">
</picture>
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
Para convertir las imágenes en formato JPG al formato WEBP, se necesita usar la librería LibWebP disponible en Chromium.
En el siguiente artículo explicamos como hacerlo: Convertir imágenes o fotos en formatos JPG o PNG a WebP

Páginas relacionadas



Buscar en este sitio


Comparte esta página




Sígueme en las redes sociales




Instagram




Comenta o lee lo que otros opinan

 
Inicio | Mapa del sitio | Sobre mí | RSS | Buscar