Почему скриншоты лучше делать в PNG.

Всем привет! Недавно работая над сайтом, где необходимы были скриншоты программы. Как обычно ресайзил до 500px и сохранял в JPG. Весили они примерно 30-50кб.

На хорошем интернете 50 килобайт загружаются очень быстро. Но есть и люди с 3G, интернет не у всех быстрый. Особенно при ограничении скорости по трафику.  50 килобайт при 64килобитах это 10 секунд!

Значит нужно  оптимизировать картинки!

PNG или JPG

И совсем недавно я догадался, что делать скрины лучше в PNG, при условии, что размер 1к1. Не уменьшаем, оставляем в оригинальном размере!

Сохраняем в PNG.

  • Скриншот в оригинальном размере 575px — 13 килобайт.
  • В уменьшенном до 450px — 30 килобайт.

Таблица на которой приводится сравнение. Один и тот же скриншот был сохранен в разные форматы.

Таблица

Может показаться нелогично. Но если почитать какие преимущества у PNG перед другими форматами, все станет понятно. (http://ru.wikipedia.org/wiki/PNG)

При уменьшении изображения у нас добавляются новые цвета. Был черный шрифт на сером фоне, стало 100500 оттенков серого.

Выход!

И что же делать, если ресайз необходим? Еще проще! Заливаем оригинальную картинку, а в теге <img> прописываем свои размеры. Браузер сам сделает ресайз.

PNG не во всех случаях подходит, а там где минимум цветов. Если у вас скриншот игры или другой цветовой мешанины, то лучше подойдет JPG.

Как сохранить правильно?

Чтобы сохранить в фотошопе 8-канальный PNG, выбираем «Файл — Сохранить для WEB» комбинация горячих клавиш Ctrl+Shift+Alt+S. Формат выбираем PNG-8, количество цветов обычно 128. Без потерь в качестве, может хватить и меньше цветов.

Сохраняем в фотошопе

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *