Пнг или джипег?
Женя Арутюнов рассказал редакторам Дела о форматах и размерах картинок, это я его попросила научить. А рассказываю вам, пушта полезно.
***
Теория
JPEG — это супер-крутой алгоритм для сжатия фоток. Он незаметно ухудшает их визуально, но это даёт огромный выигрыш в весе файла, такая там хитрая математика. Это как MP3 для звука — ухудшает, но незаметно, а выигрыш в весе файлов огромный. Но если «пережать», то будет видно по качеству.
Нет никакой разницы между словами JPEG и JPG, это просто раньше компьютеры поддерживали только трёхбуквенные расширения файлов, так и повелось.
PNG — это прекрасный алгоритм для сжатия графики, он умеет очень эффективно хранить области с одинаковым цветом, и он визуально никак не ухудшает графику (там есть нюансы; но можно считать, что их нет). Это как zip-архив, сжатие математическое, без потерь.
PNG-8 — это когда цвета простые и их немного, и без прозрачности
PNG-24 — это любые цвета и прозрачность, этот формат годится на все случаи жизни, можно не заморачиваться, всегда брать 24
PNG-32 — это ещё большая глубина цвета, хз зачем, для модных волшебных экранов из будущего, наверное
***
Как выбрать формат
Понятные случаи:
— если перед нами фотка, ну вот просто фотка с человеком там, деревом или небом — берём формат JPEG (если выбрать PNG, будет весить много, а преимуществ никаких)
— если перед нами графика и текст, то есть однородный фон, сплошные заливки, тонкие линии, буквы — берём формат PNG (если выбрать JPEG, то буквы и всякие чёткие границы станут мыльными и нечёткими)
Пограничные случаи:
— если перед нами графика и текст, но это скан документа, он слегка грязненький, изначально не супер-чёткий, с текстурой бумаги, шумом, мусором всяким — возможно, лучше взять JPEG
— если у нас в целом графика, всё из однотонных плашек и текста, но есть фотка (например, скришнот личного кабинета, и в углу там маленький портрет) — скорее всего, надо выбирать PNG; альтернатива — JPEG с не очень сильным сжатием, чтобы буквы не потрепались — если нужна прозрачность, то это в любом случае PNG
Я всегда юзаю бесплатную программу для Мака ImageOptim, она простая и очень хорошо уменьшает файлы без потери качества; можно смело во всяких там фотошопах ставить качество получше, а потом жать Имейджоптимом. Для винды не знаю.
***
Размеры файла в пикселях
Раньше, когда мониторы были маленькими, а пиксели большими — было принято сохранять картинки ровно в том размере, в каком они потом отобразятся на экране. Браузеры не умели качественно масштабировать, это был единственный способ увидеть предсказуемый результат.
Потом появились экраны высокого разрешения, браузеры улучшились, количество всяких контекстов и вариаций ширины возросло, и в итоге мы чаще всего сохраняем файлы произвольного размера с каким-то запасом разрешения.
Скажем, известно, что у нас ширина текстовой колонки плавает в диапазоне 680-880 пикселей — значит надо сохранять картинки в районе 1500 пикселей шириной; но если оно весит многовато (больше 300 Кб), то можно и поближе к 1200 пикселей. А если сюжет простой и хорошо жмётся, то можно и 2000 пикселей.
Вес файла важен, но ещё важнее вес страницы. Если у вас в статье десять картинок, то лучше бы им весить по 100 Кб, а если одна, то пусть хоть 500.