Формат jpeg [9/16]
В последующих нескольких заданиях мы рассмотрим наиболее распространенные форматы изображений для веб. И разберемся, где и как их лучше использовать при вёрстке.
Первый формат — JPEG. Этот формат хорошо подходит для фотографий и картин и плохо подходит для схем, чертежей, текста и графики.
При сохранении изображения в формат JPEG можно задавать уровень качества. Это позволяет добиваться снижения веса файла при достаточно хорошем качестве изображения.
Однако, если установить уровень качества слишком низким, то появятся артефакты.
JPEG не поддерживает прозрачность, поэтому изображение в формате JPEG — это всегда прямоугольник. Можно имитировать прозрачность, если в графическом редакторе задать изображению такой же цвет фона, как и у контейнера фотографии.
Используйте JPEG для размещения фото с наилучшим соотношением «размер файла»/«качество».
Курс «Фоны, часть 1»
Формат png-8 [10/16]
На самом деле, формат PNG один. А PNG-8 и PNG-24 это его подтипы, а также режимы сохранения в Photoshop. Мы не будем глубоко вдаваться в детали, а разберем типовые особенности.
PNG-8 по характеристикам схож с форматом GIF. Он хорошо походит для схем, чертежей, графиков и текста, а также изображений, где мало цветов. Максимальное количество цветов — 256.
PNG-8, как и GIF, поддерживает прозрачность. Это означает, что пиксель либо полностью прозрачный, либо полностью непрозрачный.
Если нужно сделать изображение с прозрачностью, то лучше задавать обводку такую же, как цвет фона. В фотошопе при сохранении обводка называется «Mate». Без обводки картинка будет выглядеть «обкусанной». Если фон неоднородный (градиент, 3 блок в мини-браузере), то PNG-8 с обводкой будет смотреться плохо.
Чем PNG лучше GIF? PNG более современный и свободный формат, а GIF более старый и проприетарный (за его использование могут потребовать деньги). Уровень сжатия, качество и другие характеристики примерно одинаковые, поэтому лучше всегда использовать PNG.
Формат png-24 [11/16]
PNG-24 — отличнейший формат. Он хорошо подходит и для схем-чертежей-графиков-текста, и для сложных многоцветных изображений, т.к. поддерживает практически неограниченное количество цветов.
На фотографиях обычно он уступает JPEG по размеру файла, но превосходит по качеству изображения. Но иногда разница по размеру файла настолько некритична, что можно использовать PNG.
Самый главный плюс PNG-24 — это полноценная поддержка полупрозрачности, которой нет ни в одном другом формате. Поэтому в веб-разработке при вёрстке сложных фонов, графических элементов со сложными тенями и так далее альтернативы PNG-24 просто нет.
Давным-давно в IE была проблема с поддержкой полупрозрачных PNG, но в более поздних версиях IE (8+), таких проблем нет.
Сравните котика-PNG-8 с обводкой из предыдущего задания и котика-PNG-24 из этого задания. Особенно то, как выглядят их края на желтом блоке и блоке с градиентом.
Некоторые верстальщики перестают использовать PNG-8 и используют только PNG-24.
Формат gif [12/16]
Наверное, единственная причина использовать GIF заключается в том, что он поддерживает анимированные изображения.
Во всех остальных случаях используйте PNG или JPEG (если речь идёт о фотографиях и PNG даёт слишком тяжёлый файл).
Файл css51.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Формат GIF</title>
<style>
.box {
width: 256px;
height: 192px;
margin: 20px auto;
box-shadow: 1px 1px 3px #999999;
}
.block {
height: 192px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.block1 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_purr.gif");
}
.block2 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_walk.gif");
}
</style>
</head>
<body>
<div class="box box1">
<div class="block block1"></div>
</div>
<div class="box box2">
<div class="block block2"></div>
</div>
</body>
</html>