Medidas ideales para las imágenes de tu sitio
Qué tamaño y forma debe tener cada imagen (portada, tarjetas, blog, galería, logo) para que se vea nítida en computadora y en celular.
La respuesta corta: sube fotos horizontales de al menos 1920 × 1080 px en JPG y el logo en SVG o PNG con fondo transparente. No tienes que comprimir nada: al subirlas, Skolaris las reduce y optimiza para que el sitio cargue rápido.
La regla general
Casi todas las dudas se resuelven con tres ideas:
- Tamaño: mínimo 1400 px en el lado más largo. Más grande no estorba (el editor la reduce al subirla), más chica se ve borrosa en pantallas grandes.
- Orientación: horizontal para portadas, encabezados y fotos junto a texto. Vertical solo para fotos del equipo y algunas tarjetas.
- Composición: deja al protagonista de la foto en el centro. En celular la misma imagen se recorta por los lados.
Medidas por tipo de imagen
Busca dónde va a aparecer tu imagen. La medida es la recomendada para subir; la forma es la proporción en la que se ve en el sitio.
| Dónde aparece | Forma | Medida recomendada |
|---|---|---|
| Portada de inicio (imagen grande con título encima) | Horizontal 16:9 | 1920 × 1080 px |
| Encabezado de páginas interiores | Muy horizontal, tipo franja | 1920 × 640 px |
| Portada dividida (foto a un lado, texto al otro) | Casi cuadrada | 1400 × 1400 px |
| Foto junto a un texto | Horizontal 4:3 | 1400 × 1050 px |
| Tarjetas (niveles, servicios, enlaces) | Horizontal 4:3 | 1200 × 900 px |
| Tarjetas verticales de niveles | Vertical 3:4 | 900 × 1200 px |
| Imagen destacada de un artículo del blog | Horizontal 16:9 | 1400 × 788 px |
| Imágenes dentro de un artículo | Libre | 1400 px de ancho |
| Galería de fotos | Libre (las miniaturas son cuadradas) | 1400 px en el lado largo |
| Fotos del equipo o directivos | Vertical 3:4 | 800 × 1067 px |
| Foto de la persona en un testimonio | Cuadrada | 400 × 400 px |
| Miniatura de un video | 16:9 (o 9:16 si es vertical) | 1280 × 720 px |
| Imagen de una ventana emergente (popup) | Franja horizontal, cerca de 3:1 | 1400 × 500 px |
| Logo del colegio | La de tu logo | SVG, o PNG transparente de 400 a 600 px de ancho |
| Logos de certificaciones o aliados | La de cada logo | SVG, o PNG transparente de unos 400 px de ancho |
| Imagen al compartir en WhatsApp o redes | Horizontal 1.91:1 | 1200 × 630 px exactos |
| Ícono de la pestaña del navegador (favicon) | Cuadrada | 512 × 512 px, PNG o SVG |
Cómo se recorta una foto en celular
Una portada se ve horizontal en la computadora y casi vertical en el celular. El sitio no deforma la foto: la recorta para llenar el espacio.
Por eso:
- Centra lo importante. Si el alumno o el edificio está en una orilla, en celular puede quedar fuera.
- Deja aire alrededor. Las fotos muy cerradas (una cara que llena todo el cuadro) se recortan mal en las franjas anchas.
- Las portadas y encabezados llevan texto encima con un velo oscuro para que se lea. Una foto con mucho detalle en esa zona compite con el título.
- En las tarjetas del blog, el título y la fecha van sobre la mitad inferior de la imagen. Lo importante de la foto debe quedar arriba.
Para revisar el recorte, abre la página en tu celular después de cambiar la imagen. Si algo importante quedó fuera, cambia la foto por una más abierta o con el protagonista más al centro.
Formato y peso del archivo
- Fotos: JPG. También sirven PNG y WebP.
- Logos y gráficos con transparencia: SVG si lo tienes; si no, PNG con fondo transparente. Recorta los márgenes vacíos alrededor del logo para que no se vea más chico de lo que es.
- Peso: el máximo es de 25 MB por archivo. No hace falta pasar las fotos por un compresor: Skolaris las optimiza al subirlas.
Fotos de iPhone (HEIC): el editor no acepta este formato porque muchos navegadores no lo muestran. Puedes exportar la foto como JPG, o cambiar el formato de la cámara en Ajustes → Cámara → Formatos → Más compatible para que las siguientes fotos salgan en JPG.
Errores que vemos seguido
- Fotos reenviadas por WhatsApp. WhatsApp reduce y comprime las imágenes. Pide el archivo original por correo o por una carpeta compartida.
- Capturas de pantalla o imágenes bajadas de redes. Suelen ser chicas y se ven borrosas en una portada.
- Fotos verticales en la portada. Para llenar un espacio horizontal, el sitio tiene que cortar arriba y abajo, y se pierde casi toda la foto.
- Texto dentro de la imagen (fechas, frases, carteles). En celular se recorta, Google no lo lee y cada cambio obliga a rehacer el diseño. Escribe ese texto en el editor, encima o junto a la foto.
- Logo con fondo blanco. Se ve como un recuadro sobre fondos de color. Usa la versión transparente.
La medida correcta no salva una mala foto. Si vas a organizar una sesión o pedirle fotos a un fotógrafo, revisa nuestra guía de fotografía escolar: qué fotos necesita de verdad la web de un colegio, cómo pedirlas y cómo hacerlo sin exponer a ningún alumno.
La imagen que aparece al compartir
Cuando alguien comparte una página de tu sitio por WhatsApp, Facebook o LinkedIn, se muestra una imagen de vista previa. Mide 1200 × 630 px y conviene que el logo o el mensaje queden en el centro, porque algunas apps la recortan en cuadrado.
En los artículos del blog, si no eliges una imagen para compartir, se usa la imagen destacada. Por eso la imagen destacada en horizontal 16:9 funciona bien en los dos lugares.
¿Te quedó alguna duda?
Escríbenos y te contesta una persona del equipo, no un bot.