Как оптимизировать графику на сайте?

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

Масштабирование

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

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

Создать веб-сайт для вашего бизнеса с оптимизированной графикой вам поможет интернет-агентство Продвижение.kz

Форматы

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

В случае с векторной графикой популярен формат svg. Также принято напрямую вставлять векторы в тег

Если вы вставляете растровую графику, то должны как можно дольше придерживаться формата JPG. На самом деле PNG лучше всего использовать только в том случае, если вы заботитесь о прозрачности.

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

Сжатие

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

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

Фото в галерее

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

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