Нотатки від команди про майстерність, формати та невеликі рішення, що стоять за гарною круглою обрізкою.
Lanczos повторна вибірка і чому це важливо
Lanczos повторна вибірка є стандартом галузі для зменшення фотографій, використовується Adobe Photoshop, ImageMagick, FFmpeg та GIMP. Він працює шляхом згортання кожного вихідного пікселя з функцією Lanczos (sinc з вікном), застосованою до вікна сусідніх вхідних пікселів. Результат, математично оптимальний компроміс між різкістю та артефактами накладання порівняно з простішими альтернативами, такими як nearest-neighbor або bilinear. Цей інструмент використовує Lanczos з радіусом 3, відповідаючи стандартному значенню ImageMagick для зменшення фотографій. Адаптивне підвищення різкості застосовується після повторної вибірки для компенсації природного пом'якшення, властивого будь-якій операції зменшення розміру. Результат виглядає чітким при масштабі 100%, відповідаючи стандартам веб-публікації. Реалізація використовує бібліотеку pica, яка з 2014 року є еталонною реалізацією для Lanczos у JavaScript і використовується тисячами веб-додатків.
Алгоритми збереження співвідношення сторін
Блокування співвідношення сторін запобігає спотворенню зображення. Коли увімкнено, зміна одного розміру автоматично оновлює інший для збереження оригінального співвідношення ширини до висоти. Це основа більшості редагувань фотографій, тому що людське око чутливе до навіть незначних спотворень обличчя, будівель та інших впізнаваних форм. Розблокування співвідношення сторін дозволяє встановити обидва розміри вільно, що корисно для рекламних банерів та інших випадків використання, де композиція вимагає конкретного співвідношення, незалежного від оригіналу. Перемикач "Не збільшувати, якщо менше" додає рівень безпеки: коли увімкнено, інструмент відмовляється збільшувати зображення поза його оригінальні розміри, обмежуючи вихід нативним розміром джерела. Це запобігає випадковій втраті якості від безглуздого збільшення, коли зображення змішаних розмірів обробляються пакетом.
Вибір формату: PNG проти JPG проти WebP проти AVIF
PNG зберігає кожен піксель точно як закодовано, використовуючи стиснення DEFLATE без втрат. Ідеально для скріншотів, графіки з великими областями однорідного кольору, логотипів та будь-яких зображень з прозорістю. JPG використовує стиснення з втратами з налаштовуваними параметрами якості (1-100). Файли зазвичай в 5-10 разів менші за PNG для фотографій, з втратою якості, невидимою неозброєним оком при 80-90. WebP, розроблений Google у 2010 році, надає стиснення класу JPG з кращим збереженням деталей, підтримує прозорість і нативно підтримується всіма основними браузерами з 2020 року. AVIF, заснований на відеокодеку AV1, виробляє файли на 30-50% менші за JPG при тій же візуальній якості. Компроміс, довший час кодування, особливо на Firefox та старіших мобільних пристроях.
Підводні камені збільшення і коли використовувати AI
Збільшення розмірів зображення вимагає винайти пікселі, яких не було в оригіналі. Lanczos повторна вибірка робить це шляхом інтерполяції з сусідніх пікселів джерела, виробляючи плавні, але м'які результати. Збільшення 2× зазвичай прийнятні для фотографій. Збільшення 4× показують помітне пом'якшення. Збільшення понад 4× показують артефакти розмиття, де текстури, краї та деталі виглядають нечіткими. Для збільшення на основі AI, яке використовує навчені моделі машинного навчання для реконструкції правдоподібних деталей з контексту, використовуйте спеціальний інструмент Upscale 2x. Моделі AI працюють добре на фотографіях, але все одно не можуть відновити деталі, які ніколи не були захоплені в джерелі, особливо текст та тонкі візерунки.
Продуктивність: де цей інструмент виграє, де програє
Інструмент розроблений для окремих зображень до приблизно 25 мегапікселів. Понад цього розміру межі пам'яті браузера на мобільних пристроях можуть викликати збої. На сучасному настільному комп'ютері (Apple M1, 16 GB RAM, Chrome) зміна розміру джерела 8 MP до 2 MP та кодування у WebP займає приблизно 1.25 секунди. Кодування AVIF того ж зображення займає приблизно 4.5 секунди через більш обчислювально дорогий кодер AV1. На середньому Android-телефоні (Pixel 5) ту ж операцію займає приблизно 4 секунди для WebP, 12 секунд для AVIF. Інструмент не підтримує пакетну обробку, один файл за раз. Для пакетної обробки розгляньте настільні інструменти, такі як ImageOptim або Squoosh CLI, які можуть використовувати всі ядра CPU.
Приватність: чому відсутність завантаження важлива
Більшість онлайн-інструментів зміни розміру зображень надсилають файл на сервер для обробки. Це створює слід: тимчасова копія існує в інфраструктурі тієї компанії, підпорядковуючись їхнім практикам ведення журналів, політикам зберігання та юридичним вимогам їхньої юрисдикції. Цей інструмент обробляє все локально в браузері, використовуючи File API, Canvas API та шлях кодування @jsquash/avif (ліцензований Apache-2.0). Ваш файл не залишає пристрій. Відкрийте DevTools, перейдіть на вкладку Network, завантажте та пройдіть процес. Ви не побачите жодних вихідних запитів, що несуть зображення. Єдині запити, це початкове завантаження сторінки та статичні активи, всі задокументовані та перераховані в заголовку політики безпеки контенту цього сайту.
