Como entregar pequeñas imágenes en pequeños dispositivos
El concepto es simple: Adaptive Images detecta el tamaño de pantalla del visitante y en forma automática crea, cachea y entrega una apropiada versión redimensionada de las imágenes incrustadas en el mark-up HTML.
Si esta es una buena noticia, la mejor es que la implementación de esta idea no require cambio alguno en el mark-up.
Hemos asistido a un rápido crecimiento en el uso de ancho de banda de escritorio; no obstante las visitas a los sitios Web desde dispositivos de manos como smartphones y tablets se ha visto incrementado de manera brusca y repentina. Estos dispositivos tienen pantallas pequeñas, muchos de ellos son lentos y trabajan con un ancho de banda muy bajo.
El impacto de carga de las imágenes, en especial atención es alto. Y la experiencia de usuario que genera la carga lenta de una imagen puede resultar en una tasa de rebote más alta que la deseada. Adaptive Images se encarga de solucionar esto.
[responsive]
[/responsive]
Ventajas de uso
- Trabaja en forma eficaz sobre el sitio Web existente
- No requiere cambios en la estructura HTML ni en el mark-up
- Trabaja sobre la filosofía el dispositivo móvil primero
- Sencilla y poderosas customizaciones
- La implementación demora sólo minutos
Implementación
- Agregar y/o modificar el archivo .htaccess y subir el archivo adaptive-images.php a la carpeta raiz del sitio Web
- Agregar sólo una línea de Javascript dentro del
<head>de la página - Agregar los valores CSS de Media Query dentro del bloque $resolutions del archivo PHO
Sitio Web & Demo | Adaptive Images
Requerimientos para el uso de Adaptive Images
- Apache 2
- PHP 5.x
- Librería GD *
* Normalmente incluída en PHP
