Optimizar las imágenes para web: tamaño, peso y SEO

¿Sabías que las imágenes que tiene tu web consumen la mayor parte del ancho de banda que se necesita para visualizar una página? Reducir su peso es esencial para mejorar el tiempo de carga, que es un factor del algoritmo de Google para organizar su ranking de resultados.

Además, la optimización de imágenes mejora la experiencia del usuario y hace que nuestra web sea más estética y profesional. A nadie le gusta una imagen pixelada o que carga a trompicones, así que vamos a ver cómo optimizar las imágenes para web paso a paso.

 

Guía práctica para las imágenes de tu web, una cuestión de peso

Resulta que tengo una imagen chulísima para subir a mi web, ¡pero es monstruosamente grande! Esto quiere decir que pesa una barbaridad y que preparar su visualización va a realentizar notablemente el tiempo de carga.

 

optimizar las imágenes para web

 

Chula, ¿eh? El problema es que, si nos vamos a la información de la imagen, nos llevaremos un buen susto. Como puedes ver, la imagen competiría en la categoría de pesos pesados, con sus 23,2 MB. Además, las dimensiones son de 4.500px X 3000px, o séase, 38.1 cm X 25.4 cm. Un pelín grande, ¿no te parece?

 

Captura de información de archivo

 

 

¿Cuánto debería pesar una imagen para subirla a nuestra web?

Digamos que, si se va a visualizar no demasiado grande, no debería superar los 150 kb. En caso de que sea una imagen importante en la página, de grandes dimensiones, podemos darle hasta 300 kb de margen.

 

¿Qué resolución debo usar para la web?

Para subir una imagen a tu web, la resolución ideal es de 96 px. Una resolución mayor solo hará que el archivo pese más y no hará ninguna diferencia en la visualización de la imagen. La alta resolución, como 300 ppp, está pensada para la impresión en papel y no en pantalla.

 

Entonces, ¿por dónde empezar a optimizar las imágenes para web para que dejen de ser gigantes?

 

La dimensión adecuada

Cuando hablamos de la dimensión, no nos referimos a universos paralelos ni a portales en el espacio-tiempo, sino simplemente al tamaño de la imagen, a los píxeles o centímetros de ancho x alto ede toda la vida.

Averigua las dimensiones recomendadas para cada imagen de tu web y súbelas en ese tamaño. Si la foto de un slider, por ejemplo, se va a mostrar en 500px x 500px, no tiene sentido que la cargues en 2000 x 2000 px.

Veamos el ejemplo que nos ocupa. Al subir esta imagen tal cual a nuestra entrada del blog, tras publicarla podremos pinchar con el botón derecho -> Ver información de la imagen, y veremos que ha sido escalada a 500px x 334px.

 

Dimensiones el WordPress

 

Si trabajas con Photoshop puedes hacer esto cómodamente en Imagen -> Tamaño de imagen, pero muchos otros software gratuitos, como GIMP, te permitirán redimensionar tus fotos sin problema.

En este momento puedes aprovechar para elegir también la resolución adecuada, 96 ppp.

Tras redimensionar nuestra foto al tamaño en el que realmente se visualizará en la web, ¡el peso se reduce un montón! Vemos que ahora la imagen pesa 379kb. Eso sí que es una dieta efectiva.

 

Guardar la imagen: formato y tamaño

A pesar de que hemos bajado de 23,2 MB a 379kb, seguimos por encima de los 300 kb deseados. Aún podemos – y debemos – seguir mejorando nuestra optimización. Cuando estamos trabajando con cualquier programa de edición de imágenes, el momento del guardado tiene mucha importancia para el peso final que tendrá la imagen.

Es el momento de elegir la calidad y el formato, así que vamos a hacer un repasito de los tres formatos más populares de la web:

 

  • JPEG: el viejo amigo JPEG guarda imágenes en buena calidadsin que pesen demasiado, gracias a la simpática comprensión que nos da este formato. Es universal y recomendable para subir fotografías.
  •  GIF: este amiguito es muy útil para logos, iconos y demás imágenes pequeñas y se ha hecho famoso por ser muy resultón con las animaciones. Pero no es recomendable usarlo para carghar imágenes de gran tamaño, ¡no es su fuerte!
  •  PNG: un formato relativamente reciente, con un buen rango de colores, un poco más pesado que el resto pero que soporta efectos muy útiles, como los fondos transparentes. Ideal para infografías, ilustraciones y demás imáganes con texto.

 

Si estamos trabajando con Photoshop, una gran idea es guardar nuestra imagen desde la opción Exportar -> Guardar para web.

Como la imagen tiene texto, hemos decidido guardarla en PNG. Photoshop nos da la opción de guardarla en PNG-8 (256 colores) o PNG-24 (muchos más colores, más detalles, pero más pesada). Nos decidimos por PNG-8, ¡suficiente!

Ahora, el peso de nuestra imagen se ha reducido a 119,8 KB, ¡reto conseguido!

 

Información del archivo, con el tamaño reducido

 

En caso de que no tengas Photoshop, guáradala en PNG normalmente en cualquier herramienta de edición de imágenes. El peso en este caso rondaría los 380 KB, pero no te preocupes porque aún falta comprimir.

 

¡Comprímela!

Existen en la web multitud de herramientas y programas pensados para comprimir y optimizar las imágenes para web al máximo: Optimizilla, ImageOptim, Compressor.io y un largo etcétera. Estas herramientas sirven para librarnos de cualquier información o data innecesaria escondida en nuestro archivo que ocupe espacio y aumente su peso.

Aunque ya hemos reducido notablemente el peso de nuestra imagen, este tipo de aplicaciones todavía nos pueden ahorrar unos cuantos KB más, ¡y en la optimización de imágenes, cada KB cuenta!

Piensa que una web puede contener muchas fotos, infografrafías, iconos e imágenes en general. Kilobyte a kilobyte, cada pequeño ahorro acaba por ser de vital importancia para la velocidad de carga final de nuestra web.

 

Captura de la herramienta Optimizilla

 

Si la guardamos para web con Photoshop, este paso nos reducirá aproximadamente un 2% y la imagen definitiva, por lo tanto, pesará ahora 117,4 KB. ¡Perfecto!

En caso de que la hayamos guardado en PNG sin más rodeos, el optimizador la reducirá en un 68% y el peso definitivo quedará en 121 KB. Tampoco está nada mal.

 

Información de archivo final

 

Optimizando con el SEO en mente

Una vez que tenemos nuestras imágenes bien ligeras y la web carga a la velocidad de la luz, es un buen momento para pensar en cómo optimizar las imágenes para web pensando en el SEO. Si etiquetas correctamente las imágenes y eres respetuoso con una pocas normas, Google podrá leer las imágenes de tu web y las valorará positivamente.

Aquí van los 10 mandamientos del SEO en las imágenes

Ejemplo de cómo optimizar el SEO de tu imagen en WordPress

1. Ponles un título descriptivo

Utiliza un buen nombre de archivo, que sea corto y descriptivo. El nombre de archivo o título de la imagen es uno de los datos que Google puede leer sobre tu imagen.

Es recomendable que el título sea conciso, que las palabras vayan separadas por guiones y que evites caracteres especiales, como la ñ o los acentos.

Un buen nombre de archivo sería algo así como “gato-negro-escalera.jpg”.

2. Y un buen atributo ALT

El atributo ALT es el texto alternativo que se mostrará en pantalla siel navegador no es capaz de visualizar la imagen, por el motivo que sea.

Este atributo es una manera de decirle a Google de qué va la imagen, imagínatelo como una conversación con el Señor Google.

– ¿Y esto qué es?
– Un gato negro sentado en una escalera
– Vale, gracias
– De nada, Google

Sí, en nuestro ejemplo, el atributo ALT podría ser “un gato negro sentado en una escalera”.

Una de las imágenes de cada post de tu blog o página de tu web debería contener la palabra clave.

Recuerda que conviene que el nombre archivo y el título alt de imagen no sean idénticos.

Ejemplo del atributo ALT de una imagen

3. Los captions o pies de foto

Otra forma de añadir información sobre tu imagen son los pies de foto de toda la vida. Si crees que a la imagen puede venirle bien una pequeña explicación al pie, ¡úsalos!

4. El formato también cuenta

Google es amigo de los 3 grandes formatos de imagen: JPEG, PNG y GIF. Así que olvídate de todos los demás formatos alienígenas y sus siglas, porque no ayudarán a tu estrategia SEO. Nada de BMP, ni de TIF, ni SVG, ¡ni nada!

5. Siempre con contexto

Rodea la imagen de texto que tenga que ver y de contenido relevante, ¡porque Google quiere que exista relación entre una cosa y la otra! Si tu foto es de un gato negro, asegúrate de que el texto alrededor no va sobre la NBA.

6. Puedes usar un sitemap

Anímate a incluir en tu site un archivo que funcione específicamente como sitemap de imágenes para ayudar a Google a indexarlas. En él debes incluir la URL de cada imagen y también puedes acompañarla de su título, pie de foto u otra información relevante.

7. Las redes sociales

Como sucede con el SEO del resto de tu web, cuantos más links apunten a la imagen, más relevancia tendrá. Por eso, no dudes en moverlas por todas las redes sociales que puedas e incluye un enlace para compartirlas, que simplifique los shares hacia redes como Pinterest o Tumblr.

8. La originalidad

Sí, Google es un gran admirador del contenido fresco y original, así que siempre es buena idea que intentes usar imágenes propias, diferenciadas. Las fotos de stock son muy útiles, pero Google las va a encontrar en 7 millones de webs, además de la tuya.

Si lo tuyo no es el diseño gráfico ni la fotografía, al menos puedes modificar alguna imagen de stock para darle un toque personal en alguna herramienta como Canva.

9. ¿Texto en la imagen?

Mejor que no. Si lo que tienes que decir sobre la foto es importante, mejor dilo en el pie de página, en el texto o en el atributo ALT. Googl no sabe leer textos que formen parte de las imágenes, ¡por ahora!

10. El SEO, siempre natural

Igual que sucede con el resto de la estretegia SEO de tu web, no te pases al optimizar las imágenes para web o acabarás des-optimizando. Utiliza imágenes cuando haya un motivo, que tengan relevancia y no las metas con calzador.

Tampoco es buen plan repetir la keyword en todas las imágenes que subas. Ni poner 78 fotos en cada página. Todo con moderación para que Google no se mosquee.

 

¿Y qué pasa con las fotos que subimos a las RRSS?

Pues que también tienen sus propias normas de optimización, ¡claro! Las redes sociales como Facebook o Instagram tienen su propio sistema de comprensión de imágenes y, a veces, es un pelín drástico. Parece ser que, mientras los fabricantes de Smartphones y cámaras digitales se esfuerzan por acumular Megapíxeles, las redes a las que subimos el resultado final trabajan duro en hacer que sean cada vez más pequeñas. Paradójico, ¿eh?

 

Fotografía impresa frente a fotografía digital

 

Cada día se suben a estas plataformas millones de millones de fotografías, ¿te imaginas el gigantesco flujo de información y el espacio de esto supone? Por ese motivo, ambas redes procuran que tus fotografías pesen lo menos posible.

Subir a Facebook una foto que pese 20 MB no va a hacer que se vea mejor; de hecho, no tiene sentido. Lo mejor que podemos hacer para controlar la forma en la que se va a ver la imagen es trabajarla previamente y subirla con un peso inferior a los 100 KB, a poder ser. Sí, 100 KB es más o menos lo que va a pesar tu foto si la subes a Facebook y la descargas desde allí.

Para no perder la nitidez de tus imágenes, lo mejor que puedes hacer es:

 

  1. Optimizarlas tú previamente y trabajar su comprensión para controlar cómo se van a ver las fotos una vez subidas.
  2. Haz que sus dimensiones coincidan con las que la red social recomienda para cada posición: foto de perfil, portada, publicación, etc.

Muy pronto subiremos otro post en el que te daremos directrices y consejos más concretos para optimizar tus imágenes para las redes sociales, ¡ni se te ocurra perdértelo!

¿Tienes algún consejo para optimizar las imágenes para web sin perder nitidez? ¿Algún truquillo que no hayamos mencionado? ¡Queremos que nos lo cuentes todo!

>

¡A nosotros también nos gustas!

Ya que hemos hecho match, ¿qué tal si mantenemos el contacto?

Política de privacidad

¡Allá vamos! Confirma tu dirección a través del correo que te enviaremos a continuación.