Imágenes adaptables: solución del problema de la imagen receptiva

El diseño receptivo no es solo un cambio en el diseño o el uso de consultas de medios aquí y allá, es un estado mental y una acción que tiene un significado claro.

El diseño receptivo esencialmente dice que nos preocupamos más por el contenido que en el pasado. De hecho, nos preocupamos tanto que incluso optimizaremos el contenido para que se lea y visualice en dispositivos que aún no se han lanzado.

En esencia, estamos tratando de presentar la información de la manera más clara posible y ser lo más eficientes posibles al mismo tiempo. He aquí un error común; móvil primero significa diseñar como si todo su sitio girara en torno al teléfono móvil. Eso no es del todo exacto. Móvil primero simplemente significa diseñar primero para la experiencia más simple, lo que a menudo nos lleva a eliminar los gastos generales que estamos experimentando o que podemos experimentar en el futuro.

En el mundo del diseño; Decisiones rápidas; sensibilidad; y contenido creativo, debemos estar atentos ante todo. Y estar atento se reduce a saber cuándo tenemos un problema en nuestros diseños receptivos y cómo solucionarlo. Hoy estamos haciendo precisamente eso.

Las imágenes receptivas han sido un tema difícil durante años, ya que por lo general ha habido más de una forma de ‘piratear’ para hacer que sus imágenes respondan. Repasemos este tema desde cero, comenzando por cómo solíamos hacerlo.

El pasado

El sitio web de Boston Globe es un ejemplo clásico de diseño líquido.

Antes de continuar, debemos repasar cómo se comporta una página web para que podamos hablar sobre cómo funciona. Un resumen rápido: el HTML se carga secuencialmente, luego los recursos se solicitan inmediatamente a medida que se encuentran, los scripts se ejecutan inmediatamente y luego todas las cookies se envían con solicitudes HTTP.

El proceso de solicitud / extracción / recuperación / etc. ha puesto un poco de limitación en cuán creativos podemos ser con estas metodologías. Sin embargo, eso ciertamente no ha detenido a la gente en el pasado. Aquí hay algunas formas en que han solucionado esto.

Reemplazo del atributo «src»

Podemos usar javascript para reescribir el atributo «src», de modo que extraiga y reemplace una imagen según el tamaño del navegador, lo que parece funcionar bien. Esto ha sido lo que mucha gente ha usado en el pasado. El problema con esto es que utiliza una solicitud HTTP doble. Primero extrae la imagen original y luego la reemplaza con la imagen javascript. Básicamente, está haciendo más de lo que hubiera hecho si no hubiera hecho nada, aunque parece que funciona.

¿Existen soluciones alternativas para esto? ¡De hecho, las hay!

Hay un método que usa mucha gente en el que colocamos una imagen gif de 1px en el sitio en lugar de la imagen real, de modo que en lugar de obtener dos imágenes por el precio de dos, básicamente obtienes dos por el precio de uno, pero eso no es tampoco es ideal. En este caso, todavía está realizando dos solicitudes HTTP.

Esto también significa que está confiando en javascript para todas las imágenes. Eso es complicado, porque los operadores de telefonía móvil pueden meterse con javascript, cualquier cantidad de otras cosas pueden romper javascript y una cantidad sorprendente de usuarios de sitios web lo deshabilitan deliberadamente.

Noscript

Otro método que ha ganado cierta popularidad es usar la etiqueta «noscript» para imágenes móviles y luego usar javascript para cambiarlo por una imagen de mayor resolución. Esto pareció tomar a la comunidad por asalto hace un tiempo debido a la capacidad de cambiar de versiones móviles a versiones de alta resolución, y eso realmente coincidió con la amplia interpretación errónea de ‘móvil primero’ que mencioné anteriormente. Esto no funciona en IE. Para una solución alternativa de Internet Explorer, deberá escribir lo siguiente:

<script><!--mce:0--></script>
<img src=""mobile.jpg"" alt="" /> <!----->

Pero el problema con eso es que ahora no funciona en el popular navegador web Firefox. Entonces, lo que tenemos que hacer es:

<script><!--mce:1--></script>
    <noscript>
    <img src=""mobile.jpg"" alt="" />
    </noscript>

Como puede ver, eso no es muy simple y ciertamente no es muy robusto. Realmente no hay una manera de hacerlo limpiamente o simplemente en absoluto. De hecho, muchas de las personas que trabajan con imágenes receptivas han estado tratando de resolver estos problemas durante años y, en realidad, no han llegado demasiado lejos.

Por lo general, lo que han hecho es utilizar algún tipo de javascript para solucionar el problema y aceptar la solicitud doble http como un mal necesario.

¿Solución del lado del servidor?

La solución típica del lado del servidor para esto es usar javascript para reemplazar el «src» con el HTML5 «-data-highsrc», y almacenar el tamaño del navegador en una cookie. Sin embargo, luego envía las mismas solicitudes HTTP múltiples que antes.

La razón por la que a las personas les gustó este método fue que sentían que era más seguro dado que estaban almacenando el tamaño del navegador en una cookie, y sentían que había menos margen de error. Sin embargo, en realidad, eso no es exacto. Aquí hay algunas razones por las que este método no es tan bueno como los otros métodos enumerados hasta ahora. Solo permite la obtención de imágenes grandes y pequeñas, no se ocupa de los cambios de orientación del dispositivo y se rompe mucho porque ahora los navegadores precargan las imágenes. También un gran inconveniente es que a veces las cookies no se configuran lo suficientemente rápido, lo que hace que el escritorio obtenga imágenes destinadas a móviles.

Debido a todo esto, es decir, una falla en las opciones adecuadas en el lado del servidor y del cliente, necesitamos una nueva solución.

Y aquí es donde el imágenes adaptativas el método entra en acción.

El método de imágenes adaptativas

Las imágenes adaptativas son la verdadera solución a todo este enigma. Es literalmente tan fácil como arrastrar y soltar en su servidor y ya está. Este método adaptativo usa un archivo htaccess, un archivo php y una sola línea de javascript, y Eso es.

Simplemente arrastre el archivo htaccess y php a su directorio raíz y agregue el javascript al encabezado de su archivo de índice y estará completo. Nada más de qué preocuparse. Ahora, ofrece un montón de personalización, pero llegaremos a eso cerca del final.

Por ahora, vayamos directamente al comienzo del método adaptativo.

Los objetivos

Primero identifiquemos los objetivos del proyecto. El creador de imágenes adaptativas, Matthew Wilcox, ha identificado estos como sus objetivos para esta solución:

• Tiene que ser fácil de configurar y usar.
• Debe tener el menor mantenimiento posible.
• Tiene que funcionar con contenido existente, no se necesitan ediciones de marcado ni CMS personalizado.
• Debe permitir múltiples versiones.
• Debe trabajar con puntos de interrupción de diseño y no con puntos de interrupción del dispositivo.
• Debe reemplazarse fácilmente cuando llegue una solución superior.

Y todos estos objetivos de este proyecto se basan en el supuesto de que

<img src=""https://www.webdesignerdepot.com/2012/07/adaptive-images-solving-the-responsive-image-problem/#"" alt="" />

Las etiquetas de su sitio ya utilizan la imagen de mayor resolución, lo que, en mi opinión, es una suposición razonable. Normalmente ya tendremos las mejores imágenes en nuestro sitio, ya que conozco a muy pocos diseñadores web que pongan sus mejores imágenes en versiones para teléfonos y las peores en la web. Eso también se explica por sí mismo.

Cómo funciona

Estamos a punto de sumergirnos en el código, pero antes de hacerlo, hablemos de cómo funciona en un nivel superior. En pocas palabras, JavaScript detecta las dimensiones de pantalla más grandes disponibles en ese dispositivo y las almacena en una cookie. El archivo .htaccess luego apunta ciertas solicitudes a adaptive-images.php, y luego, basándose en esas reglas, el archivo PHP realiza algún procesamiento. Dentro de ese procesamiento es donde ocurre la verdadera magia y, por supuesto, recomendaría a todos los que lean esto que consulten el archivo PHP. Es el PHP más bellamente escrito que he visto en años. Definitivamente es una visita obligada.

Ahora pasemos a analizar los detalles de cómo funcionan estos archivos y cómo interactúan entre sí. Aquí discutiremos todo lo que obtiene cuando descarga el paquete del sitio de imágenes adaptables.

El código javascript

El código javascript que necesitará copiar es este:

<script>document.cookie="resolution=
"+Math.max(screen.width,screen.height)+'; path=/';</script>

Y es tiene que ir antes que cualquier otro javascript en su sección principal. También vale la pena señalar que si desea aprovechar la pantalla retina en cualquiera de los productos más recientes de Apple, puede usar la siguiente línea de javascript:

<script>document.cookie="resolution=
"+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>

Como puede ver, esa última línea es muy similar y la única diferencia es que enviará imágenes de mayor resolución a los dispositivos que lo permitan, tenga en cuenta que significará descargas más lentas para los usuarios de Retina, pero mejores imágenes, por supuesto.

Tenga en cuenta que este todavía debe ser el primer javascript en su sección principal.

El archivo .htaccess

Un archivo .htaccess es simplemente una utilidad de administración de directorios glorificada, y si ya tiene un sitio web en el que está considerando usar imágenes adaptativas, es muy probable que ya tenga un archivo .htaccess, por lo que lo que tendremos que hacer es agregar algunos contenidos . Simplemente ábralo (siempre se encuentra en el directorio raíz de su sitio) y agregue esto:

<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On

  # Adaptive-Images ----------------------------------------

  # Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
  # RewriteCond %{REQUEST_URI} !some-directory
  # RewriteCond %{REQUEST_URI} !another-directory

  RewriteCond %{REQUEST_URI} !assets

  # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
  # to adaptive-images.php so we can select appropriately sized versions
  RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php

  # END Adaptive-Images ----------------------------------------
</IfModule>

Ahora, la parte interesante de esto es que realmente no es necesario realizar ningún cambio.

Por lo general, los sitios querrán que todas sus imágenes respondan y funcionen bien con todos los factores de forma, por lo que realmente no es necesario excluir nada. Si lo desea o lo necesita, existe la opción, pero recuerde que desea ser receptivo y progresivo. El archivo .htaccess aquí es perfecto para este proyecto y sirve como clave en todo este proceso, por lo que sin él realmente no puede usar este método. Como resultado, debe asegurarse de no olvidar esto, o agregarlo si no tiene uno.

El archivo PHP

Todo lo que tienes que hacer con este es arrastrarlo y soltarlo en tu directorio raíz, y se encargará de todo lo demás. Hay una pequeña sección personalizable como puede ver aquí:

/* CONFIG ------------------------------ */

$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)
$cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!
$jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100
$sharpen  = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
$watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)
$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)

/* END CONFIG ------ Don't edit anything after this line unless you know what you're doing -------------- */

Como dice sobre el resto del guión, si no sabes lo que estás haciendo, ¿por qué no dejarlo en paz? En caso de que te guste jugar, arrojemos algo de luz aquí.

$ resoluciones son los anchos de pantalla con los que trabajaremos. De forma predeterminada, almacenará una imagen redimensionada para pantallas grandes, pantallas normales, tabletas, teléfonos y teléfonos pequeños.

$ cache_path si no le gusta que las imágenes almacenadas en caché se escriban en esa carpeta, puede ponerlas en otro lugar. Simplemente coloque la ruta a la carpeta aquí y asegúrese de crearla en el servidor.

$ afilar realizará una nitidez sutil en las imágenes reescaladas. Por lo general, esto está bien, pero es posible que desee apagarlo si su servidor está muy, muy ocupado.

$ watch_cache si su servidor está muy ocupado, puede ayudar al rendimiento cambiar esto a FALSO. Sin embargo, significará que tendrá que borrar manualmente el directorio de caché si cambia un recurso.

Ahora que sabe todo sobre la personalización, puede que sienta curiosidad, ¿qué hace exactamente el archivo PHP? Bueno, veámoslo paso a paso:

• Lee la cookie y ajusta el resultado en puntos de interrupción que coinciden con los puntos de interrupción de CSS.
• Comprueba su propio directorio de caché para ver si existe una versión del archivo solicitado en ese tamaño de punto de interrupción.
• Si es así, compara las fechas y el origen para asegurarse de que la versión de caché no esté obsoleta.
• Si no existe en caché; luego crea una imagen reescalada solo si la imagen de origen es mayor que el tamaño del punto de interrupción. Luego lo almacena en caché para uso futuro.

El archivo ai-cookie.php

También obtiene este archivo ‘ai-cookie.php’ en su carpeta cuando descarga el paquete de imágenes adaptables, pero en realidad se puede eliminar, ya que tiene que ver con un método alternativo para detectar el tamaño de la pantalla de los usuarios. El creador de imágenes adaptativas recomienda que elimine esto y siga el método estándar.

Y eso es todo por el contenido de ese paquete. Ahora, asegúrese de echar un vistazo a todos los archivos que está ingresando a su sitio y verifique que está utilizando las mejores prácticas con las consultas de medios. Además, asegúrese de hacer preguntas si tiene alguna sobre este contenido o consultas de medios en general, ya que me encanta hablar sobre ese tipo de cosas. Ahora resumamos lo que tenemos aquí.

En resumen:

Sin duda, es un sistema fascinante, y preveo que se utilizará en los próximos años. En primer lugar, ¿qué puedo personalizar exactamente con este sistema en su conjunto?

Con este sistema puedes:

• Establezca puntos de interrupción para que coincidan con su CSS.
• Especifique dónde desea la carpeta de caché.
• Establezca la calidad de los JPG generados.
• Establezca durante cuánto tiempo los navegadores deben almacenar en caché la imagen.
• Mejora sutilmente las imágenes generadas.
• Javascript alternativo para detectar dispositivos con alto DPI.

En el futuro, también me encantaría detectar el ancho de banda en un sistema, en lugar del tamaño del dispositivo o el ancho del navegador. Porque esa es la clave real para decidir qué imagen enviar y dónde, pero a partir de ahora no hay una forma viable de hacerlo.

Visita adaptive-images.com para descargar los archivos a los que me he referido en este artículo.