Оптимизация графики в веб-дизайне

20 Фев
2012

Графика на сайте довольно сильно сказывается на скорости его загрузки, иногда настолько сильно, что сайт теряет посетителей. Как минимизировать время подгрузки изображений, оптимизировать графику и какой формат графики предпочесть — все это я постараюсь рассказать вам в этом посте.

PNG, GIF или JPEG?


Да, вещи абсолютно разные, но все же. Кто-то скажет о плохом качестве jpg (в сравнении с тем же png) — не будем брать это в голову, проведем тест.
За основу возьмем исходник PSD и сохраним в трех форматах соответственно.
Итого: PNG — 1207 Кб, JPG — 860 Кб, GIF — 590 Кб.
Итак, в первом раунде побеждает GIF.
Если же нужно найти компромисс качества и размера — видимо стоит смотреть в сторону jpg.

Сжатие картинок


На первом этапе сжимаем PNG (используя PNGOut): на выходе png размером 1107 КБ. (разница в 4%).

Так как сжатие gif и jpeg без потери качества невозможно (возможна только оптимизация), оптимизируем их с помощью средств Photoshop (Сохранение для Web).

Параметры оптимизации по умолчанию — высокое качество:

  • GIF — 587 Кб
  • JPEG — 197 КБ
  • PNG-24 — 1300! Кб

Жмем по максимуму

  • GIF(64 без дизеринга) — 371 Кб
  • JPEG — 53 КБ
  • PNG-8(с дизерингом) — 360 Кб


Итого среднее из двух опытов: GIF: 479; JPEG: 80 Кб; PNG: 830.

Вывод


Важна скорость — JPG, нужен компромисс — GIF, делать упор на качество — PNG.

Надеюсь статья была полезна, в любом случае выводы делать вам. Жду критики об использованной методике и предложений по их улучшению.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх