оптимізація
Зображення, що використовуються на веб-сторінці, зазвичай створюються графічним дизайнером або веб-дизайнером, для яких якість є головною проблемою (оскільки це стандарт, за яким вони, як правило, оцінюються). Тому не дивно, що оптимізація зображення часто ігнорується. Ми можемо зменшити вагу зображення на 10 КБ або 20 КБ без видимих ​​втрат якості. Розмір зображень є фактором, який безпосередньо впливає на швидкість завантаження веб-сторінки, або те саме, це фактор позиціонування.
Якщо графічні дизайнери можуть винуватити бачення тунелю в цьому відношенні, ви повинні бути обережними, щоб не потрапити в ту ж пастку. Хоча розмір є нашою головною проблемою, і втрата якості, ймовірно, є прийнятною, ми повинні протистояти спокусі надмірно оптимізувати.

РОЗУМІНЕННЯ РІЗНИХ
ФОРМАТИ ЗОБРАЖЕННЯ
Тривалий час в Інтернеті в основному використовувались два формати зображень: JPEG та GIF.
JPEG (що є абревіатурою від Спільна група експертів з фотографії) використовується для фотознімків та GIF (скорочення від Формат графічного обміну) використовується для комп'ютерних зображень, таких як піктограми.
У середині 1990-х років метод компресії з'явився на світ Лемпель-Зів Велч (LZW) використовується GIF і запатентована. У 1996 році була опублікована перша специфікація нового формату: PNG (скорочення від Портативна мережева графіка). Пізніше того ж року це стало рекомендацією від Консорціум Всесвітньої павутини (W3C), за підтримки основних браузерів до кінця цього десятиліття. Хоча термін дії патенту LZW закінчився в 2003 році, PNG виявився вищим форматом, і GIF так і не був повністю відновлений.
Хоча функції JPEG та GIF чітко визначені, мета PNG неточна. Формат PNG можна використовувати як замінник JPEG та GIF.

Ми збираємось переглянути ці три формати.

JPEG
JPEG - це метод стиснення з втратами (існує режим без втрат, але він не широко підтримується) і добре підходить для фотографій, які зазвичай мають багато різних кольорів та градієнтів. З JPEG існує взаємозв'язок між розміром файлу та якістю зображення, але навіть при найнижчому рівні стиснення (тобто найбільшому розмірі файлу) зображення JPEG все одно значно менше, ніж у звичайних форматах. Формат).
Рівні стиснення JPEG визначаються у відсотках (де 0 відсотків - це найменший розмір файлу, але найнижча якість, а 100 відсотків - найкраща якість, але найбільший розмір). Значення приблизно від 60 до 80 відсотків, як правило, вважається хорошою середньою точкою для веб-зображень.

GIF
GIF існує з 1987 року і зазвичай використовується для логотипів, спрайтів та кліпартів.
Для зображень у форматі GIF використовується таблиця кольорів (також відома як палітра), яка може містити до 256 кольорів. Потім кожен піксель у зображенні GIF замінюється числом, яке відображає, який із цих кольорів він містить. Очевидним обмеженням тут є те, що GIF може містити не більше 256 кольорів. Але, як не дивно, цього досить часто, тим більше, що таблиця кольорів не визначена заздалегідь і відображається з кольорів, що використовуються на зображенні (наприклад, зображення може містити 256 відтінків червоного).
Цікаво також зазначити, що стиснення GIF базується на LWZ, переглянутій версії алгоритму LZ78, який використовується у gzip та deflate.
Оскільки стиснення відбувається в горизонтальних рядах (зліва направо), зображення, що містять горизонтальний градієнт кольору, стискаються гірше, ніж ті, що мають вертикальний градієнт.

PNG
PNG - це формат без втрат, який був призначений замінити GIF. PNG використовує алгоритм дефляції (який, у свою чергу, використовує LZ77, подібний до LWZ).
PNG підтримує RGB ​​та RGBA (RGB з альфа-каналом) палітру та зображення, які не належать до палітри. Різні палітри часто називають PNG8 (для PNG), PNG24 (для RGB) та PNG32 (для RGBA). Цифри стосуються кількості бітів на піксель.

  • PNG8 є найбільш схожим на GIF. Використовуйте 8-бітну палітру кольорів (тобто 256). У більшості випадків перевершує GIF.
  • Режим RGB (PNG24) іноді також використовується як альтернатива JPEG без втрат, хоча великий розмір файлу робить його невживаним в Інтернеті.
  • PNG32 схожий на режим RGB, але включає альфа-канал. Хоча цей режим не використовується широко, існують певні ситуації, коли це єдиний життєздатний формат. Для зображення з багатьма кольоровими градієнтами, які також потребують прозорості, JPEG, GIF та PNG8 не є ідеальними (оскільки JPEG не підтримує прозорість, тоді як GIF та PNG8 мають обмежену глибину кольору). PNG32 чудово обробляє ці зображення, але розмір не буде малим.

Незважаючи на те, що PNG існує з кінця 90-х, Internet Explorer мав численні недоліки у підтримці цього формату, особливо для PNG32. Наприклад, IE 6.0 та попередні версії не вдаються правильно вирішити альфа-прозорість, тоді як IE 7.0 має проблеми з використанням прозорості поверх напівпрозорих елементів HTML. (Див .: http://support.microsoft.com/kb/265221)

SGV
Розглянуті вище формати зображень виконують всю роботу навколо подібних принципів: щодо кольорової інформації кожного пікселя на зображенні. Різниться спосіб кодування цієї інформації.
Масштабована векторна графіка (SVG) застосовує зовсім інший підхід, використовуючи XML для опису зображення з точки зору геометричних фігур. Якщо ви коли-небудь малювали улюбленою мовою програмування, вам буде відома ідея вказувати розміри багатокутників, встановлювати колір заливки, накладання тексту тощо. Це вміст простого файлу SVG: