Форматы или расширения изображения для сайта

Форматы или расширения изображения для сайта

09.07.2019
Рейтинг: 5/5 - 1 голосов

 

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

png

 

От JPG к PNG

Долгое время изображение с расширением jpeg считаются лидирующими как по качеству, так и по сжатию. На мой взгляд будет правильнее использовать jpg для фонов и картинок больших форматов. Потому как для веба критично загружать большие объемы информации и чем меньше весит изображение, тем быстрее отрендерится страница сайта, а jpeg в этом бесспорный лидер. У него очень хорошее качество, при масштабировании приемлемое количество артефактов и он весит меньше png.

Почему png, если он такой тяжелы? Все просто, у png есть альфа-канал! Пожалуй самая главная причина чтобы использовать именно его, а не предшественника. Альфа-канал создает прозрачность, что позволяет накладывать изображение на фон и получать запланированные эффекты. Так же технология сжатия png позволяет добиться более качественной картинки, в отличие от jpg. Png-ые лучше использовать для детализации элементов дизайна, картинки меньшего разрешения, иконки. Но фоновые или большие разрешения фотографии для сайта в этом расширении лучше не использовать, разницы в качестве вы особенно не заметите, а вот весить они будут гораздо больше.

jpeg

 

От PNG к SVG

Другое дело обстоит с векторными изображениями. Они весят мало, не теряют качество при масштабировании, легки в использовании, а в вебе позволяют динамически управлять анимацией средствами javascript. Лучше всего svg использовать для иконок на сайте, фоновых анимированных изображений. Как я сказал ранее векторные картинки на то и векторные, потому как используют различные геометрические элементы в своем каркасе, а это значит что они не могу передать в подобающем виде фотографии и элементы требующие высокой детализации и реализма. В таком случае лучше прибегнуть к jpg или png.

svg

 

Пару слов о GIF

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

gif

Комментарии

коммент.

Написать комментарий

Ваш email не будет опубликован. Обязательные поля отмечени символом *


Роль шрифтов в современном веб-дизайне
14.05.2019
Рейтинг: 5/5 - 3 голосов
Градиент в дизайне
17.06.2019
Рейтинг: 5/5 - 1 голосов
Уходящие тенденции. Дизайн в стиле Flat
14.05.2019
Рейтинг: 4.5/5 - 2 голосов