А сколько весит Ваш сайт? Часть 2.

Автор , 11.12.2010,

коллаж Быстрый интернет проникает в повседневную жизнь не только в традиционно высокотехнологичных странах, но и на постсоветском пространстве. Вот только свято место пусто не бывает и “вес” интернет-страниц, объём информации на них тоже растёт быстрыми темпами. Да так, что поисковик Google теперь учитывает это и понижает поисковый рейтинг “тяжёлым” сайтам.

В первой части статьи мы с помощью онлайн-инструментов “взвесили” свои сайты-блоги, оценили их скорость загрузки и обсудили кое-какие меры по разгрузке и ускорению наших ресурсов.

Теперь давайте посмотрим, где же кроются самые мощные резервы для снижения весовой категории наших блогов и сайтов? Какие меры займут меньше всего времени и телодвижений, и дадут нам наибольший эффект?

Перед нами диаграмма влияния файлов блога на скорость загрузки, которую мы получили в ходе предыдущих экспериментов (просьба сохранить ссылку на страницу с анализом своего блога была именно для этой цели):

img_speed

Циферки у цветных секторов, разумеется, у всех будут разные, но общая картина от этого вряд ли изменится.

Что же мы видим? Целую четверть времени загрузки блога занимают Java-скрипты (скажу по секрету, что значительная доля из них – те самые красивые рюшечки-фенечки, о которых мы говорили в первой части… Вот и ещё один резерв ускорения :-) Но дооольше всего грузится всё-таки графика, – именно те изображения, иллюстрации, фоны, пиктограммы и прочее, которые делают наши блоги красивыми, привлекательными, стильными и авторскими.

Конечно, это не повод оставлять только один унылый, голый текст. Зато мы можем освоить и постоянно применять последовательность простых шагов, которые помогут нам облегчить наши блоги и при этом пощадить графику. Эти “высокие технологии” под силу любому веб-мастеру, кто хотя бы один раз успешно опубликовал в сети свой текст и вставил в него свою картинку.

Для начала, как обычно, немного теории. Нам поможет то, что к изображениям в сети требования обычно попроще, чем к напечатанным на бумаге, в журналах или альбомах. Под словами “размер картинки” будем понимать именно линейные размеры сторон в точках, а “объём” – это уже будет у нас “вес” в килобайтах. Ещё надо понимать, что когда мы редактируем черновик статьи и «меняем» в нём размеры картинок, — меняется только их масштабирование, показ на экране. Сами изображения хранятся на сервере блогоплатформы и затем загружаются браузером для просмотра именно такие, какие мы вставили с нашего компьютера!

  • Поэтому первый шаг к оптимизации изображений – это подбор “правильного” размера. Чаще всего требуются заглавные изображения для “оживления” текста, их вставляют в начале статьи. Затем, при необходимости используются иллюстрации в теле самой статьи. И ещё, если такая функция предусмотрена шаблоном блога,  то используются миниатюры, — фрагмент или уменьшенная копия заглавной картинки.
  • Следующий шаг – удаление избыточной информации из картинок, которая не имеет решающего значения для восприятия, но при этом сильно утяжеляет изображения.
  • И последний этап – сохранение обработанного изображения в подходящем, оптимальном формате.

Для экспериментов возьмём картинку с одного из блогов. Картинка очень красивая, из статьи на позитивно-новогоднюю тему. Единственный недостаток – слегка тяжеловатая:

zima1_640x424x30

Далее по шагам – выбор размера. В общем случае надо отталкиваться от ширины основной колонки блога.

  • Если картинка должна быть заглавной, то ей хорошо подойдёт ширина примерно в 1/3 от основной колонки. Шире – на вид “тяжеловато” и займёт большой объём, меньше – будет заставлять напрягаться, всматриваясь, а экономия места уже будет не такая большая. К примеру, у этого блога ширина основной колонки 640 точек и заглавные картинки шириной в 256 точек чувствуют себя превосходно. Разумеется, это не догма, а результат практического опыта.
  • Для размещения в виде иллюстрации размеры картинки можно уменьшить, если её исходная ширина больше колонки, или оставить как есть, если картинка меньше или равна колонке.
  • Для миниатюр в WordPress обычно используется размер картинки 150×150 точек.

Удаление избыточной информации.

  • Для изображений в форматах BMP и PNG параметр “глубина цвета” обычно имеет значение 24 бита. Уменьшив его до 8 бит (256 цветов) мы серьёзно уменьшим объём картинки, а ухудшение цветопередачи большинство людей, включая нас, на экране просто не заметят.
  • В изображениях формата JPG, JPEG можно поиграться с параметром “уровень компрессии” (может называться “коэффициент сжатия” или как-то похоже). Сильно изменяется объём картинки и видимое качество тоже. В зависимости от конкретного изображения приемлемое качество у одних может сохраняться при уровне 85%, у других – до 50-40%.

Сохраняем в удобном формате.

  • Формат BMP для картинок на блогах лучше не использовать – хотя и 100% качество, но занимает очень много места. В интернете это не лучший вариант.
  • Для начала, можно попробовать сохранять в формате GIF. Объём файла будет значительно меньше, чем в BMP, за счёт определённого ухудшения качества. До какого-то времени это был основной формат графики для интернета.
  • Когда есть возможность, предпочтительно использовать формат PNG (Portable Network Graphics), который именно для этих целей и создавался. Плюсы: информация об изображении содержится в нём в сжатом виде, качество изображений при этом сохраняется полностью, как в BMP. Минус: не очень хорошо сжимаются многоцветные изображения с плавными градиентными переходами (например, многие фотографии).
  • Формат JPG, исходя из предыдущего пункта, даёт хорошие результаты на фотоизображениях. Но лучше всего сохранить заготовку в обоих форматах, JPG и PNG с примерно одинаковым качеством, потом сравнить их и воспользоваться той, что занимает в итоге меньше места.

А теперь результаты натурных экспериментов с образцом:

Исходное изображение: BMP, 640×424 точки, глубина цвета 24 бита, – 795 Кб;

Уменьшенное изображение BMP, 256×170 точек, 24 бита127 Кб;

Тоже уменьшенное BMP, 256×170, 256 цветов, – 43,5 Кб;

Теперь GIF: 640×424 точки, 256 цветов253 Кб;

Уменьшенное GIF, 256×170, 256 цветов —  44,4 Кб;

А теперь PNG: 256×170, 24 бита, – 109 Кб;

PNG, 256×170, 256 цветов, – 35,9 Кб;

Теперь JPG: 256×170, 90%, – 24,1 Кб;

JPG, 256×170, 70%, – 14,3 Кб;

JPG, 256×170, 40%, – 9 Кб.

Иллюстрация в середине статьи, по ширине текста: JPG, 640×424, 30% (но это, конечно, экстрим), – 47,6 Кб.

* * *

Желаю всем читателям успехов в блоговедении и да будут наши с вами блоги лёгкими и быстрыми!


Понравилось? Поделись с другими — добавь в свой Twitter!
Заинтересовало? Прокомментируй, что думаешь по этому поводу!
Будь первым в курсе новинок блога, подпишись на обновления по RSS.

,

10 комментариев “А сколько весит Ваш сайт? Часть 2.”

  1. Очень удобен Photoshop для этих манипуляций… Используя функцию «Сохранить для Web» даже с одинаковым кол-ом точек можно задавать желаемые кб картинкам… К тому же можно установить облегченную версию программы, если не требуется работать в ней профессионально!

    • Ольга, с энтузиазмом кинулся попробовать,.. и растерялся в разных окнах с разными настройками.
      Всё-таки, Фотошоп — это профессиональный инструмент. Для большинства повседневных задач простые и лёгкие программы удобнее.

  2. Спасибо, Евгений!Сначала хотел некоторые Ваши статьи поставить себе в закладки. Теперь решил, что будет проще, если весь сайт поставлю себе в закладки.

  3. Спасибо, Евгений. Мне статья понравилась, особенно сравнение уменьшения с разными расширениями.

    • Наталья, на разных картинках разные форматы сохранения дадут разный результат. Но можно заранее хотя бы примерно прикинуть, это бывает полезно.

  4. Очень удобная программка — Photo Shaman (условно-бесплатная)
    А также отлично для этих целей подходит Adobe Fireworks (небесплатная совсем) :)!

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

А Вы что думаете по этому поводу?

XXI век is powered by WordPress. OfficeFolders based theme by Themocracy