Cómo subir fotos a Squarespace y dónde cargar archivos de imagen en tu web

13 dic.

Tutorial y mejores prácticas para optimizar imágenes para tu web

En esta entrada te comparto dónde debes hacer click, además de darte tips para optimizar tu sitio.

En este tutorial encontrarás:

Cómo funciona el bloque básico de imagen
Cómo usar los bloques de diseño y cómo editar su apariencia (versión 7.0 y 7.1)
Dónde colocar imágenes como un banner en la cabecera de tus páginas
Dónde colocar miniaturas para ciertas páginas
Cómo editar y cortar las imágenes directamente en Squarespace

Existen otros espacios donde puedes colocar imágenes, sin embargo, no los veremos en esta entrada. Por ejemplo, cuando cargas tu logo y favicon o cuando subes galerías de imágenes, pero no te preocupes, próximamente lanzaré tutoriales al respecto, así que te invito a que también te suscribas al boletín y de paso te descargas los recursos gratuitos que tengo para ti.

Para el BLOG

Mejores prácticas para subir fotos a Squarespace

Hay varios puntos a destacar antes de pasar a la práctica.

Formatos de archivos de imagen

En primer lugar qué formatos puedes subir a la plataforma:

Idealmente te recomiendo que subas JPG, ya que por naturaleza son más ligeros lo cual ayuda a que tu web no sea tan lenta. Sin embargo, puede ser que requieras que la imagen sea con fondo transparente y esto sólo lo consigues con el formato de PNG.

Peso de las fotos y gráficos

El peso máximo que se recomienda en la plataforma es de 500 kb, no obstante, cuando trabajo en mi sitio o en webs de clientes procuro que mis imágenes pesen mucho menos, sobre todo si son gráficos para acompañar un blog por ejemplo, trato de que pesen menos de los 100 kb, y cuando se trata de imágenes que van a llenar la pantalla permito que pesen un poco más de los 500 kb.

Tamaño recomendado para tus fotos e imágenes

En cuanto a los tamaños, idealmente deberías subir fotos que midan a lo ancho unos 1500px, excepto cuando se trate de imágenes que llenen la pantalla de lado a lado, en este caso permito que lleguen a medir hasta 3500px para que la calidad sea óptima cuando se vea desde una pantalla muy amplia como puede ser una televisión.

Nombre de tus archivos de imagen (texto alt)

Otro punto importante es colocarle un nombre a nuestros archivos, existe un espacio en Squarespace donde puedes ponerlo, aunque puedes agregarlo antes de subir tus gráficos. Los tipos de caracteres que puedes utilizar son letras, números y guiones (ya sean cortos o largos).

Puedes agregar el nombre de la imagen, y aunque es opcional, mi recomendación es que siempre la nombres poniendo de qué se trata o con alguna palabra clave, ya que te ayuda a optimizar el sitio. También sirve cuando un visitante tiene un internet muy lento, al menos aparecerá de qué se trata la imagen, esto es lo que se conoce como Alt-Text.

Compresión de imágenes

Si no estás usando un programa como Photoshop donde puedas trabajar el peso y tamaño, mi recomendación es que pases tus imágenes por alguna página de compresión como tinypng.com o compresspeng.com, así puedes aligerar el peso de tus imágenes antes de cargarlas a la web.

Bloque básico de imágenes

Tutorial min 5:11

Este bloque lo encuentras en los bloques básicos que te da Squarespace.

Te aparecerá la opción de cargar la imagen desde tu equipo o puedes buscar una imagen.

Si das en la opción de buscar imagen, te aparecerán 3 opciones:

Puedes descargar directamente fotografías de Unsplash ya que tienen un acuerdo con la plataforma. Estas fotos son gratuitas y libres de licencia.
También existe la opción Premium de Getty en la que tendrías que pagar por la imagen que quieras utilizar.

Sin embargo, no te recomiendo subir tus imágenes de esta manera, ya que son de muy alta calidad y por lo tanto son pesadas, por lo que es mejor ir directamente a Unsplash o a Getty, descargarlas y procesarlas con las mejores prácticas que te mencioné al inicio, y entonces ya subirlas desde tu equipo a la web.

La tercera opción es la sección de importadas, donde encontrarás todas las imágenes de muestra además de las que hayas subido a la plataforma para que puedas volver a utilizarlas.

En este bloque puedes colocar una leyenda que aparezca:

por debajo de la imagen
superponerla
que no se muestre
que aparezca al pasar el cursor

Si seleccionas la opción de Lightbox, hará que tu imagen se expanda al momento de dar click en ella. Si no seleccionas esta opción, podrás agregar un enlace a tu imagen que puede llevar a otra sección de la web o a una página en concreto.

También puedes optar por darle alguna animación a tus imágenes para un diseño más dinámico.

Bloques de diseño de imagen

Tutorial min 13:08

Dando click en el goterito, encontrarás los distintos diseños de imagen.

Póster
Tarjeta
Collage
Apilado

Dependiendo de la opción que elijas, puedes agregar un título y texto que acompañen a la imagen.

Puedes añadir un enlace ya sea en el texto o en la propia imagen, aunque yo te recomiendo que lo hagas agregando un botón, ya que es más intuitivo para los usuarios.

Editar la apariencia de los bloques de imagen en Squarespace 7.0 y 7.1

Tutorial min 16:46

En la versión 7.1, si quieres realizar ajustes a estos bloques (por ejemplo, el ancho de la imagen con relación al texto), debes dirigirte a DISEÑO > BLOQUES DE IMÁGEN.

El tamaño y formato del texto depende del que le quieras asignar (H1, H2, H3, H4, p1, p2 o p3).

El color depende de los temas de la sección (claro minimalista, oscuro minimalista, etc…)

El botón toma la apariencia que hayas asignado a tus botones básicos.

En la versión 7.0 tendrás que dirigirte a DISEÑO > ESTILOS DEL SITIO y al pasar el cursor por encima del bloque y encontrarás todas las opciones que puedes ajustar (incluyendo colores, título, subtítulo y botones).

Añadir imágenes como banner en la cabecera o sección de una página

Tutorial min 19:13

Podemos agregar imágenes como banner para que llenen todo el fondo de pantalla marcando una gran división con la siguiente sección.

En la versión 7.1, en el “lapicito” que te permite editar la sección te diriges a fondo y es ahí donde puedes subir una imagen ya sea desde tu equipo o de las imágenes cargadas.

En la versión 7.0 también es posible colocar un banner, en este caso se añade desde el botón cabecera cuando vas a editar una sección dentro de un índice.

Otra forma de cargar la imagen es desde la “tuerquita de configuración” y en multimedia se agregaría la imagen.

En todos los casos puedes mover el punto focal y esto te ayudará para la vista desde dispositivos móviles y así decidir qué quieres que se vea.

Otros lugares para añadir imágenes (miniaturas)

Tutorial min 22:10

Puedes cargar fotos que acompañen la URL que compartas de las diferentes páginas.

Por ejemplo, para tus blogposts debes ir a editar el blog y en opciones encontrarás que puedes añadir una imagen como miniatura, de esta forma también aparecerán cuando los usuarios visiten el blog. Lo mismo puedes hacer con productos, agregas la miniatura en el apartado de OPCIONES.

Puedes añadir una imagen para redes sociales que no sea la que está por defecto en tu sitio, de forma que cuando compartas la url en redes sociales, el enlace se verá acompañado por la imagen que hayas elegido.