Imágenes para web: los 5 mejores formatos y sus usos

Imágenes para web: los 5 mejores formatos y sus usos

Elegir los mejores formatos de imagen para web

Para crear el sitio web perfecto hay cientos de cosas en las que pensar y muchas decisiones para tomar.

Y es que a estas alturas tener una web por tenerla no es una buena opción: desaparecerá por el ciberespacio entre tantas otras.

Por eso hay que cuidar todos los aspectos.

Un error muy común es subestimar la elección del formato de imagen que vamos a utilizar y el tamaño de las mismas, porque generalmente no afectan a nivel visual

Sin embargo, las imágenes tienen un impacto importante porque afectan directamente en la velocidad de carga.

 

¿Cómo afecta esto?

  • A nivel SEO: para posicionar una web en los buscadores necesitas que tenga una buena velocidad de carga, cuanto mejor estén optimizadas las  imágenes, mayor será la puntuación de tu web.
  • A nivel usuario: no nos gusta esperar … y además, cuanto más pesadas sean las imágenes, más datos nos hacen consumir

Por eso hoy preparé esta lista con los mejores formatos de imagen para tu web.  Toma nota

 

 Los 5 mejores formatos de imagen para web

     

Formato GIF:

Comprime las imágenes sin perder calidad y además, permite transparencias y animaciones

Es el formato ideal para logotipos sencillos e imágenes con colores planos

Admite una paleta de hasta 256 colores, por lo que no es una buena opción para fotografías

Formato JPG:

Es el formato más conocido y utilizado para fotografía en diseño web y redes sociales

Es un tipo de archivo que no pesa mucho y que reproduce muy bien los colores

Además, permite compresión con o sin pérdida de calidad

Para que este formato de imagen sea realmente eficaz en tu web, es necesaria una compresión que reduzca su peso, para eso puedes usar programas como Photoshop, o hacerlo en plataformas como TinyPNG

Formato PNG

Admite transparencias y comprime sin pérdida de calidad, por lo que nos da mejor definición, pero también mayor peso

Utiliza este formato de imagen para tu web a discreción, cuando necesites mucha definición y fondo transparente, como en el caso del logotipo

Formato SVG

Es un tipo de archivo vectorial que tendrá el mismo peso tenga el tamaño que tenga

Los archivos SVG presentan una imagen nítida y de alta calidad con bajo peso.

Son ideales para el logotipo y también para iconos

Formato WebP

Es una formato desarrollado por Google que comprime sin pérdida, y por lo tanto acelera la carga de las imágenes en cualquier dispositivo

Imágenes y SEO

Además del formato y el peso, cuando hablamos de imágenes en diseño web a nivel SEO, es importante tener en cuenta otros dos elementos:

 

  • El atributo «alt», que es de las primeras cosas que rastrean las arañas de Google para rastrear webs
  • El título de la imágen, que también es muy valorado por Google para dar relevancia a tu sitio

Por Laura González
Responsable de Estudio Café

Diseño web  Branding Marketing

"Dale a tu negocio la chispa creativa que necesita, la que convence a tus clientes"

Las mejores combinaciones tipográficas para diseño web

Las mejores combinaciones tipográficas para diseño web

Para crear el sitio web perfecto hay miles de cosas en las que pensar:

  • Gráficos
  • Colores
  • Fotos
  • Textos
  • SEO …

Sin embargo, un error muy común es subestimar la elección de las tipografías, y precisamente es uno de los elementos más importantes en el impacto del mensaje y la apariencia final de una web.

Así que presta atención, porque elegir la tipografía correcta puede tener un gran impacto en el diseño de tu web.  

En este artículo te cuento cómo afecta la elección de la tipografía en tu web y te muestro mis combinaciones favoritas.

 

Tipografía y Experiencia de usuario

Todo comunica

Queremos que nuestros visitantes entren en nuestra web, se queden, y nos elijan, así que vamos a darles motivos:

Comodidad

Las tipografías afectan a la legibilidad del contenido. ¿Quieres que te lean? La tipografía debe ser clara, simple y tener el tamaño correcto.

Impacto

El impacto que crees para el usuario es tan importante como el impacto que crees para Google u otros buscadores, por eso es importante trabajar de manera personalizada cada parte del texto.

Un error muy común, (porque es muy fácil de hacer), es que los títulos y subtítulos tengan el tamaño de fuente que le dimos en la hoja de estilo.

Se suele usar la palabra clave que elegimos para el SEO como título principal cuando eso no es lo que le importa al usuario.

Emoción

Elegir combinación tipográfica afecta tanto a la legibilidad como al impacto psicológico del usuario, por eso es crucial, la tipografía también transmite los valores y la personalidad de tu marca.

 

Combinaciones tipográficas que no fallan:

Combinaciones de tipografías para web: Bebas Neue - Roboto Slab - Open Sans
Combinaciones de tipografías para web: Assistant - Prata - Arial
Combinaciones de tipografías para web: Raleway - Quicksand
Combinaciones de tipografías para web: Abril fatface - Lato
Combinaciones de tipografías para web: Poppins - Lora
Combinaciones de tipografías para web: Assistan - Belleza

Tipografías web seguras

 Si quieres que tu futuro cliente se quede en tu web, no lo hagas esperar.  

Las tipografías también pesan, por eso debes usar fuentes seguras para tu web.

Una tipografía segura es la que se instala universalmente en todos los dispositivos, porque hace que que la velocidad de carga sea más rápida, lo que también ayuda en la clasificación del SEO de tu web.

 

¿De dónde elegirlas?

El catálogo de Google Fonts es la mejor opción.  Tiene más de 800 fuentes que puedes filtrar por estilo y probar en sus diferentes versiones.

 

Las marcas son percepciones

Por Laura González
Responsable de Estudio Café

Diseño web  Branding Marketing

"Dale a tu negocio la chispa creativa que necesita, la que convence a tus clientes"