Графика на сайте

     Изображения, используемые на сайте, принято называть “графикой”. Посмотрим, какими они бывают и каковы их параметры. А также где и как они обычно применяются.

     Изображения сайта могут быть как растровыми, так и векторными.

Что такое растровое изображение?

     Растровое изображение(рис.1) собрано из пикселей. Пиксель — очень маленький прямоугольник(точка), окрашенный или неокрашенный.

Рис.1. Растровое изображение

На рис.1. видны пиксели, из которых собрана картинка. Именно пиксели создают искажения при масштабировании растрового изображения.

Что такое векторное изображение?

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

Параметры изображений

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

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

Цвета изображения

На сегодня принято выражать цвета изображения шестнадцатиричной системой, например, черный цвет #000000. Можно сокращать запись, если цвет обозначен шестью одинаковыми цифрами, например, черный - #000. Цвет можно задавать через цветовое пространство RGB(красный, зеленый синий). Например, если в html мы укажем белый цвет как #ffffff, то в RGB он будет иметь обозначение 255,255,255.

Есть и другие способы задать цвет, однако эти самые распространенные.

Форматы изображений

Форматы изображений, которые часто используют в веб разработке: растровые - jpg(jpeg), png, gif или векторные — svg.

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

Формат png позволяет использовать прозрачную подложку, то есть можно встроить изображение в любом месте и оно выглядит естественно вписанным. Формат намного тяжелее jpg. Отлично сжимается при компрессии.

Формат gif иногда используют для анимации. Google советует использовать для анимации видео-форматы.

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

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

Как применяют изображения на веб сайтах?

Favicon (“фавикон”) – это маленькая картинка, которая появляется в списке сайтов (например, при поиске в Яндексе) и в левом верхнем углу браузера при просмотре Вашего сайта. Favicon повышает удобство навигации для посетителей. Размеры иконок favicon: 16*16 . Обычно при изображении фавикона используется формат ico.

Иконки используются для обозначения почты (e-mail), вывода на печать и тому подобных действий.

Можно применять их для обозначения элементов навигации.

Логотип – это графическое изображение, выступающее как символ сайта, компании и т.д.

Логотипы бывают в виде:

• Оригинального начертания названия

• Символического изображения и названия

• Символического изображения.

К логотипам применяются следующие требования

• Запоминаемость

• Выразительность

• Уникальность

• Лаконичность

• Ассоциативность

Логотип не должен содержать мелких деталей. Должен хорошо смотреться, и не только на странице сайта, а и в других исполнениях.

И последнее. Графику следует использовать с осторожностью. Большое количество графики на сайте заметно тормозит загрузку, а этого никому не нужно. Google советует вовсе отказаться от графики там, где это возможно.

2018-03-15

◄ Назад 

 Вперед ►