Сьогодні я конвертував зображення у форматах PNG та JPG у "interlaced" (PNG) та "progressive" (JPG). Це робиться для того, щоб забезпечити більш плавний рендеринг на веб-сторінках, де зображення переходять від дуже піксельних до чітких, а не створюють ефект "повільного друку", особливо для відвідувачів з низькошвидкісним інтернет з'єднанням.
Порівняння:
Ось приклад того, що я називаю "повільний друк" [1]:
А ось більш плавний варіант після конвертації у Photoshop [1]:
Функція "Зберегти для веб" у Photoshop
Тож мені стало цікаво, чому у Figma немає інструменту експорту, подібного до функції "Save for Web" у Photoshop, яка доступна щонайменше з 2007 року і доступна за допомогою комбінації клавіш Alt + Shift + Ctrl + S (або Cmd + Option + Shift + S для Mac).
Спочатку я експортую зображення з Figma, а потім знову відкриваю всі файли у Photoshop, щоб зберегти їх з необхідними налаштуваннями.
Наступний крок
Далі я збираюся створити JS-скрипт, який обробляє три варіанти кожного зображення, пристосовані до різної ширини екрану, а саме: для ширини понад 1400 пікселів, від 700 до 1400 пікселів і нижче 700 пікселів. Залежно від ширини вікна браузера, скрипт динамічно присвоює відповідне зображення атрибуту src (або фоновому зображенню в CSS) в режимі лінивого завантаження (lazyload), щоб покращити взаємодію з користувачем. Однак, я планую написати JavaScript частину пізніше.
Які кроки ви робите для оптимізації завантаження зображень та покращення користувацького досвіду?
Джерела:
[1] - web-gate.org
Топ коментарі (5)
Для мака є ImageOptim, після фігми через нього проганяємо
Це доречі тулза на основі відкритого коду і є багато проектів на інших платформах imageoptim.com/versions.html
Є також веб сервіс TinyPNG, через який можна без втрати якості пережимати зображення
чомусь не грузить gif зображення
Є така біда)