Descarga un manual gratuito que te ayudará a diseñar tu sitio con confianza.
La dirección de correo electrónico que escribiste no es válida.
Gracias por suscribirte.
Si nos das tu correo electrónico, indicas que has leído y comprendido nuestra Política de Privacidad y que aceptas recibir comunicaciones de marketing de Squarespace.
La primera impresión de tu sitio web que se formará tu audiencia está influenciada por las imágenes que elijas para que representen a tu marca. Las imágenes y otros medios que complementan el texto de tu sitio web son parte integral de la creación de un sitio que te permita lograr tus objetivos.
Aquí verás cómo conseguir imágenes para tu sitio web, los mejores formatos de imágenes, cómo subir imágenes a una página web y cómo optimizar las fotos para los motores de búsqueda y la accesibilidad.
Dónde obtener imágenes para tu sitio web
El primer paso para elegir imágenes para tu sitio web es identificar qué tipos de imágenes se alinean con tu marca y con el diseño de tu web. Una vez que hayas determinado la estética que representa a tu marca, podrás buscar las fotos y las imágenes que la lleven a la vida.
Las fotos de stock o los generadores de imágenes son un lugar útil para comenzar, especialmente cuando estás lanzando tu negocio y es posible que aún no tengas muchas de tus propias fotos. Squarespace ofrece integraciones con servicios de fotos de stock para ayudarte a encontrar imágenes de alta calidad, gratuitas o accesibles, para que puedas usarlas en tu sitio web.
Otras formas de conseguir imágenes para tu sitio web incluyen tomar tus propias fotos o contratar a un fotógrafo, si tu presupuesto lo permite.
Squarespace se asocia con Soona para ofrecer servicios de fotografía de productos. Envía tus productos a Soona y selecciona los tipos de imágenes y estilo que deseas, desde GIF y videos hasta fotos de productos modelados. Puedes crear tu propio conjunto de fotos o usar su Squarespace Starter Pack o Squarespace Deluxe Pack.
Tomar tus propias fotos o trabajar con un profesional externo requiere más tiempo que seleccionar fotos de stock, pero los beneficios son muchos. Destacarte con fotos que representen directamente a tu marca (fotos de ti, de tu estudio o de tu tienda, los productos que vendes o tu equipo en acción) puede reforzar tu credibilidad y generar confianza en tu audiencia.
Recuerda que independientemente de si usas fotos de stock o no, si vendes productos, debes tomar fotos originales de los productos para tu tienda online.
Cómo dar formato a imágenes para tu sitio web
Cuando estés agregando fotos en tu sitio web, elige imágenes en alta resolución que tengan formas similares a las áreas en las que las agregarás dentro de tu plantilla para el sitio web. Por ejemplo, si estás subiendo una imagen para un banner, elige una imagen que sea más ancha que alta.
Más allá de eso, el diseño adaptable de los sitios web de Squarespace significa que tus imágenes cambiarán automáticamente de tamaño para adaptarse a cualquier plataforma de visualización: dispositivos móviles, navegadores de escritorio o diferentes anchos de pantalla.
Para que las fotos y las imágenes se carguen rápidamente y bien en tu sitio web, debes prestar mucha atención a los formatos, la resolución y el tamaño de las imágenes.
Mejores formatos de imágenes para sitios web
Los dos tipos de archivos de imágenes para priorizar son JPEG (para las fotos) y PNG (para otras imágenes). El mejor formato de fotos para sitios web es JPEG, que puede expresar el amplio espectro de colores que es común en las fotografías. El mejor formato de imágenes para sitios web es PNG, que es apto para gráficos de alta calidad como logotipos e infografías que no tienen una gran variedad de colores.
Mejor tamaño y mejor resolución para las imágenes de sitios web
Independientemente del formato de imagen que elijas, tener imágenes en alta resolución es clave para cargarlas. Recomendamos dimensiones de imágenes desde entre 1500 y 2500 píxeles de ancho.
Es importante encontrar un equilibrio entre las imágenes de alta resolución y los tamaños de archivo más chicos. Si subes fotos o imágenes demasiado grandes, se ralentizará la carga de tu página. Experimenta con el ajuste de la resolución de la imagen y el tamaño de archivo comprimiendo el archivo de imagen, o prueba cambiar el tamaño de la imagen si es demasiado grande. Puedes hacerlo con los programas de edición de imágenes más comunes.
La recomendación respecto del tamaño de archivo JPEG o PNG es un límite de 500 KB por imagen. Cada página de tu sitio web debe tener menos de 2 MB para optimizar el tiempo de carga de la página. Hay un par de maneras para averiguar el tamaño de cada una de tus páginas web: con herramientas externas en línea y con las herramientas de desarrollo integradas en tu navegador.
Para averiguar el tamaño de cada página web con las herramientas de desarrollo:
Haz clic en el botón derecho sobre la página web y selecciona "Inspeccionar" o "Inspector de página" (según el tipo de navegador que tengas). El panel que aparece en la ventana emergente se denomina herramientas de desarrollo.
Selecciona la pestaña "Red" en la parte superior de ese panel.
Actualiza la página.
El número que aparece antes de la palabra "transferidos" es el tamaño de esa página web. Por ejemplo, puede decir "200 KB transferidos" que indica que tu página web está por debajo del límite de tamaño de 2 MB.
Cómo agregar fotos en tu sitio web
Una vez que hayas seleccionado y comprimido tus fotos, es momento de agregarlas en tu sitio web. Hay dos pasos principales: adaptar las imágenes al diseño de tu página y armonizar las imágenes y el texto.
Incorporar fotos en tu sitio web
Comienza con una plantilla de sitio web, que es la forma más sencilla de agregar fotos y otras imágenes a tu sitio web. Las plantillas de Squarespace facilitan la colocación de imágenes en lugares eficaces, sin necesidad de tener experiencia con el diseño. Puedes subir fotos directamente al editor de tu sitio web o agregarlas en tu Biblioteca de recursos, donde puedes organizarlas y reutilizarlas desde una ubicación central.
Las herramientas de creación de sitios web como Squarespace también te permiten personalizar cómo se visualizarán las imágenes.Por ejemplo, puedes subir imágenes individuales o agregar varias imágenes en un formato de galería o de diapositivas, lo que podría beneficiar a alguien que esté creando un sitio web de portafolio.
Si no te gusta dónde se recorta una imagen más grande, ajusta el punto focal. También puedes ajustar el tamaño y la ubicación de las imágenes con los bloques Tarjeta, Solapamiento e Imagen de collage, y refinar su diseño seleccionando Ancho de imagen en el panel Diseño. Para ajustar aún más los diseños de imagen, puedes recortar imágenes usando el Editor de imágenes y agregar bloques para modificar el espaciado en la página.
Equilibrar las imágenes con el texto
Tus imágenes deben funcionar para complementar el texto de tu sitio web y viceversa; ninguno tiene que hacer el trabajo pesado por sí solo. Por ejemplo, una imagen llamativa con un texto breve puede ilustrar tu objetivo igual que las imágenes usadas para dividir páginas con un texto más extenso.
Se recomienda no incluir texto en tus archivos de imágenes. En su lugar, cuando agregues fotos en tu sitio web, superpone el texto sobre ellas con campos de texto. Este método mitigará los problemas de cambio de tamaño del navegador y, además, permite que los motores de búsqueda ingresen en tu texto.
Optimiza las imágenes de tu sitio web
La optimización para motores de búsqueda (SEO) no es solo para la copia de tu sitio web. Los nombres que das a tus archivos de imágenes afectan la forma en la que los motores de búsqueda indexan tu sitio web y cómo las personas te encuentran. También es importante optimizar el texto alternativo que das a las imágenes, que es una descripción más detallada de la imagen que el nombre del archivo.
Nombra cada archivo con un nombre directo que los motores de búsqueda puedan reconocer. Llámalas tal cual son, y no uses signos de puntuación, excepto guiones. Por ejemplo, una foto de arte en uñas de una salón de belleza de manos podría tener el nombre de archivo "arte-floral-unias-salon-belleza-de-manos".
Es incluso más importante escribir el texto alternativo de todas las fotos y las imágenes que agregues en tu sitio web. Usar el texto alternativo en las imágenes no solo es útil para la SEO, sino que también optimiza tu sitio web para que sea accesible para lectores de pantallas. Sé conciso en estas descripciones y mantenlas dentro del límite de 250 caracteres.
Piensa en lo que una persona con discapacidad visual podría querer saber sobre una imagen que no puede ver. Por ejemplo, un texto alternativo útil para esa foto de arte en uñas podría ser: "Foto de manos con uñas largas y limadas en forma cuadrada pintadas de blanco con diseños de flores". Está bien quitar los artículos de la oración (por ejemplo, un/a, o el/la) y la puntuación, a condición de que la oración completa se traduzca correctamente para los lectores de pantalla.
Esta publicación se actualizó el 17 de noviembre de 2023.