¿Mejores prácticas para imágenes de navegador de ancho completo?

¿Cuáles son las mejores prácticas que las personas siguen con respecto a las imágenes en vistas más grandes?

¿Para qué tamaño de navegador debemos diseñar? Es decir, ¿cómo manejamos los monitores de alta resolución y qué porcentaje de usuarios tiene pantallas grandes?

¿Cómo podemos lidiar mejor con la altura de las imágenes de héroes, ya que realmente necesitamos decidir qué resolución de pantalla elegir?

Por supuesto, todo esto es manteniendo la filosofía de la cuadrícula de 12 columnas;)

Asprilla

Si bien los comentarios anteriores hacen muy buenos puntos técnicos, sugiero adaptar su trabajo a un cliente en particular, que comienza por mirar Google Analytics de su sitio actual - Informes / Tecnología / Navegador y SO / Resolución de pantalla. De esta manera, pasará su tiempo y el presupuesto de su cliente sabiamente al abordar las necesidades específicas de su cliente en lugar de implementar pautas generales. De hecho, en ocasiones tuvimos que aconsejar a nuestros clientes que no hicieran un diseño totalmente receptivo simplemente porque su tráfico que no es de escritorio no justificaría el gasto.

Hay varias cosas a tener en cuenta al servir imágenes a los espectadores.

1. Mantenga la proporción de la imagen igual que las dimensiones originales

Hacemos esto para evitar que la imagen se sesgue y para evitar que las imágenes se vean borrosas. Podemos mantener la relación de dimensión igual o recortar partes que no encajan.

Cuando se usa un <img>elemento o algo similar, esto es bastante sencillo, solo requiere el uso de un conjunto widtho heightconjunto OR max-widtho max-height.

Sin embargo, en el caso de una imagen de ancho de ventana completa, esto es un poco más complejo. Hay varias formas de CSS para hacerlo , la mejor de las cuales es background-size:covercomo el primer ejemplo vinculado en el artículo y el programa de respuestas de Talkingrock .

Además, ahora tenemos la capacidad de usar las características que se encuentran en la especificación de imágenes receptivas, incluido srcsetel <picture>elemento, que son bastante útiles. Hablo de esto más adelante en esta respuesta.

2. Proporcione a los espectadores solo las imágenes que necesitan

Para tener una carga de página más rápida y evitar que los usuarios necesiten transferir más datos, es de vital importancia brindarle al usuario final solo las imágenes que necesita, cuando las necesita. Esto significa que les servimos una imagen del mismo tamaño o un poco más grande que la vista que están usando y esperando para cargar imágenes que no se verán inmediatamente hasta después de la carga inicial de la página.

Podemos servir una imagen de tamaño más apropiado usando CSS usando @mediaconsultas cuando usamos imágenes de fondo. Las imágenes que no están en la consulta de medios que se utilizan no se cargan . Recomiendo usar al menos tres tamaños de fotos (lo que significa al menos 3 consultas de medios), pero tener un par más podría ser muy útil en cuanto al rendimiento. El siguiente es un ejemplo, pero generalmente debe coincidir con algunos puntos de interrupción generales para el diseño de su sitio.

@media (max-width: 320px) { /* For phones (this breakpoint is the one I'm least sure about) */
    ... background-image(imageURLforPhones.png); ...
}
@media (min-width:501px) and (max-width: 1024px) { /* For tablets and such */
    ... background-image(imageURLforTablets.png); ...
}
@media (min-width: 1025px) { /* For large screens */
    ... background-image(imageURLforLargeScreens.png); ...
}

Pero, seamos sinceros: no somos buenos para elegir puntos de interrupción ni somos perfectos para elegir dimensiones de imagen dado un cierto tamaño de pantalla. ¿No sería genial si pudiéramos dejar que algo haga esto "mágicamente" por nosotros?

¡La buena noticia es que ahora podemos !

Con la especificación de imágenes receptivas, podemos dejar que el navegador decida todo esto por nosotros, siempre que lo ayudemos un poco. La srcsetpropiedad siempre tan útil se puede usar con un <img>o un <picture>elemento. Para cambiar la resolución como lo estamos haciendo aquí, deberíamos usar un <img>elemento.

El siguiente es un ejemplo del HTML necesario para permitir srcsethacer su trabajo. Para más información, puede leer el gran artículo de Yoav Weiss sobre el tema. El ejemplo se extrae de él.

<img src="cat_500px.jpg"
     srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
     width="500" alt="lolcat">

_{Nota al margen: si necesita publicar la misma imagen con diferentes dimensiones en ciertos tamaños de ventana gráfica, puede usar el sizesatributo.}

No digo que usar srcsetsea ​​necesariamente mejor que usar una imagen de fondo CSS, no he trabajado lo suficiente para decirlo con certeza, pero es potencialmente una mejor manera.

Además, para ayudar con el rendimiento, podemos "cargar lentamente" imágenes que inicialmente no serán visibles. Esto significa que evitamos que se carguen inicialmente, pero comenzamos a cargarlos tan pronto como la página inicial termine de cargarse. De esa forma podemos hacer que el espectador vea la página lo antes posible y complete algunos detalles más adelante. Aquí hay una manera de hacerlo, no voy a entrar en muchos detalles en este momento.

3. Asegúrese de que se muestre el contenido de la imagen que desea mostrar

Si tenemos las dimensiones correctas y un gran rendimiento, eso es increíble, pero si el espectador no ve lo que queremos que vean, no tiene sentido. Si estamos mostrando la imagen completamente todo el tiempo, esto no es un problema, pero si tenemos que recortar la imagen, puede ser un problema.

Podemos recortar background-images usando CSS usando background-sizey background-position(y más clipo menos, pero eso generalmente se usa para formas más artísticas y complejas). Los detalles exactos de esto variarán de una imagen a otra dependiendo de cómo se implemente.

La segunda opción es usar el <picture>elemento. Usamos esto cuando solo queremos que se muestre parte de la imagen, como se ve aquí , pero aquí hay un ejemplo simple de ello en la práctica (extraído del gran artículo de Jason Grigsby sobre este tema).

<picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 32em)" srcset="med.jpg">
    <img src="small.jpg" alt="The president giving an award.">
</picture>

Quiero reiterar, si solo necesita hacer un cambio de resolución , no use el <picture>elemento , solo use el <img>elemento con srcset. El único momento en que necesitamos el <picture>elemento es para esta dirección de arte, es decir, recorte, etc.

También existe la posibilidad de hacer un recorte del lado del servidor, usar una máscara SVG o hacer algunas cosas con Canvas, pero eso está un poco fuera del alcance de esta respuesta.

Algunas otras notas

Los puntos de interrupción específicos no son tan importantes. Al igual que con todos los diseños receptivos, es importante hacer lo mejor que podamos para todas las ventanas gráficas, pero no hay consultas de medios que sean perfectas para todos los sitios.

El tiempo de carga de la página es muy importante , y las imágenes pueden ralentizar mucho el tiempo de carga inicial. Asegúrese de cargar imágenes que se verán inmediatamente primero, luego otras. Intente evitar que las imágenes (como JPEG) muestren parte de la imagen mientras carga el resto. También optimice todas sus imágenes para que tengan el tamaño de archivo más pequeño posible y al mismo tiempo tengan la cantidad de calidad que necesita.

Es importante recordar que las imágenes, en la mayoría de los casos, deberían ser un accesorio, no una necesidad. Recomiendo probar siempre cómo se ve una página web sin imágenes para asegurarse de que se pueda usar.

Nota : Podemos usar un polyfill llamado Picturefill para servir a los navegadores más antiguos que no admiten la especificación de imágenes receptivas.

Pautas para elegir las dimensiones de su imagen de navegador de ancho completo

Lo aprendí a través de la investigación durante el último año y la experimentación en los últimos días para este caso de uso específico.

• Elija una imagen con un solo punto focal, o sin ningún punto focal.

• Su archivo de imagen de origen deberá ser enorme (mínimo 5000 x 5000) si desea servir muchas imágenes dependientes de la resolución.

• Para la versión vertical, debe usar una relación de aspecto de 9w:16h.

• Para la versión horizontal, debe usar una relación de aspecto de 4w:3h.

• Dentro de ambas imágenes, hay un área segura de contenido donde puede garantizar que se verá una parte de la imagen, o que se encuentre en la mitad superior de la página, como se dice en Klingon.

• Las zonas de seguridad de contenido para ambas imágenes, con base en estas cinco relaciones de aspecto: 3:2, 4:3, 5:3, 16:10y 16:9, es más o menos los tres primeros trimestres de ambas imágenes.

  

• srcsetes el Santo Grial de implementar imágenes receptivas. <picture>probablemente será aún mejor en el futuro, pero srcsetes el rey por ahora. Consulte la respuesta de Zach Saucier para obtener más información al respecto.

Aquí hay un ejemplo que he creado después de una extensa experimentación.

Estas imágenes deberían cubrir casi cualquier pantalla. Cambie el tamaño del panel de vista previa para ver las diferentes imágenes. El respaldo debería ser una de las imágenes de rango medio, pero en su lugar hice un enlace a la página donde obtuve la imagen como una especie de atribución menor.

He tratado de mantener esta respuesta breve (reescrita 3 veces), aunque puedo proporcionar las justificaciones para mis afirmaciones, no lo he hecho porque hincharía mucho esta respuesta. Espero que pueda inferir las justificaciones de la imagen de arriba y ver la evidencia de mi ejemplo jsFiddle.

En una 4:3pantalla:

En una pantalla súper ancha:

En un retrato móvil:

Aquí hay información adicional que puede resultarle útil.

Estadísticas de tamaño de pantalla

Los tamaños de pantalla populares varían, así que aquí hay algunos sitios estadísticos que enumeran el uso del tamaño de pantalla por porcentaje, tendencias del navegador, sistemas operativos y más.

1. http://www.w3schools.com/browsers/browsers_display.asp
2. http://www.netmarketshare.com/

Héroe y grandes imágenes

Existe una excelente solución CSS fácil para Hero y otras imágenes de gran tamaño. Es background-size:cover. Es útil porque cubre todo el div sin distorsionar la imagen en diferentes tamaños de pantalla, o si el div padre cambia de forma (más / menos texto ...). Funciona recortando bits de la imagen para mantener las proporciones adecuadas, y también puede colocar el fondo para que siempre se muestren las partes importantes (centro, centro, fondo derecho ...).

Otra ventaja es que muestra la imagen como fondo, por lo que el texto y otra información se pueden agregar fácilmente al div. También funciona como fondo de tamaño completo. Aquí hay un ejemplo de JSFiddle para jugar que usa tamaño de fondo: cubrir como fondo de pantalla completa, y otro que usa un div Hero . Cambie el tamaño de la ventana JSFiddle y edite el posicionamiento CSS para verlo funcionar.

background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;

La compatibilidad del navegador para el tamaño de fondo (CanIUse.com) es muy buena, y aquí hay una solución para IE7 e IE8 .

Una solución popular para todos los diferentes tamaños de pantalla del dispositivo (computadora de escritorio / tableta / computadora de mano) es crear un sitio receptivo que se reposicione para adaptarse a los diferentes tamaños de pantalla, desde TV de pantalla grande a computadora de mano. Si está interesado en esto, aquí hay un buen tutorial de nivel intermedio: http://www.elated.com/articles/responsive-web-design-demystified/ .

Los diseños receptivos funcionan con diseños de cuadrícula, y si el sitio está basado en píxeles, existe una fórmula que convierte los tamaños de píxeles al porcentaje equivalente. Una búsqueda rápida usando los términos "cuadrícula de 12 columnas receptiva" y "calculadora de cuadrícula de columna receptiva" arrojó muchos recursos útiles como estructuras de alambre de 12 columnas receptivas, calculadoras y más. Aquí hay un ejemplo: http://onepcssgrid.mattimling.com/

La versión corta

Intente diseñar para que sea compatible con la resolución de ventana gráfica más pequeña:

Equipos de escritorio: 800x600 / 1024x768 (en píxeles)

teléfonos móviles más antiguos: 320x480 (en píxeles)

tabletas: 800x1280 (en píxeles)

Al elegir la resolución más baja, se asegura de que el diseño funcione para personas con resoluciones más pequeñas, así como resoluciones más grandes.

La versión larga

Me parece que ambos están interesados ​​en las ventanas gráficas para diferentes dispositivos en lugar del tamaño del navegador.

El navegador es la ventana completa que se utiliza para la navegación visual por la web. Esta área incluye la entrada de URL de navegación, pestañas y barras de herramientas.

La ventana gráfica es el área del navegador que muestra un sitio web representado. Esto suele estar debajo de las barras de herramientas y la URL. Esta es el área en la que los diseñadores suelen estar más interesados.

En cuanto a decidir sobre la resolución de su pantalla, primero debe preguntarse esto: ¿en qué se verá principalmente? Si es para uso interno en una empresa, podemos suponer que probablemente se usará en una computadora portátil o de escritorio. Si estaba destinado a ser usado sobre la marcha, podemos suponer que se usará principalmente en dispositivos móviles.

La tendencia actual para el diseño web es "Mobile First". Aquí es donde un sitio web está diseñado para dispositivos móviles antes de responder a otras plataformas. Esto se debe a que cada vez más personas utilizan dispositivos móviles para acceder a Internet en lugar de computadoras de escritorio o portátiles.

Puede encontrar los tamaños de ventana gráfica muy útiles para aprender sobre las dimensiones de la ventana gráfica. Este sitio ofrece la ventana gráfica para muchos dispositivos móviles y algunos escritorios. Debería permitirle explorar la variedad de tamaños de ventana gráfica.