QA Responsive Image Polyfill API для різних веб-додатків
Picturefill — це простий у використанні, розумний і чутливий API, який можна використовувати в різних веб-додатках, щоб гарантувати, що користувачі бачать потрібний розмір, роздільну здатність екрана тощо залежно від пристрою.
Як адаптивний API для полізаповнення зображень, Picturefill є відкритим вихідним кодом і безкоштовним для використання та розроблений за допомогою Javascript і HTML. В основному використовується для інтерфейсу програм, він може стати чудовим доповненням до будь-якого проекту, де кінцеві користувачі можуть мати різні пристрої, на яких вони отримують доступ до програми.
Picturefill надає додаткову підтримку та функції для елементів Picture та Img у браузерах. Це один із найпростіших способів гарантувати, що незалежно від того, з якого пристрою користувачі заходять на ваш сайт, зображення автоматично підлаштовуються під розмір і роздільну здатність екрана. Picturefill було протестовано для багатьох браузерів, включаючи Safari, Internet Explorer 9, Google Chrome Mozilla Firefox тощо.
Початок роботи з PictureFill
Рекомендований спосіб встановлення PictureFill через NPM. Щоб установити його, скористайтеся наступною командою.
Встановіть PictureFill через NPM
npm install picturefillДодайте адаптивні зображення за допомогою безкоштовного JavaScript API
Бібліотека PictureFill з відкритим вихідним кодом дозволяє розробникам JavaScript додавати адаптивні зображення на свій сайт, у тому числі гарантуючи, що глядачі з вікнами перегляду з високою щільністю пікселів можуть бачити ресурси високої роздільної здатності та відповідним чином коригувати. Подібним чином ви можете надати браузеру кілька ідентичних зображень, але різного розміру. Picturefill відсортує та надасть найкраще джерело для поточного розміру вікна перегляду вашого користувача, щільності відображення та розміру ресурсу в макеті веб-сайту. Picturefill також дозволяє розробникам вирішувати, які зображення відображаються залежно від вікна перегляду користувача. За допомогою елемента зображення можна вказати різні розміри, рівні масштабування, співвідношення сторін тощо.
Укажіть точку зупинки зображення за допомогою безкоштовного JavaScript API
Ще одна функція Picturefill — це можливість визначати конкретні точки зупинки зображення з різними параметрами роздільної здатності для вихідних зображень на веб-сайті. Picturefill також надає можливість вибирати резервні зображення для форматів зображень, які не підтримуються певними форматами. Таким чином ваш сайт не показуватиме помилки відображення зображень.
Підтримка браузерів
Бібліотека Picturefill з відкритим кодом надає повну підтримку для різних типів браузерів. Бібліотека протестована та безперебійно працює у великій кількості браузерів, таких як Firefox, Google Chrome, Internet Explorer, Safari, Opera та багатьох інших. Коли JavaScript вимкнено, браузер може бачити текст атрибута alt як запасний. Бібліотека включає повну підтримку IE9 і навіть старішої версії. Для IE9 і пізніших версій вам потрібно буде обернути обгортку елемента відео навколо вихідних елементів у вашому тегу зображення. У наступному прикладі показано, як це зробити.
