Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Основные способы оптимизации веб-графики

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

Основные способы оптимизации веб-графики
Содержание статьи

Графика в интернете

Графика – это один из основных типов контента для интернет-ресурса. На страницах многих современных сайтов размещена графика. При этом контент некоторых сайтов практически на 100% состоит из графических элементов. Общий объем данных файлов в килобайтах зачастую довольно велик. Соответственно, чем больше этих файлов, тем больше объем одной страницы сайта. Заканчиваться эта цепочка будет на том, что увеличится время загрузки страниц. А это всегда плохо.

webdesignТаким образом, графика утяжеляет сайт, делает страницы более объемными. Как же вебмастера допускают такое? Им же не выгодно, чтобы страницы сайта долго грузились. На самом деле какого-то критического влияния скорость загрузки страниц на поисковики не оказывает. Главное, чтобы она не была чересчур медленной. Кроме того, практически все графические файлы перед публикацией оптимизируются. Оптимизация позволяет уменьшить их размер в килобайтах (в ряде случаев позволяет уменьшить размер сразу в несколько раз).

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

Способы оптимизации графики

image-compressionОптимизировать графику для сайта можно несколькими способами. Ниже перечислим их.

  1. Преобразование картинки в другой формат с более низким качеством. К примеру, PNG преобразовываем в JPEG. Или JPEG высокого качества преобразовываем в JPEG низкого качества. Размер файла при этом уменьшается.
  2. Уменьшение разрешения файла. Часто вебмастера меняют изначальное разрешение рисунка (в том случае если файл не помещался на одну страницу или занимал чрезмерно большую площадь). При уменьшении разрешения меняется размер картинки (длина и ширина), также меняется размер в килобайтах.
  3. Применение метода последовательной загрузки графики. Если говорить более понятным языком, то картинка появляется на странице сайта не в момент ее окончательной загрузки, а сразу, но в плохом качестве (по ходу загрузки страницы качество будет улучшаться). В этом случае размер самого файла не подвергается изменению, следовательно, скорость загрузки страницы не увеличивается. Но пользователь будет испытывать гораздо меньший дискомфорт, ведь картинка появится на странице практически сразу.
  4. Использование предпросмотра. Принцип действия немного схож с предыдущим методом. Существуют специальные плагины для тех же CMS, при помощи которых можно реализовать данный функционал (добавить на страницы сайта картинки с предпросмотром). По умолчанию посетителю демонстрируется лишь эскиз (уменьшенная копия картинки, которая грузится значительно быстрее оригинала). Если пользователя заинтересует данное изображение, то он кликнет по нему и просмотрит файл в полном размере.
  5. Использование CSS спрайтов. В одной из наших статей мы довольно подробно обсуждали данный способ оптимизации размера страниц и ускорения их загрузки.

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

Сохранение изображений для веб

Более того, хочется добавить, что самый популярный на сегодняшний день графический редактор Adobe Photohsop, имеет встроенную функцию сохранения для веб. Комбинация горячих клавиш, которую следует при этом использовать - Ctrl + Alt + Shift +S. Данная функция поддерживает сохранение в форматах JPEG, GIF, PNG-8 и PNG-24. Редактор позволяет выбрать необходимое качество (обычно достаточно среднего), а также позаботится о том, чтобы имя файла было корректным для использования в сети.


Предыдущая статья:
Основные факторы, влияющие на тИЦ сайта

Читайте также:
Контент-менеджер - основные особенности профессии


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»