Home News

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

23.08.2018

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

Оптимизация скорости сайта на #WordPress. Серия #2. Оптимизация картинок и другие важные моменты



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

Но сначала рассмотрим отличительные черты рисунков, используемых при создании сайтов.


Оптимизация изображений на сайте - Лайфхаки для вебмастеров, урок 1

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


Оптимизация изображений для сайта на WordPress (СКОРОСТЬ + SEO)

Компьютерные изображения используются в научных исследованиях для наглядного представления результатов и визуализации изучаемых проектов.

Компьютер помогает конструкторам создавать чертежи разрабатываемых проектов.

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

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

Сохранение в Photoshop

Но из всего множества форматов браузеры поддерживают только три: GIF, JPEG, PNG.  Это первое ограничение на использование изображений для страниц сайта.

Рисунки на веб-страницах могут использоваться для  различных целей, не только в качестве иллюстраций к тексту.

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

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

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

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

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

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

А пока посмотрите интересное видео о средневековой техподдержке.

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Проголосуйте за статью, нажмите кнопку социальной сети.

Мы в соцсетях
Видеоканал
Поделиться
rss