Guía para conseguir que las imágenes de nuestra web tengan el tamaño adecuado
Una de las cuestiones que más quebraderos de cabeza suele dar a nuestros clientes a la hora de mantener el contenido de su página web actualizada son las fotos. Porque una cosa es escribir un blog con información útil o relevante sobre nuestro negocio o nuestro sector y otra bien distinta es ilustrar el texto de manera adecuada. Y sí, hablamos en la mayoría de los casos de imágenes de recurso, pero estas son fundamentales para potenciar el atractivo de un texto, para facilitar su lectura y, por tanto, para ayudar a difundir su contenido. Es por ello que nos hemos currado una pequeña guía para facilitar el trabajo con imágenes en web.
El tamaño sí importa
En dos sentidos: hay que saber las dimensiones de la fotografía y su peso. El tamaño de las imágenes con las que ilustramos nuestras webs viene determinado por el diseño de la web, así que si no es ajusta a las medidas predeterminadas, el efecto estético será un problema. ¿Y cómo podemos saber las medidas de un foto? En cada navegador se sigue un camino parecido, pero no igual. Estos son los principales:
-Google Chrome: Más herramientas > Herramientas para desarrolladores (Ctrl + Mayúsculas + I) / Botón derecho > Inspeccionar
-Mozilla Firefox: Desarrollador > Inspector (Ctrl + Mayúsculas + C) / Botón derecho > Inspeccionar elemento
-Internet Explorer: Herramientas de desarrollo (F12) / Botón derecho > Propiedades
-Safari: Desarrollo > Mostrar inspector web
Una vez determinadas las dimensiones que debe tener la foto (en píxeles), tenemos que cortarla, teniendo en cuenta no sólo las medidas, sino también el peso, porque a más peso, más tardará la web en cargarla. Es por ello que nosotros recomendamos a nuestros clientes que nunca suban fotos de más de 100 kb. La clave está en ofrecer la máxima calidad con el menor peso.
Cómo conseguir el tamaño adecuado
Para cortar las imágenes al tamaño y peso que necesitamos existen diversas herramientas, tanto de pago como gratuitas. En nuestros cursos y a nuestros clientes solemos recomendarles PicMonkey, un editor online gratuito de uso muy sencillo. Ni siquiera es necesario registrarse. El proceso básico es el siguiente:
Picmonkey.com > Edit > Subir la foto que queramos cortar > Crop > No fixed proportions > Poner las medidas (en píxeles) > Marcar Scale photo > Adaptar en el editor el tamaño de la imagen seleccionada > Apply > Save
Al guardar, nos optimiza la foto (el menor peso con la mejor calidad posible) y nos ofrece tres niveles de optimización, cada uno de ellos bautizado con el nombre de pila de un actor que ha interpretado a James Bond: Roger, Pierce y Sean. Elegimos el que más nos convenga y nombramos la foto de forma adecuada, es decir, con una frase corta descriptiva en la que las palabras claves estén separadas por guiones. En el ejemplo que estamos utilizando podría ser algo así como ‘huellas-arena’. De esta forma, los buscadores indexarán de manera más sencilla y útil las imágenes que utilicemos en nuestra web.
Et voilá! Ya tenemos foto para ilustrar el último artículo de nuestro blog de forma adecuada. El proceso, como se puede apreciar, es sencillo y es necesario que se convierta en un ritual para garantizar que nuestra web ofrece la mejor imagen posible.
PD: Si eres de los que se enfrenta al problema de no tener fotografías para ilustrar tus artículos, te recordamos que Pixabay es un fantástico repositorio de imágenes gratuitas y libres de derechos, que es precisamente de donde descargamos la fotografía que usamos en nuestro ejemplo.
——
¿Te gustó el artículo? Puedes leer más como éste si te suscribes a nuestro boletín. ¡Pincha aquí y suscríbete!
