rezult (rezult) wrote,
rezult
rezult

Оптимизация размеров изображений на сайте

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

Изображениями для сайта занимался не я. Поэтому был сильно удивлен, когда увидел размеры и форматы картинок.

Выкачав главную страницу сайта на свой компьютер, узнал размер данных, которые приходится скачивать каждому посетителю: 8,5 мегабайт. Из них на изображения приходится 8 мегабайт. И мы еще планируем добавить галерею изображений для каждого продукта.

С этим пора начинать что-то делать.

Итак, у нас несколько основных видов изображений на главной странице:

Баннеры в слайдере
В данный момент их 4 по 1,4 Mb = 5.6 Mb.

Изображения продуктов
В данный момент 20 изображений пицц по 80 Kb и 15 изображений закусок в среднем по 40 Kb = 2.2 Mb.

Маленькие изображения напитков и соусов
В данный момент 9 изображений в среднем по 12 Kb = 108 Kb.

Немного об оптимизации изображений

Про оптимизацию картинок отлично написал Сергей Чикуенок в Техногрете и на Smashingmagazine. Но Сергей описывает очень профессиональный подход к оптимизации файлов. Нас в данном случае интересуют элементарные навыки оптимизации изображений для сайта. Приступим на примере изображений с сайта Додо.

JPG

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

В нашем случае баннеры были сохранены в формате PNG24, о котором напишу ниже. Их нужно пересохранить в JPG.
01-img-banner

Я использую для конвертации в JPG редактор Photoshop CS6. Формат JPG не нужно сохранять с качеством 100% — получается слишком большой вес файла. И не стоит сжимать сильнее 50% — применяются дополнительные алгоритмы сжатия, которые создают слишком заметные артефакты.

Для себя я пришел к выводу, что для сайтов картинки достаточно сохранять в JPG с качеством около 70%.

02-compare-jpg
Сравнение одной и той же картинки при разном сжатии JPG

Итак, размеры баннеров можно сильно уменьшить:

  • Сейчас: 1,4 Mb.

  • JPG 71%: 400 Kb (3,5 раза).

  • JPG 51%: 260 Kb (5,3 раза) в нашем случае я бы выбрал этот вариант для огромных баннеров. Смотреть результат.



Что касается изображений продуктов, то сейчас они сохранены в JPG, но с максимальным качеством, вот цифры для них.
01-img-pizza


  • Сейчас: 80 Kb.

  • JPG 71%: 24 Kb (3,3 раза) тут подойдет этот вариант, так как он дает хороший баланс размера и качества картинки. Смотреть результат.

  • JPG 51%: 16 Kb (5 раз).


PNG24 и PNG8

Пиэнджи24 сохраняет изображения для веба без сжатия. То есть небольшие изображения со множеством цветов и градиентных переходов нужно сохранять в этом формате.

Пиэнджи8 относится к градиентам хуже и сжимает изображения, давая меньший размер изображений, но теряя в точности передачи цветов.

Наши иконки изображений сохранены в JPG. Их стоит сохранить в PNG.
01-img-icon


  • Сейчас: 12 Kb

  • PNG24: 8 Kb

  • PNG8: 3 Kb я бы выбрал этот вариант, потому что изображения настолько маленькие, что потери в цветах практически не заметны. Смотреть результат.


Итого в нашем случае размер изображений мог быть: 260 Kb * 4 + 24 Kb * (20 + 15) + 3 Kb * 9 = 1040 + 840 + 27 = 1,9 Mb. Это в 4.2 раза меньше, чем вес всех изображений на сайте сейчас. Можно сильно сократить нагрузку на сервер и сильно упростить жизнь пользователей, особенно если у них медленный интернет.
Tags: Додо, оптимизация, сайт
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments