0 1 Оптимизация графики сайта | веб-студия Maxdizayn

Оптимизация графики сайта

11.09.2018

Сегодняшние сайты разительно отличаются от своих предшественников из 90-х, когда скорость связи была очень низка, а для входа в него приходилось буквально звонить из компьютера в интернет (кто помнит зубодробительный писк модемов того времени — меня поймёт). Тогда вставить картинку на сайт было очень тяжелым решением для разработчиков, так как это сразу приводило к резкому падению скорости загрузки веб-ресурса.

Но технологии шагнули вперед, и сегодняшний интернет стал намного быстрее. И, тем не менее, проблема с изображениями никуда не ушла. Да, сейчас странички можно буквально «нафаршировать» изображениями, сделав их красивыми и интересными, но это до сих пор напрямую будет влиять на скорость их загрузки. Особенно это критично для сайтов презентационного характера, где картинок очень много, например, для рекламных лендингов, где до 60-70% объема страницы может приходиться на изображения.

Эта ситуация будет усиливаться, так как давно уже доказано, что наличие качественной графики на веб-ресурсе значительно увеличивает их конверсию. При этом скорости загрузки сайтов поисковые системы сейчас уделяют значительное внимание, что негативно сказывается на ранжировании «разжиревших» картинками сайтов в поисковой выдаче. С этой проблемой ко мне часто обращаются новые заказчики, сайты которых делались непонятно кем, и понятие оптимизация на которых отсутствует как таковое. По этой причине я и решил написать эту статью. Надеюсь, что она будет Вам полезной.

Великий и могучий JPEG.

В настоящий момент большая часть графики на сайте использует формат JPEG. Более того, почти вся современная техника и разного рода гаджеты предпочитают дружить именно с такого рода изображениями, несмотря на то, что данный формат был придуман аж в далеком 1992 году. С тех пор он неоднократно перерабатывался и улучшался.

JPEG представляет собой алгоритм уменьшения «веса» изображений, который построен на принципах искусственного ухудшения их качества за счет «выпиливания» не воспринимаемой человеческим глазом информации. Основная задача данного формата — сохранение визуальной точности картинки при минимизации размера исходного файла. Поэтому, если Вы используете графику на своём сайте, то крайне желательно внедрять её в виде JPEG-файлов, когда это возможно. Этот формат лучше всего работает с изображениями, содержащими в себе огромное количество различных цветов, например, с фотографиями.

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

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

  • Лучшее качество. Используется, когда качество картинки важнее, чем размер её файла. Этот уровень сжатия в сайтостроении используется редко и только тогда, когда изображение занимает какое-то очень важное место в дизайне веб-ресурса.
  • Хорошее качество. Используется намного чаще, чем лучшее, так как уже приводит к значительной экономии трафика. При этом данный уровень оптимизации не значительно влияет на качество картинки.
  • Низкое качество. Используется, когда скорость загрузки сайта намного важнее качества картинок. Хорошо работает на небольших изображениях, которые никто не будет разглядывать. Данным уровнем сжатия не злоупотребляют, разве что в случае, когда сайт делается для региона с не очень хорошим качеством интернета.
  • Самое низкое качество. Обеспечивает самую быструю загрузку при максимальной потере качества картинки. Используется редко, в основном для маленьких картинок.

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

Режимы сжатия в формате JPEG.

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

Этих режимом очень много, но самых популярных всего три:

  • Базовый режим (он еще называется последовательным). При таком кодировании изображение на сайте будет загружаться сверху вниз, что особенно сильно будет заметно при низкой скорости соединения с интернетом.
  • Режим сжатия без потерь. Очень похож на базовый режим, но с меньшей потерей качества картинки.
  • Прогрессивный режим (PJPEG). При загрузке сайта такие изображения будут делиться на ряд условных переходов, первый из которых покажет размытое изображение, которое постепенно превратится в полноценное изображение.

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

GIF vs VIDEO.

Формат GIF так же появился очень давно и используется до сих пор. Основное его отличие от JPEG в том, что он позволяет делать картинки анимированными. Сейчас такой формат часто используется в соц. сетях и различных развлекательных порталах, несмотря на то, что этот формат изначально не предназначался для этого. Специфика GIF заключается в том, что он призван служить базой для анимации, а не играть роль этой самой анимации. В связи с чем размер этих файлов порой может достигать поистине монструозных величин.

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

Как видите, выдача одного и того же видео-ряда в формате MP4 вполне способно сократить размер файла на 75% и более, что значительно повлияет на скорость загрузки веб-ресурса. Так что смело можно сказать, что использование GIF-файлов в наше время является не более, чем пустой тратой трафика. Почему же их активно используют соц. сети? Да потому, что люди сами люди привыкли к GIF и им сподручнее постить именно такие материалы. Сетям приходится хитрить. Например, тот же Twitter автоматически конвертирует GIF в видео во время загрузки.

Практические рекомендации.

Как Вы уже поняли, в современном мире скорость загрузки странички всё еще остается величиной очень критичной, несмотря на довольно приличную скорость интернета у среднестатистического пользователя сети. На нее влияет множество факторов, но основным их них является графика в виде картинок, которые используются на сайте. В связи с этим можно сформулировать следующие рекомендации:

  1. Оптимизируйте все изображения с умом. В идеале каждая картинка должна анализироваться и сжиматься до определенного уровня, в зависимости от ее значимости, размера и контента. Это займет больше времени у администратора сайта, но даст самый лучший результат по соотношению качество/скорость загрузки. Данный процесс можно и автоматизировать, но тогда индивидуального подхода уже не будет (все изображения будут сжиматься по одинаковым алгоритмам). Для автоматизации процесса оптимизации уже есть немало плагинов для различных CRM, как платных, так и бесплатных.
  2. Старайтесь использовать больше JPEG-файлов. Несмотря на  то, что сайты поддерживают различные виды изображений, в том числе и с прозрачным фоном (PNG), использовать лучше JPEG-картинки. Так Вы сэкономите намного больше трафика и существенно ускорите загрузку своего сайта.
  3. Пользуйтесь онлайн-оптимизаторами. Если картинки на Ваш сайт добавляются нечасто, то можете смело пользоваться онлайн-оптимизаторами, которые позволят просто и быстро настроить приемлемый уровень сжатия, сразу увидев итоговый вариант и количество сэкономленного места. Мы пользуемся ресурсом Imagecompressor, который способен уменьшить «вес» картинок на 80% и более и поддерживает пакетную обработку.
  4. Используйте видео вместо GIF. Если Вам нужно добавить какой-то видео-фрагмент на свой сайт, то лучше использовать видео, чем GIF-анимацию.

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

КОНТАКТЫ

Заказать сайт под ключ