Грамотная оптимизация графики.

[Kray Storm]

Здравствуйте.

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

Насколько я понимаю, во времена черепашьего Интернета, стройных таблиц и чистого HTML-а одним из основных способов существенной оптимизации сайта было уменьшение размера используемых на странице графических файлов.

Насколько это актуально сегодня?

С одной стороны есть множество статей и глав о том, что "Save for web" в Фотошопе придумали не зря и что нужно бороться за каждый байт веса.

А с другой я нашел немало комментариев (их проф.авторитетность мне, правда, неизвестна) о том, что мониторы уже давно не по 256 цветов и 14'', и Инет у всех теперь "дико"-мегабитный, да и пользователи – простые люди и им приятней видеть графику без "пожатости".

Ну, на первый взгляд как-бы все ясно: "Yes! Теперь все мои картинки будут max-quality и 1080p на случай, если кто-то включит scale+200% в браузере".

Однако, когда начинаешь на это обращать внимание, получаешь следующее:

На каком-нибудь "не последнем" форуме пишут "Вот посмотрите, как надо дизайнить!" и полуобморочные отзывы "Да это же великолепно!".

Естественно, с мыслью "щас я узнаю все секреты дизигна" клацаю по ссылке и вижу… на крупных фонах и подложках - цветовые ступеньки на градиенте в лучших традициях старинной графики 16bit. Т.е., jpeg с неслабыми потерями.

А если у меня высокое разрешение или плохо видно текст, я ж еще и "масштаб++" крутну... Так вообще каша будет.

Ну да и ладно, если бы история время от времени не повторялась.

И опять-таки. Валом сайтов, где двухцветные лого сохраняют в тот же jpeg. Или даже надписи 2х3см делают графикой и чуть ли не 2000x3000px (условно говоря).

Я понимаю, что в любом ремесле есть маньяки с линейкой, воюющие с каждым миллиметром, но как понять, где разумные границы? Тот самый "допустимый минимум". Тем более, сейчас все кешируется и в этом смысле скрипты с серверами и flash с canvas-ом, по идее, требуют большего внимания при оптимизации, чем какие-то картинки (или нет...).

Есть ли какое-то разумное объективное мерило "как правильно", кроме глаза разработчика (где дизайнер хочет как можно красивее, а кодер-оптимизатор – как можно меньше и быстрее)?

Вроде "ага, вот эта картинка должна занимать примерно вот столько и никто не увидит разницы, а эта - столько".

Ведь, можно сделать страничку с изображениями, потом еще потратить время и уменьшить их (пожать) в 10 раз и записать в отчете радоваться, что сделал 10-кратную оптимизацию .

Или никто не заморачивается над этим вопросом? Сделал, как привык, а там время покажет?

[Быколай]

когда делать совсем не фиг, ползаю SSH по серверу и руками выискиваю картинки тяжелее 100KB. 90% использую .jpeg

ЗЫ: жутко бесит, когда предоставляют исходники графики в хреновом качестве

Edited October 16, 2012 by Быколай

[Kray Storm]

Так в том-то и идея. Для одного изображения, скажем, 100KB - это в 1,5 раза меньше, "чем нужно", а для другого - в 10 раз больше.

Может есть какие-то инструменты, которые "автоматом" рассчитывают видимость и критичность потерь?

Ну там, плагины для монстерских ВИЗИВИГов...

[Быколай]

Так в том-то и идея. Для одного изображения, скажем, 100KB - это в 1,5 раза меньше, "чем нужно", а для другого - в 10 раз больше.

Может есть какие-то инструменты, которые "автоматом" рассчитывают видимость и критичность потерь?

Ну там, плагины для монстерских ВИЗИВИГов...

хм... можно написать программу, которая исходя из кол-ва цветов и формата файла, разрешения, будет делать уменьшение и сжатие, если это позволяет формат. И прикрутить её к загрузчику на сервер. Что бы контент-менеджер не парился с оптимизацией. На самом деле это несложный скрипт. Во многих загрузчиках cms есть автосоздание эскизов, например.

[ils]

Уровень сжатия зависит от целей, которые вы планируете достич с помощью этого сайта. Для промо сайтов какого-либо товара, сайта-визитки, портфолио и т.д. главное качество. Для сайта с высокой посещаемостю, ориентированного на предоставление контента всем и каждому - размер.

Imho.

[Kray Storm]

Похоже этот момент все-же из области искусства, а не техники. Выходит, нет "идеальной формулы"?

хм... можно написать программу, которая исходя из кол-ва цветов и формата файла, разрешения...

Если писать "для себя" то такой человек, наверное и на глаз определит что там да как должно быть )

Чтобы контент-менеджер не парился с оптимизацией.

Т.е., контент-менеджер и есть тот самый "специально обученный человек", который решает не только вопросы информационного наполнения, но и техническую часть? В моем недалеком понимании это было что-то вроде админа группы Вконтакте . Использует те инструменты, что уже есть и заботится только о... контенте.

Вообще, меня больше заинтересовала эта проблема применительно к дизайну самого сайта. Контент (новости, статьи), естественно, мало кто будет добавлять вручную и здорово оптимизировать. Сделают перепост как есть или зальют фотки/иллюстрации такими, как сделали, со стандартными превьюшками с хостингов (там наверное, кстати, вот такие скрипты на загрузчиках и работают). Тут уже все придумано.

Я думал как раз о той графике, которая "раз и навсегда" в оформлении сайта и которая делается вручную.

Для промо главное - качество.

Да. Строку "Loading..." я только на таких видел. ))

Для сайта с высокой посещаемостю,... - размер.

А вот в этом случае, насколько как раз вес исходной странички критичен?

Что тяжелее для сервера? 1000 юзеров, ломанувшихся на страничку в 100Кб или 500 юзеров на страницу в 200Кб?

Т.е., критичнее количество запросов или объем данных передаваемых по запросу?

[ShumNo]

Не вижу смысла что-либо оптимизировать, если только:

jpg превышает 85-90 по качеству

bmp

вы гугл

какая разница весит страница 200kb или 1 метр?

[Быколай]

Т.е., контент-менеджер и есть тот самый "специально обученный человек", который решает не только вопросы информационного наполнения, но и техническую часть? В моем недалеком понимании это было что-то вроде админа группы Вконтакте . Использует те инструменты, что уже есть и заботится только о... контенте.

Вообще, меня больше заинтересовала эта проблема применительно к дизайну самого сайта. Контент (новости, статьи), естественно, мало кто будет добавлять вручную и здорово оптимизировать. Сделают перепост как есть или зальют фотки/иллюстрации такими, как сделали, со стандартными превьюшками с хостингов (там наверное, кстати, вот такие скрипты на загрузчиках и работают). Тут уже все придумано.

Я думал как раз о той графике, которая "раз и навсегда" в оформлении сайта и которая делается вручную.

=================

Что тяжелее для сервера? 1000 юзеров, ломанувшихся на страничку в 100Кб или 500 юзеров на страницу в 200Кб?

Т.е., критичнее количество запросов или объем данных передаваемых по запросу?

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

А вот то что каждый день вываливается на сайт контент-менеджером, можно и автоматизировать. И кстати, всё зависит от качества

2. смотря как настроен сервер и что из этих килобайтов отдаётся статический с диска, а что генерируется в оперативной памяти и вытаскивается из базы данных. если чисто статика и правильно настроенный сервер, имхо, ему пофиг, не тот порядок. скорее канал забъётся, чем ресурсы на статике.

ShumNo, ну так я и не понял что ты написал, дружище

[SelenIT]

Насколько я в курсе, в большинстве случаев критичнее количество запросов. Оттуда объединение скриптов и стилей в монолитные файлы (с последующим gzip'ованием), объединение картинок в спрайты и запихивание этих спрайтов в data-url в тот же CSS, и подобные выкрутасы.

Лично я стараюсь оптимизировать картинки "на глаз" при любой возможности. По моему опыту, для JPEG в большинстве случаев приемлемый результат получается при качестве 60-65 в фотошопе (а для превьюшки без резких переходов часто и 40 достаточно) и 93 в большинстве библиотечек для автоматизации (GD в PHP, Image.Save в .NET и т.п.). Для PNG хороший эффект дает Color Quantizer с ограничением кол-ва цветов до 512–2048. Запас по разрешению для "ретин" и нестандартных масштабов делаю, только если явно попросят.

[ils]

Насколько я в курсе, в большинстве случаев критичнее количество запросов.

Полностью поддерживаю. Используйте по возможности спрайты и все будет ок.

Edited October 17, 2012 by ils