Las fotos o imágenes que utilizamos en las paginas web son un factor importante para generar la atención en nuestros contenidos y mejorar el posicionamiento SEO del sitio.

¿Cómo escoger las imágenes adecuadas para un sitio web?

Para identificar una buena imagen te recomendamos:

  • Que las imágenes utilizadas en un banner o un artíiculo, tengan relación con el tema que se trata. 
  • Que lás imágenes tengan la mejor calidad posible.
  • Preferiblemente que sean fotos originales ya que éstas generan mayor credibilidad en los mensajes visuales generando mayor confianza de lo que vendes vs lo que recibes.
  • Que la foto que elijas conecte a tu visitante y logres que se identifique con ella. Si tu mercado es latino intenta usar fotos de personas latinas no utilices fotos de personas extranjeras, no hay nada mas incoherente que un rubio de pelo rojo y ojos azules en la portada del sitio web de un servicio de odontología en en un municipio en colombia.

Sobre los nombres de la imágenes

Google tambien indexa las imágenes de los artículos, por tal razon es muy importante que las imágenes tengan el mismo nombre del título o palabra clave donde se va a colocar y considerar las siguientes recomendaciones:

  • No utilizar Tildes,
  • No utilizar letra "Ñ"
  • No utilizar caracteres especiales coo $,#,%,&... etc.
  • Reemplaza los espacios por guión medio o guión bajo
  • No utilizar mayúsculas.

Ejemplos:

  • servicio_de_mantenimiento_de_impresoras.jpg
  • cursos-de-ingles-en-bogota
  • quienes_somos.jpg
  • pintura.jpg

Y si las páginas van a tener varias fotos (galería o distribuidas) agregar un numero consecutivo al final.

  • mantenimiento-de-pisos-industriales-01.jpg
  • mantenimiento-de-pisos-industriales-02.jpg
  • mantenimiento-de-pisos-industriales-03.jpg

Dimensiones de las imágenes

Para definir las dimensiones y la orientación (horizontal o vertical) apropiadas le recomendamos medir el espacio en donde se van a ubicar . Una foto tomada en vertical no siempre es la mejor opción para usarse en un banner horizontal.

Las imágenes originales deben tener la mejor calidad y tamaño posible, sin embargo se deben optimizar antes de utilizarce en el sitio web, tenga en cuenta que, entre más grande la imagen más tiempo toma en cargar y por ende mas pesado será el sitio.

Dimensiones frecuentes:

  • Para banners de full tamaño las dimensiones habituales son de 1920px de ancho x máximo 500px de alto
  • Para publicaciones del blog o noticias el estandar en 2024 es de 1200px x 630px pero se recomienda aumentar proporcionalmente a imagenes de 1400px x  735px
  • Para fotos de productos en tiendas se recomienda estandarizar el tamaño dependiendo del tipo de producto. Para formatos cuadrados de 800 x 800 , tambien considerar formatos verticales de 600 x 800 
  • Para galerías de varias fotos se recomienda 800 x 600

Formatos de las imágenes

En todos los casos se recomienda utilizar formatos livianos para que el sitio web cargue rápidamente.

Tradicionalmente se ha utilizado JPG de alta calidad para las imágenes normales  y PNG para las imágenes en donde se requiere transparencia; sin embargo en 2024 el formato Webp creado por Google es el formato mas adecuado por las siguientes razones:

  • Compresión Superior
  • Sin pérdida: WebP ofrece compresión sin pérdida similar a PNG, pero los archivos resultantes son hasta un 26% más pequeños en tamaño.
  • Con pérdida: En comparación con el JPEG, WebP con compresión con pérdida puede reducir el tamaño del archivo hasta un 34% manteniendo una calidad visual similar o superior.
  • Soporte de Transparencia: Al igual que PNG, WebP admite transparencia, conocida también como canal alfa. Esto permite superponer imágenes WebP en diferentes fondos sin dejar un «halo» alrededor.
  • Rendimiento en la Animación: WebP también puede utilizarse para animaciones, sirviendo como alternativa a los GIFs. Las animaciones WebP tienen archivos mucho más pequeños y mantienen una calidad superior en comparación con los GIFs tradicionales.
  • Metadatos: Al igual que otros formatos de imagen, WebP permite incrustar metadatos en el archivo, lo que puede ser útil para añadir información sobre derechos de autor, geolocalización y más.
  • Configurabilidad: WebP permite a los usuarios configurar el nivel de compresión para lograr el equilibrio perfecto entre el tamaño del archivo y la calidad de la imagen, según las necesidades del proyecto.
  • Compatibilidad con Color: Ofrece soporte para los perfiles de color RGB y una amplia gama de bit depths, lo que garantiza que las imágenes mantengan colores vibrantes y precisos.
  • Decodificación Rápida: Las imágenes WebP están diseñadas para ser decodificadas rápidamente, lo que significa que las páginas web que las utilizan se cargan a una velocidad superior, mejorando la experiencia general del usuario.
  • Menor Uso de CPU: Gracias a su diseño eficiente, WebP utiliza menos CPU para la decodificación en comparación con otros formatos, lo que puede prolongar la vida útil de la batería en dispositivos móviles.

¿Cómo organizar las imágenes en el servidor?

En la medida que los sitio web crecen, el organizar las carpetas de las imágenes facilitará la administración futura de los sitios web asi que recomendamos:

  • Si tu sitio esta en Joomla te recomendamos usar el gestor de multimedia y crear carpetas por categorías y por subcategorias para almacenar las imágenes de los artículos, carpetas de banners, carpeta de elementos de la pagina de inicio.
  • Si tu sitio esta en Wordpress te recomendamos utilizar el plugin de Filebird y usarlo para clasificar categorías y subcategorias para almacenar las imágenes de los post y las paginas, carpetas de banners, carpeta de elementos de la pagina de inicio.

Bancos de imágenes

Tambien esta la posibilidad de conseguir imágenes en bancos de imágenes gratuitos:

Para Bancos de imagenes profesionales