Prácticas de CSS para crear una Imagen Receptiva

por Glajumedia | 16, diciembre 2020


¿Alguna vez te has preguntado sobre los sitios web para móviles? Si tomaste la ruta del diseño receptivo, entonces debes establecer una estrategia para hacer una imagen receptiva. Las reglas básicas son simples después de que tu maestro comience a escalar las imágenes. 

También puede ser que se enfrente a la actuación y la dirección de arte para resolver algunos problemas. Hay muchas prácticas para crear una imagen receptiva y cada una de ellas con sus debilidades y fortalezas. Este artículo te ayudará a luchar contra dos enormes enemigos: la imagen receptiva y los plazos de tiempos.

problemas con imagen receptiva

PICTUREFILL

El Internet tiene alcance mundial, pero olvidamos que no todos tienen la misma calidad de acceso a las conexiones de fibra óptica y a las redes 4G. Scott Jehl se ha dado cuenta de esta brecha digital sobre la idea de sitios móviles y de respuesta. Jehl tiene un script de picturefill  , donde propone el elemento <picture>. Este código de JavaScript simula el API de la imagen. 

Picturefill no necesita jQuery, pero requiere el script picturefill.js, y otro requisito es un markup especial con divs para representar la variación de la imagen, diferenciado por atributos de datos-medios de comunicación que actúan como consultas de medios en CSS. 

Dado que Picturefill requiere mucho markup personalizado, no es la mejor opción si no se puede modificar el código fuente de tu sitio web.

MODO NETFLIX

Es un pequeño truco que funciona en todas partes, donde necesitas envolver tu imagen con un padre relativamente rellenado. Aquí mantendrás la ratio de una imagen receptiva con un porcentaje en la propiedad de relleno.

El código se ve así:

Netflix codigo de imagen receptiva

IMAGEN ADAPTATIVA

Imágenes adaptables, creadas por Matt Wilcox, es una solución del lado del servidor que requiere un poco de JavaScript. Sin embargo, el trabajo duro es manejado a través del servidor web Apache 2, PHP 5.x, y la biblioteca GD. 

Para agregarlo a tu servidor Web, debes usar el archivo .htaccess, luego sube algunos archivos PHP al directorio raíz de tu sitio web. Tienes que añadir algo de Javascript a tus páginas y modificar algunas variables de punto de ruptura en los archivos PHP. De esta manera, coincidirá con las consultas de medios de tu sitio web. 

La ventaja de usar la Imagen Adaptable es que no requiere un marcado personalizado en sus imágenes. Cuando todo esté terminado, el script PHP interpretará cualquier solicitud de una imagen y la adaptará al tamaño de su punto de ruptura específico y la entregará en sus páginas automáticamente.

prácticas para una imagen receptiva

CAPTURANDO/MOBIFY.JS 2.0

Es una nueva característica del desarrollo Mobify.js 2.0 que permite el acceso al HTML. En esta etapa, podrás intercambiar el atributo src de una imagen antes de que el navegador la descargue. La captura es una técnica que evita directamente la precarga nativa del navegador, lo cual puede causar un problema de rendimiento si se usa mal.

Las formas de arriba pueden no ser las únicas, pero no se consideran lo suficiente en su sitio de negocios. De hecho, puede ayudarte con las prácticas de CSS para crear imágenes que respondan a las necesidades de tu sitio empresarial. Sobre todo, los desarrolladores de Glajumedia pueden darle esa tranquilidad al expandir su sitio web.

imagenes receptivas en diferentes dispositivos


Contenidos Relacionados

compartir en Facebook compartir en Facebook compartir en Facebook
Glajumedia

En Glajumedia creamos proyectos con Tecnología. Desarrollo de Aplicaciones Web y Moviles / Diseño web / Ecommerce / Soluciones en la nube AWS. Perú.

Ofrecemos soluciones

DIGITALES | SOFTWARE | CLOUD | TECNOLOGÍA