Más vale una imagen que mil palabras, ¿verdad? Las imágenes de tu web hablan por sí solas. Con ellas mostrarás tus productos, el resultados de tu servicio, explicar procesos o, simplemente, acompañar a los artículos de tu blog.
Además, aportan un diseño y una calidad visual, con lo que tu página web será mucho más atractiva para el usuario, convirtiéndose en un recurso imprescindible para mantener la atención de tus visitantes y conseguir que se conviertan en potenciales clientes.
Para poder aprovechar cada una de las ventajas que nos proporciona su uso, tenemos que preparar las imágenes para la web. Para ello, hay que tener en cuenta una serie de cuestiones. De hecho, no preparar imágenes para web, ni cuidar el peso de una fotografía puede hacer que el rendimiento del sitio web se vea afectado. ¿Cómo? Muy sencillo: la velocidad de carga de una web es un factor muy relevante en muchos aspectos: para el posicionamiento orgánico, para hacer que nuestros visitantes tengan una buena experiencia con nuestra web y naveguen en ella e, incluso, para no desperdiciar presupuesto en la inversión publicitaria.
Por todas estas razones, te vamos a dar una serie de recomendaciones para que las tengas en cuenta al subir imágenes a tu web.
El formato
Una de las principales claves para preparar imágenes para web tiene que ver con el formato. Podemos identificar tres formatos de imágenes que destacan en el uso de web: PNG, JPG y GIF. Cada uno cumple una función diferente.
PNG: Es el formato utilizado para logotipos, iconos e imágenes sin fondo (con fondo transparente), son un poco más pesados que el JPG, pero a la hora de diseñar un sitio web son necesarios para algunas funcionalidades.
JPG: Es el formato por excelencia para comprimir imágenes. Con este formato puedes conseguir imágenes de muy bajo peso sin perder la calidad. Te recomendamos usar JPG para todas esas imágenes que no sean logos o iconos, como pueden ser banners o imágenes para acompañar el contenido de tu blog.
GIF: Es un formato para animaciones, ya que utiliza una secuencia de varias imágenes que se van reproduciendo a la velocidad que hayamos elegido. Suele perder mucha calidad al comprimirse.
La resolución
La resolución de una imagen se mide en píxeles por pulgadas (pp), cuanto más elevado sea el número de pp, mayor será la calidad de la imagen pero, a su vez, mayor será el peso de una fotografía o imagen.
La resolución recomendada para las imágenes que se usan en web debe oscilar entre 72 pp y 150 pp. Puedes comprobar la resolución real de tus imágenes en su ficha de detalles (clic con el botón derecho > propiedades> detalles) o usando Photoshop.
Si utilizas Photoshop hay una forma de guardar imágenes listas para utilizar en tu sitio web, Puedes encontrarla en archivo > guardar para web. Ahí podrás cambiar la resolución de tu imagen, además encontrarás todas las opciones, para elegir el formato y el tamaño, podrás ir viendo cómo varía el peso según las funciones que elijas. Ahí podrás cambiar la resolución de tu imagen, además de encontrar otras opciones para elegir el formato y el tamaño. Verás cómo varía el peso según las opciones que elijas. Jugando con las diferentes opciones podremos lograr nuestro objetivo: optimizar el peso de la imagen sin perder calidad perceptible de la misma.
El peso
El tamaño o peso de la imagen será determinante para calcular la velocidad de carga de una página. Por ello, optimizar el tamaño de imágenes es indispensable a la hora de subir cualquier tipo de imagen a la web.
Independientemente de la resolución que tenga una imagen, podemos optimizarla para que, sin una pérdida apreciable de calidad visual, pase de pesar de 5 MB a 100kb. Para esto es importante la manera en la que guardemos nuestra imagen cuando la exportamos desde Photoshop o desde cualquier tipo de herramienta y que la optimicemos antes de subirla a nuestro sitio web.
En alGenio recomendamos el uso de imágenes de menos de 500 kbs. Para ello, tras haberla exportado correctamente desde la herramienta de edición que usemos, podemos pasarla por alguna de las muchas herramientas online que existen para comprimir imágenes, aquí te dejamos algunos ejemplos para optimizar el peso de una fotografía:
Tamaño en píxeles
En función de los píxeles que tenga una imagen, tanto de largo como de ancho, se puede determinar su tamaño. Este tamaño es relevante a la hora de decidir cuántos píxeles debe tener una imagen para web, ya que la respuesta es: depende. Depende de cuál va a ser la función de esa imagen, a continuación dejamos algunos ejemplos para que te sirvan de orientación.
Imágenes para la cabecera (header o slider): es una imagen que va a ocupar la totalidad del ancho de nuestra pantalla por lo que debería tener una tamaño de entre 1500 y 3000 píxeles de ancho.
Imágenes que acompañan al texto: estas imágenes suelen ocupar la mitad del ancho de nuestra pantalla o en muchos casos incluso menos. Su tamaño debe oscilar entre los 600 px y los 1000 px de ancho o largo, según la orientación de la imagen.
Imágenes para productos o de cada miembro del equipo: Suelen ser imágenes cuadradas de 400 px x 400 px.
Recuerda: es importante tener en cuenta que si una imagen va a rellenar un hueco cuadrado, esta no puede ser una imagen totalmente vertical, puesto que no quedará bien. La orientación y contenido de la imagen deben ser específicos para su función.
Saca partido a las imágenes en SEO
Cuando hablamos de SEO, solemos pensar en textos y enlaces. Pero, en muchas ocasiones, las imágenes son más fáciles de posicionar que el propio contenido. Google considera las imágenes uno de los factores a tener en cuenta de cara al posicionamiento orgánico de su algoritmo. Te recomendamos que los títulos de las imágenes estén relacionados con los términos y las palabras claves con las que te propones aparecer en Google. Además, recuerda que en web las tildes y la letra ñ no son caracteres legibles, por lo que nunca uses tilde ni ñ en tus títulos o títulos alternativos (alt).
Recomendaciones
Por último, te dejamos una serie de recomendaciones que, aunque no son técnicas, también te ayudarán a alcanzar una mayor calidad en tu sitio web.
Intenta que sean imágenes visualmente atractivas para el usuario. Por ejemplo, en el caso de una página de arquitectura, que sean fotografías de los espacios reformados y decorados, que estén llenas de luz y reflejen estancias amplias.
Las imágenes deben estar estrechamente relacionadas con el contenido de la página o de la entrada de blog. La imagen debe reforzar el mensaje que queremos transmitir, y debe vender tu negocio.
Evita utilizar imágenes pixeladas o en las que no se vea claramente el contenido.
Evita utilizar imágenes repetitivas, que sea demasiado parecidas.
Si crees que tus imágenes no cumplen los requisitos, siempre es preferible usar imágenes de stock, que sí tengan la calidad suficiente.¡Esperamos que te haya sido útil! Y recuerda, tener preparar tus imágenes para tu web mejorará la experiencia de los usuarios que entren en ella, así que ya sabes, no hay excusa para no tener imágenes 100% optimizadas en tu sitio web.
