El tamaño de imagen adecuado para su sitio web: Lunes de 10 minutos

El vídeo de abajo muestra cómo encuentro el tamaño de imagen adecuado para cualquier proyecto de sitio web

¿Qué? No hay imágenes?

Si eres como la mayoría de la gente, cuando descargaste tu primer tema de WordPress te preguntaste qué había pasado con las imágenes, esas mismas imágenes que te hicieron querer comprar ese tema.

Una vez superada tu primera GRAN decepción, que tu tema NO venía con imágenes, la siguiente pregunta que probablemente te hiciste fue: ‘¿Cómo demonios consigo que mi tema de WordPress se parezca a la demo?

Si empiezas por averiguar qué tamaño de imagen utilizaba la demo de tu tema, pronto tendrás un sitio mejor que la demo porque tendrá las imágenes que mejor te representen a ti y a tu negocio.

El tamaño correcto de la imagen

Cuando estoy construyendo un sitio web de WordPress para mis clientes, por lo general necesito 4 imágenes de diferentes tamaños:

  1. página de inicio / imagen de cabecera de la página principal (también conocida como imagen de héroe)
  2. banners de cabecera de la página,
  3. imágenes de post del blog, y
  4. imágenes de la barra lateral.

Cómo encontrar el tamaño adecuado

La información de CONFIGURACIÓN DE MEDIOS en APARENCIA es un gran lugar para empezar porque te dará…

  • el mejor ancho de imagen para una entrada de blog (1024 es para el tema Showcase Pro), y
  • qué tamaño de imagen funcionará mejor en la barra lateral de tu tema (300)
  • …PERO no te dará las dimensiones para tu página de INICIO / Imagen de cabecera de la página principal o banners de cabecera de la página.

    Encontrarás el tamaño para tu página de INICIO / Portada Tamaño de la imagen de cabecera en APARIENCIA -> PERSONALIZAR -> IMAGEN DE CABECERA DE LA PÁGINA DE INICIO.

    En este ejemplo, el tamaño es de 1600 px X 1050 px.

    Banners de cabecera de página

    Encontrar este tamaño es un poco más complicado.

    Por ejemplo, el banner de cabecera de la página TEAM de demostración de Showcase Pro es mucho más fino que la imagen de cabecera de la página HOME / Front, PERO la documentación del tema no me dice de qué tamaño hacer el banner de cabecera de la página TEAM.

    Para encontrar el tamaño de la imagen de cabecera de cualquier página

    Ingresa la URL de la demo de tu tema en el navegador Firefox. Utilice Firebug para obtener las dimensiones exactas del tamaño de la imagen que se utilizó.

  1. Derecha + clic / Control + clic (Mac) en la página web
  2. Seleccione Ver información de la página
  3. Seleccione Medios
  4. Desplácese hacia abajo hasta Fondo
  5. Seleccione la imagen que es la misma que el banner de cabecera
  6. Dimensiones: te da el tamaño exacto de la imagen utilizada en la demo del tema
    1. El tamaño del banner de cabecera del TEAM es la dimensión exacta del banner de cabecera de la página HOME (1600 px X 1050 px), aunque se muestra más fino.

      Mira el vídeo de abajo para ver cómo uso Firefox para encontrar el tamaño correcto de la imagen.

      ¿Qué? No todas las imágenes de los banners de cabecera tienen el mismo tamaño

      Cuando comprobé el banner de cabecera del BLOG, me sorprendió saber que no tenía el mismo tamaño que el banner de la cabecera del TEAM. En lugar de ser de 1600 x 1050, era de 1800 px X 960px.

      Los banners de cabecera de este tema cambiarán de tamaño para mantener el aspecto consistente en todo el sitio web.

      Tu reto de diseño será encontrar imágenes que se vean bien en espacios largos y estrechos.

      El tamaño «correcto» de la imagen de la entrada del blog

      Usarás estos mismos pasos para encontrar el tamaño de la imagen de la entrada del blog de demostración de tu tema:

  • Derecha + clic / Control + clic (Mac) en la página web
  • Seleccione Ver información de la página
  • Seleccione Medios
  • Desplácese hacia abajo hasta Fondo
  • Seleccione la imagen que es la misma que el banner de la cabecera
  • Dimensiones: te da el tamaño exacto de la imagen utilizada en la demo del tema
900 px X 600 px

Consejo final

Las imágenes para la web deben ser de 72 ppp y RGB.

Las imágenes para impresión deben ser de 300 ppp y CMYK.

Mira cómo uso Firefox para encontrar el tamaño de imagen correcto en la demo del tema

¿Necesitas ayuda con tus imágenes?

Acompáñame en los Lunes de 10 minutos donde comparto consejos y trucos para los no diseñadores que quieren mejorar su imagen profesional.

También puedes llamarme por teléfono o enviarme un correo electrónico, cuando quieras. Contacto

Acompáñame en directo en mi próximo Lunes de 10 Minutos

Obtén una invitación para acompañarme en DIRECTO en mi próximo Lunes de 10 Minutos, y recibe una lista de mis recursos gratuitos favoritos para conseguir una gran fotografía que puedes utilizar en tu web o en cualquier proyecto.

Es en DIRECTO y sólo dura 10 minutos. Las sesiones son cortas y se centran en un tema.

Y como es en VIVO puedes hacer preguntas. También intento que las sesiones sean cortas porque sé que estás ocupado y no tienes tiempo que perder.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *