QA Responsive Image Polyfill API para diferentes aplicaciones web
Picturefill es una API fácil de usar, inteligente y receptiva que se puede usar en diferentes aplicaciones web para asegurarse de que los usuarios vean el tamaño correcto, la resolución de pantalla y más según el dispositivo.
Como una API de polyfill de imagen receptiva, Picturefill es de código abierto y de uso gratuito y se ha desarrollado utilizando Javascript y HTML. Utilizado principalmente para el front-end de las aplicaciones, puede ser una gran adición a cualquier proyecto en el que los usuarios finales puedan tener diferentes dispositivos en los que acceden a la aplicación.
Picturefill proporciona soporte y funciones adicionales para los elementos Picture e Img en los navegadores. Es una de las formas más fáciles de garantizar que, independientemente del dispositivo desde el que los usuarios accedan a su sitio web, las imágenes se ajusten automáticamente al tamaño y la resolución de su pantalla. Picturefill ha sido probado para muchos navegadores, incluidos Safari, Internet Explorer 9, Google Chrome, Mozilla Firefox y más.
Primeros pasos con PictureFill
La forma recomendada de instalar PictureFill a través de NPM. Utilice el siguiente comando para instalarlo.
Instalar PictureFill a través de NPM
npm install picturefillAgregue imágenes receptivas a través de la API de JavaScript gratuita
La biblioteca PictureFill de código abierto permite a los desarrolladores de JavaScript agregar imágenes receptivas a su sitio, lo que incluye asegurarse de que los espectadores con ventanas gráficas de alta densidad de píxeles puedan ver activos de alta resolución y se ajuste en consecuencia. Del mismo modo, puede proporcionar al navegador una serie de imágenes que son idénticas pero con diferentes tamaños. Picturefill clasificará y proporcionará la mejor fuente para el tamaño de la ventana gráfica actual de su usuario, la densidad de visualización y el tamaño del activo en el diseño del sitio web. Picturefill también permite a los desarrolladores decidir qué imágenes se muestran según la ventana de visualización del usuario. Con la ayuda del elemento de imagen, puede especificar varios tamaños, niveles de zoom, relaciones de aspecto, etc.
Especifique el punto de interrupción de la imagen a través de la API de JavaScript gratuita
Otra característica de Picturefill es la capacidad de definir puntos de corte de imagen específicos con diferentes opciones de resolución para las imágenes de origen en el sitio web. Picturefill también brinda la opción de decidir imágenes alternativas para formatos de imagen que no son compatibles con ciertos formatos. De esta manera, su sitio web no mostrará errores de visualización de imágenes.
Soporte para navegador
La biblioteca de Picturefill ha proporcionado soporte completo para varios tipos de navegadores. La biblioteca es probada y funciona sin problemas en un gran número de navegadores, como Firefox, Google Chrome, Internet Explorer, Safari, Opera, y muchos más. Cuando JavaScript está desactivado, el navegador puede ver el texto de atributo alt como un fullback. La biblioteca ha incluido soporte completo para In9 e incluso la versión anterior. Para In9 más tarde, usted necesitará envolver un envoltorio de elementos de vídeo alrededor de los elementos fuente en su etiqueta de imagen. El siguiente ejemplo muestra cómo hacerlo.
