.
A continuación se describen las características de fotos, imágenes o videos para los diferentes formatos posibles, teniendo en cuenta una grilla a 12 columnas para diseño que garantiza la función responsive de cada uno de sus componentes y el impacto en performance del sitio de lo mismo. Adicionalmente las recomendaciones relacionadas con cómo nombrar las imágenes se basan teniendo en cuenta tanto lo funcional como el SEO.
Tipo de archivo | Descripción Técnica | Ejemplo |
|---|
Banner completo (ancho pantalla completa) | Tamaño por imagen (ancho x alto) = 1920 px x la altura deseada (recomendada: a partir de 325 px) Resolución: 72 dpi Color mode: RGB Formato: PNG - JPG (para web) Peso por imagen: máximo 300KB, ideal menor. Recomendación: textos (deben ser cortos), botones e información principal de la imagen debe diseñarse ubicándose a centro manera que pueda adaptarse bien a la versión responsive
| |
Banner centrado | Tamaño por imagen (ancho x alto) = 1664 px x la altura deseada (recomendada: a partir de 325 px) Resolución: 72 dpi Color mode: RGB Formato: PNG - JPG (para web) Peso por imagen: máximo 300KB, ideal menor. Recomendación: textos (deben ser cortos), botones e información principal de la imagen debe diseñarse ubicándose a centro manera que pueda adaptarse bien a la versión responsive.
|
Diseño x 2 imágenes | Tamaño por imagen (ancho x alto) = 824 px x la altura deseada Resolución: 72 dpi Color mode: RGB Formato: PNG - JPG (para web) Peso por imagen: máximo 200KB, ideal menor.
|
Diseño x 3 imágenes | Tamaño por imagen (ancho x alto) = 544 px x la altura deseada Resolución: 72 dpi Color mode: RGB Formato: PNG - JPG (para web) Peso por imagen: máximo 200KB, ideal menor.
|
Diseño x 4 imágenes | |
Diseño x 5 imágenes Centrado o carrusel con botones (este puede estar compuesto por 3 o 4 imágenes también) | |
Diseño x 6 imágenes | |
Diseño combinado | |
|
| | |
Es importante tener presente todas estas indicaciones para lograr el peso ideal máximo por página que es de 1MB y un tiempo de carga de 3 segundos.