The latest articles on UXPUB 🇺🇦 Дизайн-спільнота by Yarik (@webgate_3634941). https://ux.pub/webgate_3634941 https://ux.pub/images/zR7ULlFwPv5I5zhVjiokiIV-BDYfJHFLYxQ61LUBRaU/rs:fill:90:90/mb:500000/ar:1/aHR0cHM6Ly91eC5w/dWIvdXBsb2Fkcy91/c2VyL3Byb2ZpbGVf/aW1hZ2UvOTIyOS80/ZGJhZDdhZC1jODJl/LTRkY2QtYTVlMS04/ZWY0NzRhYjM2MzEu/anBn https://ux.pub/webgate_3634941 en Yarik Mon, 13 May 2024 11:15:47 +0000 https://ux.pub/webgate_3634941/chomu-figma-shchie-nie-mozhie-optimizuvati-ieksport-dlia-intiernietu-1nkd https://ux.pub/webgate_3634941/chomu-figma-shchie-nie-mozhie-optimizuvati-ieksport-dlia-intiernietu-1nkd <p>Сьогодні я конвертував зображення у форматах <strong>PNG</strong> та <strong>JPG</strong> у "interlaced" (PNG) та "progressive" (JPG). Це робиться для того, щоб забезпечити більш плавний рендеринг на веб-сторінках, де зображення переходять від дуже піксельних до чітких, а не створюють ефект "<strong>повільного друку</strong>", особливо для відвідувачів з низькошвидкісним інтернет з'єднанням.</p> <h2> Порівняння: </h2> <p>Ось приклад того, що я називаю "повільний друк" [1]:<br> </p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <a href="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcmf3nndg05jdk1trnk4.gif" rel="noopener noreferrer"> dev-to-uploads.s3.amazonaws.com </a> </div> <p>А ось більш плавний варіант після конвертації у Photoshop [1]:<br> </p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <a href="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tascz0rbovikcsgfrzoc.gif" rel="noopener noreferrer"> dev-to-uploads.s3.amazonaws.com </a> </div> <h2> Функція "Зберегти для веб" у Photoshop </h2> <p>Тож мені стало цікаво, чому у Figma немає інструменту експорту, подібного до функції "<strong>Save for Web</strong>" у Photoshop, яка доступна щонайменше з 2007 року і доступна за допомогою комбінації клавіш <strong>Alt + Shift + Ctrl + S</strong> (або <strong>Cmd + Option + Shift + S</strong> для Mac).</p> <p><a href="https://ux.pub/images/jIc0V3ctarCqN5HqlS23kjhd2CNWukWhb6ErUgmQjXw/w:800/mb:500000/ar:1/aHR0cHM6Ly9kZXYt/dG8tdXBsb2Fkcy5z/My5hbWF6b25hd3Mu/Y29tL3VwbG9hZHMv/YXJ0aWNsZXMvZW9q/MmxlOHltMXA5NGpk/eXlsNXcucG5n" class="article-body-image-wrapper"><img src="https://ux.pub/images/jIc0V3ctarCqN5HqlS23kjhd2CNWukWhb6ErUgmQjXw/w:800/mb:500000/ar:1/aHR0cHM6Ly9kZXYt/dG8tdXBsb2Fkcy5z/My5hbWF6b25hd3Mu/Y29tL3VwbG9hZHMv/YXJ0aWNsZXMvZW9q/MmxlOHltMXA5NGpk/eXlsNXcucG5n" alt="Photoshop save for web меню" width="800" height="564"></a></p> <p>Спочатку я експортую зображення з Figma, а потім знову відкриваю всі файли у Photoshop, щоб зберегти їх з необхідними налаштуваннями.</p> <h2> Наступний крок </h2> <p>Далі я збираюся створити JS-скрипт, який обробляє три варіанти кожного зображення, пристосовані до різної ширини екрану, а саме: для ширини понад 1400 пікселів, від 700 до 1400 пікселів і нижче 700 пікселів. Залежно від ширини вікна браузера, скрипт динамічно присвоює відповідне зображення атрибуту src (або фоновому зображенню в CSS) в режимі лінивого завантаження (lazyload), щоб покращити взаємодію з користувачем. Однак, я планую написати JavaScript частину пізніше.</p> <p>Які кроки ви робите для оптимізації завантаження зображень та покращення користувацького досвіду?</p> <p>Джерела:<br> [1] - <a href="https://web-gate.org">web-gate.org</a></p> figma ui