Ya tengas una web corporativa, un blog o una tienda online, seguro que utilizas muchísimas imágenes. Las imágenes cobran cada día mayor importancia en el diseño web, suelen ser el 70-80% del contenido. No solo aportan un diseño único sino que afectan al posicionamiento SEO y determinan casi por completo el tiempo de carga de una web. Aunque es tentador no podemos subir las imágenes tal y como las tenemos en el ordenador o en el móvil, debemos optimizarlas antes. Piénsalo, cuánta mayor sea la imagen más pesará y más tardará en mostrarse, pudiendo empeorar la experiencia del usuario. Esta situación es incluso más dramática en dispositivos móviles, ya que la conexión es mucho menor. Además las imágenes pueden ayudarnos a posicionar mejor nuestra web.
Formatos de imágenes para web
Antes de nada, tenemos que saber qué tipos de imágenes se utilizan en una web y en qué casos:
JPG. Son las imágenes más habituales. Es el formato perfecto para fotografías con muchos detalles y colores. Sin embargo es un formato que pierde calidad para reducir el tamaño, y con ello nitidez, por lo que pueden aparecer borrosas al bajarles el peso.
PNG. Se utiliza sobre todo para imágenes con transparencias. No pierde tanta calidad como el JPG al reducir el tamaño así que su calidad normalmente será mejor. Se recomienda utilizar sobre todo para logotipos, imágenes planas o con grandes espacios blancos, como capturas de pantalla, etc.
SVG. Es el formato con mayor calidad. Se utiliza para imágenes vectorizadas ya que se pueden escalar sin perder nada de calidad y sin aumentar su peso. Suena demasiado bonito, verdad? Su principal problema es que sobrecargan algunos navegadores y su abuso puede resultar en webs más lentas. Por ello se utiliza casi exclusivamente para logotipos e iconos.
GIF. Muy similar al PNG pero con animaciones. Se utiliza cuando queremos que una imagen aparezca con movimiento. Sin embargo hay que tener en cuenta que ralentiza mucho la carga de la web y por ello esta casi en desuso.
En general usaremos PNG para todas las imágenes que componen nuestra web, SVG para logotipos o iconos, botones y JPG solo para las fotografías, sobre todo las grandes. Desde hace algunos años los diseñadores huyen cada vez más de los JPGs, decantándose por otros formatos. En NoJPEG explican todas sus razones ????
¿Cómo optimizamos las imágenes de la web?
- Subir las imágenes del tamaño exacto. Vale, es imposible saber al 100% cuál será el tamaño exacto en el que se mostrará la imagen. Sin embargo sí que sabremos sus proporciones y el tamaño máximo en el que se mostrará. Aunque existen miles de herramientas que permiten recortar la imagen al tamaño necesario, este proceso ralentiza la carga de la image. Por esta razón hay que intentar subir las imágenes del tamaño necesario.
- La resolución debe ser 72ppp. Las imágenes para imprenta utilizan una resolución mucho mayor, de 300ppp. En el entorno web, la resolución no tiene apenas efectos sobre la calidad de la imagen. Lo único a lo que afecta es al peso de la misma.
- Evita cargar gran cantidad de imágenes a la vez. En una galería de imágenes no cargues al mismo tiempo todas las imágenes. Lo mejor es utilizar un script que permita cargar de forma progresiva las imágenes. Es decir, se cargan solo las que se están mostrando en el pantalla, cuando el usuario baje para ver el resto del contenido se cargarán el resto de imágenes.
- Si la imagen está vectorizada mejor. Hay dos tipos de imágenes: las rasterizadas (jpg, png…) y las vectorizadas (svg). Las primeras están compuestas por píxeles, mientras que las segundas son vectores. La principal diferencia es que una imagen vectorizada se podrá ampliar todo lo que se quiera y nunca se pixelará, mientras que las imágenes normales dependerán siempre de su resolución. Las imágenes vectorizadas son muy recomendables para elementos como el logo, iconos, etc.
- Comprimir las imágenes. Una de las recomendaciones de Google para agilizar la carga web, es comprimir las imágenes. Perderán un poco de calidad, pero no tanta como para que se note. Hay varias herramientas web para comprimir las imágenes, de hecho google te permite descargarte tus propias imágenes ya comprimidas. Nosotros, después de utilizar varias herramientas, nos quedamos con TinyPNG que además tiene un plugin de optimización de imágenes para WordPress.
No te olvides: optimiza tus imágenes!
