Las imágenes de tu web son un elemento fundamental, pero si no las optimizas de forma adecuada pueden perjudicar al funcionamiento y posicionamiento de esta.
#1 Exporta en el formato adecuado
Una de las claves a la hora de optimizar imágenes, es elegir bien el formato.
En función del tipo de imagen es recomendable optar por una extensión u otra, para así obtener el mejor equilibrio entre calidad y tamaño. Los formatos más utilizados son JPG, PNG y GIF, aunque, cada vez más, nos vamos encontrando con el nuevo formato WebP, que parece que ha venido para quedarse 😉
Aquí tienes un breve resumen sobre los tipos de formato de imagen:
.jpg: Formato habitual para fotografías, permite ajustar la calidad.
.png: Ideal para imágenes de logotipos y vectores. Mantienen las transparencias y pesan algo más que los JPG.
.gif: Para imágenes en movimiento o animaciones.
.webp: Nuevo formato de imagen para web. Permite reducir el tamaño de estas hasta un 30% con respecto a los formatos habituales y sin pérdida de calidad.
Si quieres ampliar información acerca de los tipos de formato de imagen, echa un ojo a la entrada ¿Cuándo usar JPG, PNG y GIF? También te será útil nuestro post sobre Cómo convertir imágenes a WebP en el que te explicamos con más detalle todas las características de este formato.
#2 Encuentra el equilibrio entre calidad y peso
A veces, se comete el error de subir las imágenes a la web tal cual, sin tener en cuenta ni el tamaño, ni la resolución, ni el peso. Estos son 3 aspectos fundamentales que debes cuidar para que no ocupen ni más, ni menos de lo que deben:
- Tamaño en píxeles. Según el espacio que vayan a ocupar en la web, las imágenes deberán tener un tamaño concreto. Si el hueco es, por ejemplo, de 400x400px, de nada sirve que subamos una imagen de 800x800px.
No pensemos que tendrá «más calidad» por subirla de mayor tamaño, lo único que ocurrirá es que ocupará más espacio en disco innecesariamente, ya que la imagen se va a adaptar visualmente a esos 400×400 píxeles pesando lo mismo. Al igual que tampoco debemos subirla de menor tamaño, porque ahí sí que va a afectar a la calidad, puesto que la imagen va a tender a «estirarse» para ocupar el espacio asignado en la página.
- Resolución. Los PPP (píxeles por pulgada) o DPI (dots per inch). Aquí es donde entra en juego la calidad de las imágenes. A mayor resolución, mayor calidad, para impresiones se suelen utilizar mínimo 300dpi pero para web con 72dpi es suficiente.
- Peso o tamaño en kb. El peso en kilobytes viene determinado por el formato, el tamaño en píxeles y la resolución. Una imagen para web no debería ocupar más de 200kb y lo ideal es que el total todas las imágenes de tu página no supere 1mb.
#3 Ajusta tus imágenes antes de subirlas
Como hemos comentado en el punto anterior, es importante que ajustes el tamaño y la resolución. Para ello, puedes usar programas como Adobe Photoshop o incluso el propio Paint.
Después, te recomendamos que pases las imágenes también por un compresor de imágenes online como por ejemplo Tinyjpg o Tinypng.
#4 Si tienes ya muchas imágenes subidas…
En el caso de que ya hayas creado tu página y tengas muchas imágenes subidas, si está hecha con WordPress, para ahorrarte el trabajo de modificarlas y volverlas a subir de 1 en 1, puedes usar el plugin WP Smush. Con esta herramienta podrás optimizar hasta 50 imágenes con un solo clic.
#5 Adapta las imágenes para la versión responsive
En la versión responsive, evita mostrar imágenes innecesarias. Redimensiona y adáptalas para su visualización en cada dispositivo. Ya sabes que no necesitas el mismo tamaño para pantallas de pc que para móviles o tablets 😉
¿Por qué optimizar las imágenes para web?
1 Mejorará la velocidad de carga.
2 Por lo tanto, los buscadores lo valorarán positivamente y tu posicionamiento SEO también mejorará.
3 Lo que aumentará las posibilidades de conversión de tu negocio.
4 Darás una imagen más profesional.
Para ver si has optimizado de forma correcta las imágenes de tu web, puedes utilizar la herramienta Google Pagespeed. Solo tienes que escribir la URL y hacer clic en Analizar.
Entre todos los apartados, hay algunos referentes a la optimización de imágenes, comprueba que estén en verde. Si hay algo que no es correcto, la herramienta te indicará qué es lo que debes corregir.
Síguenos en: