¿Cómo elegir y optimizar las imágenes de tu web?

Se deben tener en cuenta muchos elementos para desarrollar un sitio web exitoso. Para tener el sitio lo más relevante posible, es importante cuidar el aspecto visual de su sitio y en particular las imágenes .

Le mostraremos aquí que una buena selección y una buena optimización de solo pueden ser beneficiosas tanto para usted como para su marketing web.

POR QUÉ ES IMPORTANTE TRABAJAR LAS IMÁGENES DE TU SITIO

Cada sitio web tiene contenido de texto, sin embargo, las páginas y páginas de líneas pueden hacer que pierda la atención de su lector con bastante facilidad. De hecho, los párrafos largos pueden asustar y desinteresar inmediatamente a su audiencia.

También se destaca que el 90% de la información que registra el cerebro está en formato visual, por lo que es una ventaja utilizar documentos visuales para su plataforma web. Además, el contenido visual tiene 40 veces más probabilidades de ser compartido en las redes sociales. Por lo tanto, el uso de imágenes es, sin duda, una gran ventaja para la adquisición de futuros compradores/clientes .

Optimizar las imágenes de tu web te aportará varias ventajas:

  • Velocidad de carga superior
  • Una experiencia de usuario optimizada
  • SEO de calidad SEO
  • Un diseño más elaborado.
  • Comunicación óptima
  • Una personalidad más fuerte

LOS 4 PRINCIPALES FORMATOS DE IMAGEN

Existe una amplia gama de formatos de imagen. Aquí se confrontan cuatro familias principales, el formato JPEG, el formato PNG, el formato SVG y el formato GIF.

El formato JPEG desarrollado a finales de los 80, es el que sigue siendo el más utilizado a pesar de sus pocos inconvenientes. De hecho, no podemos hablar aquí de transparencia/opacidad, este formato no permite la inserción de una película en el fondo y pierde mucha calidad durante la compresión. Pero tiene una gran variedad de colores, aproximadamente 16 millones de colores admitidos.

El formato GIF se estableció en la informática en 1987, luego volvió con más fuerza en la década de 2000 tras la creación de imágenes animadas. Su gama de colores muy limitada reduce mucho la elección de este formato por parte de los usuarios, solo unos 256.

El formato PNG está a medio camino entre JPEG y GIF, es el más reciente, apareció a mediados de los 90, permite comprimir imágenes sin pérdida de calidad. Es conocido por su efecto de transparencia/opacidad, puedes arrastrar una imagen al fondo sin ningún problema.

El formato SVG es un formato más orientado al dibujo. Su finalidad es ofrecer imágenes en forma vectorial, es decir imágenes con una calidad que no se mueva si cambia de tamaño. Tenderemos a utilizarlo para iconos, algunas ilustraciones, mapas, diagramas, etc. Su uso puede resultar muy práctico cuando se quiere integrar creaciones sencillas con un peso muy ligero.

6 CONSEJOS PARA OPTIMIZAR LAS IMÁGENES DE TU SITIO WEB 

Si quieres tener resultados con el visual de tu sitio web, es importante trabajar en varios puntos. Tus imágenes también son una buena manera de mejorar el SEO de tu sitio. De hecho, tienen un papel muy importante y es importante trabajar en todos los diferentes aspectos visuales para optimizar mejor la experiencia del usuario y el SEO de su sitio web.

Presta atención a la calidad de la imagen

Esta es la base, si tu imagen no es de calidad, si está pixelada o tiene mal brillo, tu identidad visual se verá afectada. Así que asegúrese de poner imágenes, ilustraciones, fotos en su sitio verificando varios criterios:

  • Los colores : verifica que estén en un tono que corresponda a tu carta gráfica.
  • Contrastes : lo mismo, presta atención a ciertos contrastes que pueden manchar la mitad de tus páginas.
  • Píxeles : ningún píxel debe ser visible a simple vista.
Ver  La hoja de ruta del desarrollador front-end: cómo convertirse en uno

Para mejorar fácilmente la calidad de tus imágenes, te aconsejo que utilices herramientas como Photoshop o que agregues filtros con herramientas en línea como fotojet, por ejemplo.

Optimiza tus imágenes para la velocidad de carga

Para optimizar la experiencia del usuario, es importante optimizar la carga de sus páginas . Al importar imágenes demasiado grandes en su sitio web, corre el riesgo de ralentizar la navegación de su sitio web. Resultado ? tendrá una tasa de conversión más baja y el diseño UX de su sitio no estará optimizado.

Para tener imágenes que carguen rápidamente, hay varias soluciones disponibles para usted.

  • Comprime la imagen en cuestión : si una imagen te parece demasiado pesada, puedes comprimirla utilizando herramientas online como Ilovimg por ejemplo.
  • Elige otra imagen : simplemente, puedes optar por una modificación de imagen para encontrar una más clara.
  • Modifica sus dimensiones : al modificar el tamaño de una imagen, la harás menos pesada y, por lo tanto, más rápida de cargar en una página.
comparación de calidad
Aquí se realizó una compresión de imagen con el sitio iloveimg.com. El cambio de calidad prácticamente no es visible. Sin embargo, el peso de la imagen se ha reducido claramente.

Sin embargo, tenga cuidado de no exagerar. Si optimiza demasiado sus imágenes para la velocidad de sus páginas, disminuirá la calidad de sus imágenes. Trate de encontrar un medio feliz para tener una velocidad de carga decente mientras tiene una calidad de imagen aceptable.

Trabaja en los nombres de tus archivos

Para tener una referencia óptima de sus páginas y sus imágenes, debe trabajar en los nombres de sus archivos y, por lo tanto, renombrarlos inteligentemente. Para hacer esto, deberá cambiar el nombre de sus archivos antes de importarlos a su sitio web. No más imágenes con un nombre como ”imagen_1″ o ”10234”.

Los motores de búsqueda no solo analizan tus textos, también analizan tus imágenes. Cómo ? Mediante el análisis de las palabras clave contenidas en los títulos y descripciones de sus imágenes. Para tener un título de archivo optimizado, aquí hay algunas reglas a seguir:

  • Utilice palabras clave de su sitio web.
  • No introduzca acentos ni caracteres especiales.
  • Para separar palabras, utilice ”-” (6) en lugar de ”_” (8).
  • Describe correctamente la imagen.
  • No introduzca un título que sea demasiado largo. No más de 6 palabras.

Al trabajar en este aspecto de sus imágenes, Google referenciará correctamente sus imágenes en los motores de búsqueda. Como resultado, su tráfico será mejor.

Crear descripciones efectivas

Para optimizar el impacto de tus imágenes en tu SEO y en tu experiencia de usuario, hay otro aspecto a tratar en las imágenes de tus páginas.

Hay etiquetas que le permiten agregar atributos a sus imágenes. Gracias a las etiquetas “Alt”, si la imagen en cuestión no se muestra, será reemplazada por una descripción que hayas escrito previamente. Esto por lo tanto permite que las personas que no tienen acceso a esta imagen por X razones puedan saber de qué se trata de todos modos.

La etiqueta de descripción, por otro lado, le permite describir la imagen con aún más detalles para que los motores de búsqueda entiendan lo que representa la imagen.

Además, también puede agregar una pequeña descripción debajo de la imagen sin pasar por una etiqueta. Por lo tanto, esta leyenda será visible para sus lectores y mejorará la comprensión entre sus visitantes y por parte de los motores de búsqueda .

Usa imágenes que se parezcan a ti

Muchos sitios utilizan bancos de imágenes para ilustrar su sitio web. De hecho, las imágenes libres de regalías disponibles en Internet están ahí para eso.

Sin embargo, cuando quieres optimizar al máximo tu identidad y experiencia de usuario, usar imágenes genéricas no es suficiente. Para diferenciarte de la competencia, necesitarás producir y crear tus propias fotos, especialmente si tienes un e-commerce.

Ver  El diseño gráfico como estrategia de marketing de contenidos

Por ejemplo, si tiene una tienda en línea, es extremadamente importante tomar fotos de sus propios productos y publicarlas en su sitio web. Si utiliza fotos libres de regalías en Internet, corre el riesgo de perder profesionalidad y sus usuarios tenderán a confundirlo con sus competidores.

Si quieres expresar una idea bastante general, utiliza bancos de imágenes. Por otro lado, si quieres crear una identidad visual real y expresar una idea muy concreta que corresponda a tu marca, será preferible que produzcas tus propias imágenes.

Piense en sus imágenes en teléfonos y tabletas

Muchos de sus visitantes usan su teléfono inteligente o tableta para navegar por la web. Es importante verificar si sus imágenes se muestran correctamente en todos los formatos de pantalla.

Ya sean sus fondos, sus fotos, sus ilustraciones y hasta el logo en su menú, todo debe ser revisado para tener una perfecta representación en teléfonos y tabletas.

¿DÓNDE PUEDO ENCONTRAR BUENAS FOTOS? ¿A QUIÉN LLAMAR?

¿Tienes que tomar las fotos tú mismo?

Las imágenes capturadas con un teléfono inteligente pueden funcionar en gran medida, pero aún necesita saber cómo tomar fotos de calidad, bien enmarcadas y con buena iluminación. Por lo tanto, todo depende aquí del esfuerzo y los medios que dedicará a sus fotografías. Dedicará mucho más tiempo personal, pero el costo será menor.

¿Contratar a un profesional?

El hecho de contratar a un profesional, te certificará con seguridad de las fotografías sin defecto y de una calidad muy bonita. Al contrario de lo dicho anteriormente, la participación personal será muy reducida o incluso igual a 0, pero el coste puede ser muy superior, de media entre 200€ y 500€ por sesión.

¿Elegir imágenes libres de regalías?

¿Qué pasa con el uso de fotos libres de regalías? Muchos sitios web alojan bancos de fotos libres de regalías. Una de las ventajas de estos bancos es la gran diversidad presente en ellos.

Aquí hay algunos:

  • Fotomelia: Este es uno de los raros bancos de fotos libres de derechos que tiene un motor de búsqueda en francés, lo que permite evitar la traducción, esencialmente al inglés.
  • Pixabay: Resulta que este sitio también está en francés, reúne una impresionante selección de fotografías diversas y variadas.
  • Pexels: Este sitio web está en inglés, está lleno de fotos de calidad.
pexels

Para ilustraciones e iconos, también tenéis plataformas de descarga gratuitas:

  • Flaticon: tendrás acceso gracias a este sitio a multitud de iconos completamente libres de derechos.
  • undraw: aquí se proporcionarán ilustraciones y archivos svg para modificarlos a su gusto.
  • Freepik: al igual que Flaticon, los recursos gratuitos y de pago están disponibles en formato png o svg.
plano

Para que pueda encontrar todo lo que necesita allí en muy poco tiempo y, por supuesto, de forma gratuita. Esto ahorra un tiempo considerable pero también ahorros obvios.

Sin embargo, hay una restricción para estos bancos. El contenido visual al estar disponible para todos, por lo tanto, pierde su singularidad, por lo que la posibilidad de encontrar la misma imagen en diferentes sitios es muy probable.

Por lo tanto, cada una de sus opciones tiene sus ventajas y desventajas, depende de usted ver cuál será la más adecuada para usted.

CONCLUSIÓN

Suele decirse que una imagen vale más que mil palabras. De hecho, una imagen te ayudará mucho a compartir tus ideas y presentar tu actividad en tu sitio web. Sin embargo, es esencial respetar algunas reglas para no utilizar tus imágenes de todos modos.

Ten imágenes que destaquen, originales y que encajen perfectamente con los valores e identidad de tu marca . Al respetar esto, podrá configurar series de imágenes efectivas para su sitio web.

Si le ha gustado este artículo, no olvide visitar nuestro blog. También puede visitar nuestra web y observar cómo trabajamos.

PÍDENOS PRESUPUESTO AHORA

Explícanos tu proyecto y te ayudaremos a ponerlo en marcha.

Somos la Agencia líder en diseño de páginas web, diseño de tiendas online, posicionamiento SEO, campañas SEM y redes sociales.

© 2022 · Diseño Web Barcelona · Todos los derechos reservados