Имеет ли смысл конвертировать все изображения на сайте в PNG?

Question

[Дмитрий Зарезенко]

Представьте ситуацию

Необходимо повысить посещаемость сайта. Возникло такое предложение: конвертировать все изображения на ресурсе в формат PNG. Ресурс представляет собой пока еще маленькую социальную сеть с посещаемостью около 2500 посещений в сутки. В ней около 3500 тысяч профайлов и естественно основные изображения — их фотографии, практически все в формате JPG.

Вопрос

Имеет ли смысл переводить все изображения в формат PNG и в дальнейшем при аплоаде изображений тоже их конвертировать в PNG?

Comments

[Евгений]

Не могу понять, как может быть связан формат файлов с посещаемостью. К тому же, для фотографий — однозначно лучше jpeg. Для скриншотов — png. Другое дело — gif, там уже могут быть нюансы.

[Дмитрий Зарезенко]

1. Аргументы были следующими: фотографии станут занимать меньше, поэтому загрузка страниц ускорится.
2. GIF-формата на сайте нету, иконки все в PNG, фотографии в JPG.
3. Это не мое предложение, вопрос сообществу задал для надежности аргументации.

[Дмитрий Зарезенко]

Вот, дали одну ссылку, на которую опиралась аргументация необходимости это делать.

[Евгений]

Фотографии в png всегда будут занимать больше места, чем в jpg.

[Дмитрий Рублёв]

Больше эту ссылку никому не показывайте.
По-моему, это бред. Не все пункты, но половина точно.

Меню, дизайн и шапка сайта обычно статичны и не изменяются от страницы к странице – выделите их в отдельные файлы

Может они имели в виду все в фреймах сделать?
Кто придумал, что хранить всю графику на сайте в png — спасение?..

[Дмитрий Зарезенко]

Отвечаю на последний вопрос. Придумал не я, а где-то вычитал заказчик, как нужно делать. Я сам не сторонник соглашаться со всем что меня просят писать. Считаю что некомпетентных заказчиков нужно убеждать в том, как и что действительно нужно сделать. Есть люди, которым проще написать, даже если это ненужно или даже ухудшит ситуация. Я всегда хочу сделать хорошо. Поэтому и не согласился, а начал убеждать. А коллективное мнение профессионального сообщества в данном случае — лучший способ убедить.

Насчет ссылки, по моему тоже бред. Мне ее показали в качестве аргумента, что это таки мне придется реализовать. Как будто это есть первоисточник истинных знаний. Причем в тему моего вопроса там только одно невзрачное предложение. Как прочитав его можно подумать что это действительно оптимизирует, я так и не понял.

Так что не знаю почему кто-то заминусовал мой вопрос. Я как раз его запостил что-бы в будущем использовать как весомый аргумент против такого «решения».

Answer 1

[MT]

В вашем случае имеет смысл настроить серверные HTTP-заголовки для кэширования изображений в браузере на несколько дней (иногда рекомендуют даже на месяц). На уровне htaccess это можно сделать так:

ExpiresActive on
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000

Comments

[Serator]

Может все же ETag?

# Настраиваем ETag на время последнего изменения файла и его размер
FileETag MTime Size

(еще можно INode включить, но я предпочитаю без него)
На мой взгляд это более корректный подход + работает без дополнительного mod_expires.

[MT]

Одно другому не мешает.

Answer 2

[ahromenko]

Я считаю не нужно. Фотографии в PNG это странно. В PNG только иконки, небольшие элементы дизайна.

Answer 3

[MT]

1. Принцип сжатия JPEG основан на разбиении изображения на квадраты 8×8 пикселов и заливке этих квадратов градиентами. Подходит для фотографий (где по определению много градиентов и мало чётких объектов) и не подходит для штриховых изображений типа схем (для наглядности следует попытаться представить, что становится, скажем, с однопиксельной линией при попытке представить её как градиент 8×8; полезно также рассмотреть такое JPEG-изображение при сильном увеличении).

2. Принцип сжатия GIF и PNG-8 (не путать с PNG-24) основан на сужении цветовой палитры до минимума, достаточного для более-менее корректного отображения изображения. За счёт сужения палитры каждый вариант цвета можно закодировать меньшим количеством байт, этим (помимо алгоритмов архивации) и достигается сжатие. Максимальное количество оттенков — 256. Соответственно, GIF и PNG-8 хорошо подходят для субъективно беспотерьного (кодируется каждый пиксел) сжатия штриховых изображений с однотонными областями и небольшим количеством оттенков (логотипов, графиков, схем и проч.) и НЕ подходит для подавляющего большинства фотографических изображений (в фотографиях количество оттенков обычно сильно больше, чем 256, а если и не больше, то объём файла получается неоправданно большим, поскольку GIF/PNG-8 честно кодируют каждый пиксел изображения).

3. PNG-24 (не путать с PNG-8) — сжатие вообще без потерь. По сути специализированный архиватор для изображений. Соответственно, объём выходного файла наибольший и обычно значительно больше, чем у GIF/PNG-8, равно как и JPEG. Обычно применяется либо при необходимости сжатия без потерь, либо при необходимости использовать полупрозрачность, либо при сохранении протяженных однотонных областей и/или однонаправленных градиентов (такие градиенты сжимает эффективнее, чем GIF/PNG-8).

Comments

[Vasya_Sh]

>Принцип сжатия GIF и PNG-8 (не путать с PNG-24) основан на сужении цветовой палитры до минимума, достаточного для более-менее корректного отображения изображения.
Все не так. Их принцип сжатия основан на кодировании последовательности пикселей одного цвета (пруф. А 256 цветов — это ограничение формата (8 бит на цвет).

>при сохранении протяженных однотонных областей
эффективнее PNG-8

[MT]

Либо вы что-то недопоняли, либо ваши познания ограничиваются указанной вами статьёй.

[Vasya_Sh]

нет, скорее вы ошиблись

[MT]

Успехов.

[Vasya_Sh]

Нет уж, давайте определимся
Синий квадрат 200х200
PNG-8 — 1088 байт
PNG-24 — 1873 байта — почти в 2 раза больше!

[MT]

Синий квадрат реализуется без графики — средствами CSS. В частных случаях бывает по-разному. Длинные градиенты лучше сжимаются в PNG-24.

Answer 4

[kekekeks]

А смысл? Изображение и так пережато с потерями, сохранение в PNG их не восстановит. А вот места занимать картинки будут больше. Такие дела.

Answer 5

[marcus]

Форматы следует использовать по назначению. ПНГ предназначен для хранения прозрачных и полупрозрачных изображений, Джпег для хранения фотографий, а ГИФ для хранения самой примитивной графики. Алгоритмы сжатия каждого из форматов заточены конкретно под свои нужды. Если сохранить фотографию в пнг, а пиктограмму в джпеге — их размер вырастет в разы. Так что ваша оптимизация выльется в огромные тормоза ;-)

Comments

[Владимир Чернышев]

Вообще целевое назначение png и gif одинаковое, имхо. Использование gif сейчас оправдано, по-моему, лишь в случае если он даёт значительно меньший размер.

Answer 6

[georgthegreat]

Если картинка была сжата JPEG, то, вследствие искажений, PNG она сожмется очень плохо.
Если у вас есть несжатые исходники, то есть смысл посмотреть, какой кодировщик эффективнее работает на конкретной картнике.

Фотографии значительно лучше сожмутся JPEG, логотипы, градиенты — PNG.

Answer 7

[Vasya_Sh]

Фотографии — в JPEG, все остальное — в PNG.
GIF совсем устарел.

Answer 8

[bdmalex]

Необходимо повысить посещаемость сайта. Возникло такое предложение: конвертировать все изображения на ресурсе в формат PNG.

Долго пытался понять зачем Вам это нужно. От того, что у вас на сайте все картинки в PNG будут посещаемость не возрастёт. Если есть желание «сэкономить на ресурсах железа»,
то перевод картинок — один из вариантов экономии, хотя на мой взгляд совершенно малопонятный.
Посещаемость 2500 посещений в день — это нагрузка ВДС сервера с 512М ОЗУ, который можно купить за 450-500р в месяц. И такого конфига я думаю хватит примерно до 10000 посещений в день(если не больше).
Возникнут проблемы с ресурсом — не проблема перейти на более старший тариф с 1Гб ОЗУ и более мощным процессором за 850-900р. Плюс при такой посещаемости имеет смысл начать задумываться о монетизации ресурса…

Comments

[MT]

Здесь, скорее всего, речь об увеличении полезной посещаемости путём уменьшения количества посетителей, закрывающих сайт, не дождавшись загрузки страницы, и для сайта потерянных.