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

Формат 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, часто применяется для создания декоративных эффектов и называется повторяющимся фоном.

Главное при создании подобных эффектов — выбрать изображение с подходящим периодом повторения. Оно может быть очень маленьким, что значительно сэкономит вес страницы.

Спрайты

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

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

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