Оптимізація JPEG для веб - Остаточний посібник

Стиснення зображень можна знайти в кожному форматі носія. Однак різниця між GIF, PNG і JPEG є як інформація стискається і відображається на екрані. Є багато порад для створення чудових зображень, опублікованих в Інтернеті, але багато дизайнерів все ще не розуміють деяких основ.

У цьому посібнику я хотів би поділитися декількома ідеями для правильного стиснення JPEG. Ви хочете оптимізувати свої зображення, щоб зменшити час завантаження веб-сторінок, а також забезпечити гідний рівень якості. Мова йде про пошук балансу між розмірами файлів і зображенням екрана. Для дизайнерів не існує ідеального рішення. Це вимагає деякої початкової практики, але як тільки ви зрозумієте стиснення JPEG, набагато простіше розробляти веб-сайти в майбутньому.

Уникайте завжди збереження на 100%

Ви ніколи не повинні зберігати зображення JPEG зі 100% якістю. Це буде ні виробляти максимально можливе “оптимізовані” зображення. Це фактично обчислює через формулу обмеження оптимізації котрий збільшує ваші розміри файлу exorbitantly. Навіть у порівнянні з 90% або 95% якістю ви побачите значне падіння розміру файлу.

У більшості випадків рекомендується зберігати зображення набагато нижче якості 90%. Якщо ви відкриєте діалогове вікно Зберегти для веб-сторінок у Photoshop, ви помітите, що вони пропонують задані значення, які ви можете вибрати. Я додав можливі значення JPEG нижче - зверніть увагу на притаманні правила назви.

Низький - 10%
Середній - 30%
Високий - 60%
Дуже високо - 80%
Максимум - 100%

Навіть у Adobe Photoshop 60% якості зображення вважається «високим». Багато веб-розробників гарантують від 50% до 70% - це безпечний діапазон, до якого слід дотримуватися.

Наскільки низький рівень надто низький?

Вибрані для оптимізації значення повністю залежать від проекту. Вам доведеться врахувати, які типи графіки будуть виводити найвищі розміри файлів - це ті, які дійсно потребують стиснення.

Я б стверджував, що нижче 30% ви дійсно рубаєте від основної якості зображення. Інші дизайнери будуть присягати 50% як “обмеження” зменшення оптимального значення. Але найкраща порада тут полягає в тому, щоб просто спробувати різні параметри і подивитися, що виглядає краще! Ви не можете помилитися з кількома тестовими дослідженнями, які оптимізують зображення JPEG для Інтернету.

Параметри стиснення

Насамперед слід пояснити два терміни «стиснення» і «якість», які є інверсними. Це означає, що якщо ви збережете JPEG зі стисненням 40%, ви отримаєте 60% якості (порівняно з максимальною якістю 100% без стиснення).

Це найважливіші опції для використання - і вони повинні бути достатніми для збереження в Інтернеті. Загальні користувачі не отримують набагато більш глибоких налаштувань. Підсистема потрапляє в більш складні питання, коли ви перетворюєте RGB-зображення в YCbCr (яскравість, Chroma Blue, Chroma Red).

(Джерело зображення: Кара Монро)

The яскравість або параметр яскравості завжди зберігається на максимально можливому рівні при стисненні JPEG. З цим значенням яскравості на окремому каналі легше оптимізувати індивідуальні значення кольорів червоного і синього. Це також відомо як вибірка кольоровості. Дизайнери, зацікавлені в забрудненні своїх рук, будуть любити читати трохи більше про цей алгоритм стиснення. Ознайомтеся з цим чудовим повідомленням про відбір кольорів, спеціально орієнтованим на зображення JPEG.

(Джерело зображення: Дерек Хатфілд)

Як цікавий бік, Adobe Photoshop не завжди використовує подвыборку для стиснення. Будь-які зображення, збережені за допомогою “Зберегти для Інтернету” у діалоговому вікні буде використано лише підбірку кольоровості нижче значення якості 50%.

Різні веб-медіа

Мережа також переповнена різними видами зображень. Ви можете мати фотографії, значки, кнопки, значки та іншу графіку. Але помітно, що порівняння якості між кнопкою і фотографією просто не має сенсу.

При використанні фотографій або деталізованих зображень розглядайте посилання на окремий файл з меншим стисненням JPEG. Потім ви можете налаштувати мініатюри на вашому сайті з більш високим коефіцієнтом стиснення і набагато меншими розмірами файлів. Єдиним недоліком є те, що вам потрібно надати два набори зображень для медіа-галереї. Зверніть увагу на безліч різних графічних зображень, які ви шили по всьому сайту, і розгляньте методи оптимізації для кожного з них окремо.

Планування графічної моделі

Ви хочете мати організовану файлову систему, яку досить легко порибати. Деякі веб-майстри виберуть розміщення своїх фотографій в іншому місці в Інтернеті - наприклад, Flickr або Picasa. Тим не менш, ви все одно захочете скористатися інструментом стиснення, щоб зменшити розміри зображень, але спосіб відображення їх на вашому сайті буде різним. Особливо це стосується популярного зростання мобільних пристроїв з доступом до Інтернету.

Я знайшов цікаву статтю, в якій обговорювалося кодування JavaScript JPEG, яке відбувалося б у коді вашого інтерфейсу. Існує не так багато переваг для високоякісних галерей зображень, але це може позбутися часу завантаження для ваших мобільних відвідувачів. Це також буде корисним методом при гарячих зв'язках зображень або при динамічному кадруванні ескізів.

Інший фантастичний інструмент для перевірки Yahoo! Smush.it. Це веб-додаток на основі веб-переглядача, на якому можна завантажувати зображення, а програма Smush.it видалить усі непотрібні додаткові байти для оптимізації розміру файлу. Це 100% втрат, що означає, що якість зображення взагалі не погіршиться. А ще краще ви можете завантажувати зображення з прямих URL-адрес, якщо вони розміщені на вашому веб-сайті або сервері третьої сторони.

Додаткові інструменти

Існує велика кількість програмного забезпечення, яке можна спробувати у відношенні маніпулювання зображеннями. Будь-які додаткові байти, які можна поголити за розмірами кожного файлу, мають вирішальне значення. Існує не багато програмного забезпечення там, але варіанти, які доступні дивно.

IrfanView

Це безкоштовне програмне забезпечення для Windows дозволяє переглядати та оптимізувати будь-який набір великих зображень. Мені особливо подобається це програмне забезпечення, оскільки воно підтримує пакетне перетворення зображень в декількох каталогах. Ви можете застосовувати ті ж самі функції для сотень зображень JPEG автоматично.

Ще краще підтримка плагінів від розробників третьої сторони. Одним з таких прикладів є RIOT (інструмент радикальної оптимізації зображення). Цей плагін працює для інших схожих графічних редакторів з відкритим кодом, таких як GIMP. Він пропонує перегляд подвійного зображення, де можна вручну налаштувати параметри стиснення для кожного з ваших зображень.

Підтримка програмного забезпечення є чудовою, а функції RIOT дуже прості у використанні. Поряд зі стисненням зображень ви також маєте доступ до видалення додаткових метаданих, таких як EXIF і Adobe XMP. Ці додаткові біти даних можуть додаватися лише до вашої загальної кількості файлів, і вони рідко потрібні.

ImageOptim для Mac

Якщо ви працюєте під керуванням OS X і вам потрібна потужна програма для стиснення, не дивіться далі. ImageOptim є потужним інструментом для стиснення зображень для Інтернету - часом навіть краще, ніж Photoshop.

Вся програма підтримує функцію перетягування, що дозволяє легко оптимізувати великі набори зображень. Подібним чином можна виконувати команди прямо з терміналу та налаштовувати сценарії оболонки. Перегляньте кодову сторінку Google для отримання додаткової інформації та технічної підтримки.

Були деякі незначні проблеми з останньою версією 1.3.3 у візуалізації зображень у форматі pixelated JPEG у Opera. Спробуйте перевірити всі оптимізовані зображення в чотирьох основних браузерах - Chrome, Safari, Firefox і Opera (і, можливо, IE). Якщо щось виглядає перекошеним, ви можете спробувати завантажити ImageOptim 1.3.0, який перетворює трохи чистіше.

Корисні ресурси

JPEG 101: Посібник з прискореного курсу на JPEG
Правильні налаштування стиснення для збереження зображень JPG для WordPress
Розумні методи оптимізації JPEG
Як оптимізувати зображення JPEG для веб-сайтів
Все, що потрібно знати про стиснення зображень

Висновок

Стиснення JPEG є складним завданням, оскільки вам потрібно знайти відповідний баланс між якістю та речовиною. Навіть у міру зростання наших сучасних швидкостей підключення до Інтернету все ще існує потреба у зменшенні розміру веб-сторінок. Нові фреймворки, такі як jQuery і Typekit, можуть обробляти сотні додаткових кілобайт, навіть на добре оптимізованому дизайні.

Я все ще повинен рекомендувати Adobe Photoshop як моє програмне забезпечення для редагування зображень. Є й інші приклади, які краще для процесу оптимізації JPEG. Але веб-дизайнери можуть пережити навіть менш відомі рішення з відкритим кодом. Якщо у вас є подібні трюки або ідеї щодо стиснення JPEG, будь ласка, поділіться з нами в області після обговорення нижче.