He pensado que sería una buena idea crear un post de guía para optimizar nuestras imágenes para nuestra web o blog. Es un manual sencillo y rápido para tener a mano cuando estemos publicando nuestros post. A continuación os explicaré los pasos que sigo a la hora de optimizar mis imágenes, lo que sirve tanto para reducir el peso de nuestra web al cargarse, como para ayudarnos a posicionar nuestra web en Internet.
FASE 1 – EDICIÓN DE LA IMAGEN
Para ello puedes utilizar cualquier programa de edición de imagen. Yo utilizo Photoshop pero practicamente cualquier programa de edición de descarga gratuita en Internet nos servirá para ello.
1) Lo primero que tenemos que hacer cuando optimicemos una imagen para web es procurar que dicha imagen tenga unas dimensiones exactamente iguales a las que se mostrarán en nuestra web. De esta manera ahorramos un peso de carga que sería innecesario
2) Una de las cosas que hago casi por costumbre es aplicar a la imagen una «Máscara de Enfoque». También podemos aplicar efectos automáticos para ahorrar tiempo, tales como «Color automático» o «Contraste automático».
3) En segundo lugar asegurémonos de que el perfil de imagen es RGB.
4) La proporción de píxeles más recomendada para la publicación en red es de 72 ppi
5) Otra de las cosas importantes que debemos de tener en cuenta a la hora de publicar nuestras imágenes es el formato. El mejor formato para publicación en Internet y que yo recomiendo es .JPG
6) Por último exportemos la imagen para web. Al hacerlo elijamos una calidad media/alta por ejemplo de 60.
7) A la hora de nombrar la imagen intentaremos usar palabras descriptivas con guiones en medio. El número total de caracteres no debe superar los 20 o 30. 50 sería el límite máximo de caracteres de una imagen si queremos que obtenga un buen posicionamiento. Por ejemplo, si tenemos una web de venta de sillas, podemos usar el nombre genérico «silla» y un adjetivo o palabra definitoria del objeto, por ejemplo «verde». Así, nuestra imagen se llamaría «silla-verde.jpg»
FASE 2 – OPTIMIZACIÓN DE LA IMAGEN EN WEB
Es el proceso de optimización de las imágenes una vez están subidas a nuestra web. Se recomienda subir todas las imágenes de nuestra web a un mismo directorio o carpeta en nuestro servidor.
8) Etiqueta Alt
Se utilizan como un texto que describe una imagen. Si la imagen no se carga por algún motivo, este texto se mostrará en su lugar lo que ayudará mucho en la accesibilidad de la web. Además, son las etiquetas de imágenes favoritas de Google y son, como quien dice, obligatorias. La etiqueta Alt se sitúa dentro del código Html de una imagen. La construcción típica sería:
<img src=” tiendadesillas.com/imagenes/silla-verde.jpg” width=”15px” height=” 20px” alt=”Silla verde de madera”>
La descripción de la etiqueta Alt debe describir la imagen, como ya hemos dicho. Las palabras deben ir separadas por espacios y no por guiones, a diferencia del nombre de la imagen. En el ejemplo he añadido además las medidas de la imagen, lo cual nos puede resultar muy util de utilizar en caso de que no hayamos recortado la imagen con las medidas con las que se va a mostrar en la web.
9) Etiqueta Title
La etiqueta Title muestra información adicional de la imagen y no es tan importante como la etiqueta Alt, aunque es importante incluirla ya que algunos navegadores la utilizan en su lugar. Además, el texto de la etiqueta Title muestra una información emergente al pasar el ratón por encima de ella. En teoría ambas etiquetas no han de tener el mismo texto, la etiqueta Alt es descriptiva mientras la etiqueta Title añade información adicional, que no es necesaria, y que complementa a la dada en Alt.
La construcción típica de una etiqueta Title para imágenes es la siguiente:
<img src=»tiendadesillas.com/imagenes/silla-verde.jpg» width=”15px” height=” 20px” alt=»Silla verde de madera» title=»Silla artesanal»>
10) Leyenda de imagen
Es el pie de foto de una imagen, puede verse a simple vista, no está sólo dentro del código de la web. En WordPress se puede incluir de una forma muy sencilla editando la imagen una vez insertada, en el campo «leyenda».
Espero que esta guía os ayude a optimizar las imágenes de vuestra web y a posicionarla mejor. Como veis es un manual muy sencillo que merece la pena tener a mano cuando editamos nuestros post. Si os ha gustado, por favor, compartidlo en vuestras redes sociales. ¿Creeis que falta algún detalle o técnica concreta para optimizar mejor nuestras imágenes o ayudar a que estén mejor posicionadas? ¡Gracias por leer y por vuestros comentarios!
Deja tu comentario