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

Формат JPEG

Формат JPEG хорошо подходит для фотографий и картин и плохо подходит для схем, чертежей, текста и графики.

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

JPEG не поддерживает прозрачность, поэтому изображение в формате JPEG — это всегда прямоугольник. Можно имитировать прозрачность, если в графическом редакторе задать изображению такой же цвет фона, как и у контейнера фотографии.

Используйте JPEG для размещения фото с наилучшим соотношением «размер файла»/«качество».

Формат PNG

Формат PNG включает в себя два подтипа: PNG-8 и PNG-24. Они также являются режимами сохранения в Photoshop.

PNG-8 по характеристикам схож с форматом GIF. Он хорошо подходит для схем, чертежей, графиков и текста, а также изображений, где мало цветов. Максимальное количество цветов — 256. Данный формат позволяет использовать прозрачность.

PNG-24 подходит для схем, чертежей, графиков, текста, а также для сложных многоцветных изображений, так как поддерживает практически неограниченное количество цветов. На фотографиях обычно он уступает JPEG по размеру файла, но превосходит по качеству изображения. Данный формат имеет полноценную поддержку полупрозрачности, которой нет ни в одном другом формате.

Формат GIF

Основная причина использовать GIF заключается в том, что он поддерживает анимированные изображения. В других случаях лучше использовать JPEG или PNG.

Множественные фоны

Самая надежная техника создания множественного фона заключается в том, что мы вкладываем элементы друг в друга и делаем их одинакового размера, а затем каждому элементу задаём свой фон. Каждый элемент служит одним слоем фона.

Фоны вложенных элементов перекрывают друг друга: чем глубже элемент, тем выше его фон.

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

Эффекты с повторяющимися фонами

Фон, у которого присутствует значение repeat, repeat-x или repeat-y, часто используется для создания интересных декоративных эффектов и называется повторяющимся.

Например:

• стежки;
• зазубренные края;
• градиенты и тени.

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

Спрайты

Спрайт — это одно большое изображение, в котором содержится много маленьких.

Спрайты используются, чтобы снизить количество запросов на сервер. Маленькие картинки «склеивают» в одну большую. Части спрайта отображают в элементах с небольшими размерами. Такому элементу задают картинку-спрайт в качестве фона и смещают её таким образом, чтобы была видна нужная её часть.

В спрайты обычно объединяют иконки и различные мелкие декоративные изображения.