История одного логотипа
PageOptimus
УстановитьКак мы обнаружили проблему
Можно сказать, что мы наткнулись на эту проблему совершенно случайно. Во время активной разработки первой версии PageOptimus мы уделяли много времени тестированию работы расширения на различных страницах. Побочным результатом тестирования явилось понимание того, как именно различные сайты решают проблему оптимизации изображений.
К примеру, выяснилось, что для большинства популярных новостных сайтов в европейских странах (Швеция, Норвегия, Великобритания) проблема оптимизации графических материалов для статей уже давно решена. Изображения и фотографии для статей не просто оптимизированы с помощью различных алгоритмов сжатия. Они отредактированы таким образом, чтобы размер точно соответствовал дизайну сайта. Оно и понятно, при огромной посещаемости сайтов вопрос бережного отношения к ресурсам встаёт очень остро.
И тут нам стало интересно так ли хорошо обстоят дела с оптимизацией картинок на белорусских новостных сайтах. Первым сайтом в списке на проверку оказался tut.by. Честно говоря, результаты нас удивили.
Что же случилось
Нет, в целом всё обстояло очень даже неплохо. PageOptimus обнаружил одну единственную проблему на портале. Как вы, наверное, уже догадались, это была проблема с логотипом. Вот он:
Казалось бы, что в нем такого? Логотип как логотип. Давайте посмотрим на параметры самой картинки:
- Ширина: 250px
- Высота: 112px
- Размер: 1,41 МБ (1 485 161 байт)
Да... сложно представить, что нужно сделать с картинкой такого размера, чтобы она весила 1,4 мегабайта. Давайте посмотрим что можно сделать.
Оптимизация логотипа
Для начала можно просто загрузим этот файл на сайт online-convert.com и сохраним в том же формате PNG без потери качества. Вот как выглядит сконвертированный логотип:
Размер нового логотипа 3,77 КБ (3 870 байт). Это в 383 раза меньше исходного файла! Если же мы попробуем сконвертировать этот же файл с помощью PageOptimus в формат WEBP, то результат будет выглядеть так:
Размер логотипа в формате WEBP — 2,41 КБ (2 472 байт), что в 1,56 раза меньше уже оптимизированного логотипа в
формате PNG или в 600 раз (на 99,8%) меньше исходного фала! Но такая оптимизация — далеко не предел. В следующих статьях
мы покажем, как можно ещё больше оптимизировать подобные изображения.
Почему большой размер — это проблема
Логично, что после обновления логотипа он был загружен на устройства всех посетителей, зашедших на портал. А при высокой посещаемости ресурса это может привести к неожиданным дополнительным расходам. Понятно, что такие крупные сайты как Tut.by имеют свои специальные тарифы для хостинга.
Но чтобы нам хоть примерно оценить возможный ущерб от излишнего перерасхода трафика, давайте обратимся к тарифам облачного хостинга от hoster.by. Вот их цены для дополнительных опций к любому плану:
Осталось хотя бы примерно прикинуть посещаемость сайта tut.by. Хотя, зачем прикидывать. На сайте в открытом доступе имеется детальная статистика по посещаемости:
Итак, новый логотип был загружен как минимум 20 764 554 раза. При этом перерасход трафика составил:
При стоимости трафика 0,05 руб/ГБ мы получаем 1 433 рубля. Или 573 доллара при курсе 2,5 белорусских рубля за один доллар.
Кто виноват
Самое печальное в этой ситуации то, что сложно найти виноватого. Дизайнер свою работу сделал честно — вечером 3 сентября 2020 года он взял старый логотип, созданный в далёком 2015 году, и в PhotoShop CS6 добавил нужные изменения. (О том, как много о вас могут рассказать ваши изображения так же читайте в следующих статьях).
Программисты, наверное, тоже не виноваты. У них было задание оптимизировать загрузку изображений для статей. При чем тут логотип? Человек, который непосредственно менял логотип на сайте, наверное мог бы проверить размер логотипа. Но не проверил. Скорее всего, нет у него в должностных инструкциях пункта, обязывающего это делать.
По этому мы и разработали PageOptimus, который способен легко находить подобные проблемы и эффективно их решать.
Понравилась статья? Тогда поделись с друзьями!