A la hora de diseñar una web espectacular las imágenes y los contenidos multimedia tienen un papel fundamental para ayudarte a conectar con tu publico objetivo. Sin embargo, el uso de imágenes es un arma de doble filo, si no usan correctamente pueden penalizar el rendimiento de tu web y su posicionamiento.
En este blog te enseñare como puedes optimizar imágenes para tu web y sacarle el máximo rendimiento a este gran recurso.
¿PORQUE ES IMPORTANTE OPTIMIZAR IMÁGENES?
Como ya hemos comentado uno de los aspectos más importantes a la hora de posicionar tu web es su rendimiento y para ello optimizar imágenes es una practica más que obligatoria por varios motivos.
El primero de ello es el tamaño global de la web, de media se estima que las imágenes ocupan entre el 25% y el 50% del tamaño total de la web, por encima del código, los scripts y el css. Por lo que reducir el tamaño de las imágenes te ayuda a reducir el tamaño de tu web y agilizar sus tiempos de carga.
Otro de los aspectos cruciales para el posicionamiento SEO, es la métrica LCP (Largest content paintfull) que se encarga de medir el tiempo de carga del elemento más grande de la web, por lo que reducir el tamaño de imágenes principales como las Hero o los sliders es vital para mejorar el resultado de este parámetro.
¿CONOCES LOS FORMATOS DE LAS IMÁGENES?
A la hora de utilizar imágenes en tu web es muy importante conocer los diferentes formatos de imágenes que puedes usar, ya que cada uno de ellos tiene unos usos y unos niveles de optimización diferentes.
- JPEG: Este formato ayuda a reducir el tamaño de las imágenes manteniendo unos niveles de calidad aceptables, por lo que lo recomendamos para diseños sencillos e imágenes de baja calidad.
- PNG: El formato PNG tiene una mayor calidad de imagen que JPG y tiene un gran nivel de compresión, por lo que es muy recomendable para imágenes con muchos detalles y gran calidad.
En los últimos tiempos han irrumpido dos nuevos formatos de imágenes que permiten optimizar imágenes a niveles muy superiores que los formatos anteriores.
- WebP: Este formato es tiene un nivel de compresión entre 30% – 40% mayor que PNG manteniendo un nivel de calidad similar. Ademas al igual que PNG admite transparencias, por lo que se convierte en un gran sustituto de este formato.
- AVIF: Es el formato más reciente y es capaz de optimizar imágenes hasta un 80% respecto al PNG, lo cual lo transforma en uno de los formatos a tener en cuenta en un futuro.
Aunque estos nuevos formatos permiten niveles de optimización muy altos, no todos los navegadores son capaces de procesarlos, por lo que hay que ser muy cuidadoso a la hora de usarlos.
EL TAMAÑO IMPORTA
Uno de los problemas más habituales que nos encontramos a la hora de optimizar imágenes es el tamaño de las mismas, con la mejora de los dispositivos tecnológicos cada vez es más fácil realizar fotografías de alta resolución como HD o 4K, sin embargo no es recomendable usar esas imágenes sin tratar en tu web, ya que debido a su gran resolución será imposible reducir su tamaño hasta niveles óptimos.
Para ayudarte a usar tamaños de imágenes optimizados para tu web te dejo la siguiente guía:
- Tamaño favicon: 30×30
- Tamaño de la miniatura: 150 x 150.
- Tamaño medio: 300 x 300.
- Tamaño medio grande: 768 x 768.
- Tamaño grande: 1024 x 1024.
¿CÓMO OPTIMIZAR IMÁGENES?
Una vez que hemos seleccionado un buen formato de imagen para nuestra web y hemos adaptado su tamaño para su uso en la web te recomiendo optimizar las imágenes usando programas especializados para ellos. Este proceso permitirá reducir el tamaño de las imágenes sin perder su calidad. Aunque a nivel profesional se pueden usar herramientas de edición profesionales como Adobe Photoshop, existen varias herramientas en linea gratuitas que se pueden usar con grandes resultados, por lo que te dejo mis dos herramientas online favoritas.
- Optmizilla: Un compresor muy sencillo para los formatos tradicionales y con una carga de 20 imágenes máximas, lo cual facilita el trabajo cuando se tienen que optimizar varias galerías.
- Shortpixel: Un editor y conversor todo en uno, ayudándote no solo a optimizar imágenes si no también a cambiar su formato a WebP y AVIF.
Si tienes alguna duda, no dudes en ponerte en contacto con nosotros o síguenos en redes para enterarte de próximos blogs relacionados con todo lo que te he contado.
ÚLTIMOS BLOGS
CATEGORIAS
GLOSARIO
- Multimedia: El termino multimedia lo empleamos para referirnos a sistemas o archivos empleados para trasmitir información. Estos medios pueden ser muy variados, desde textos a imágenes, videos o animaciones.
- Formato: En informática el termino formato se refiere a la estructura interna y codificación de un archivo para su almacenamiento o visualización.
- SEO: SEO o Search Engine Optimization significa optimizacion de motores de búsqueda y engloba todas los estudios, estrategias y técnicas de optimización que se centran en mejorar el posicionamiento de una web en los motores de búsqueda.
- Optimizar Imágenes: El proceso de optimizar imágenes es el proceso de disminuir el tamaño de la imagen utilizando mecanismos de compresión capaces de reducir el tamaño sin perder calidad.
TAGS
SÍGUENOS EN REDES
Síguenos en nuestra redes sociales y no te pierdas ninguna novedad.