svg или png что лучше для сайта
Почему нужно использовать SVG графику на сайтах
Уже трудно себе представить современные сайты без иконок и вообще без графики. Вся графика, которую мы видим на сайтах может быть растровой (JPG, PNG) или векторной в SVG формате. К сожалению, фотографии или рисованные иллюстрации мы не можем отобразить на сайте в виде SVG кода. Но если есть выбор, то всегда нужно выбирать именно SVG формат.
Преимущества SVG
1) Сравнение веса
Для сравнительного анализа скачаем с сайта flaticon.com две одинаковых иконки в PNG и SVG формате.
Мы видим, что размер файла tag.png составляет 27 КБ. В то время, как tag.svg весит всего лишь 6 КБ, что в четыре раза меньше. Как правило на странице сайта, используется десяток иконок. И при каждой загрузке страницы, только за счет иконок, сайт вынужден будет загружать около 300 килобайт.
Как вставить на сайт SVG иконку
SVG иконка представляет из себя трудночитаемый XML код, состоящий из координат линий и кривых. Не пугаемся и сохраняем спокойствие, мы достанем оттуда кое-какую информацию и запишем ее в HTML файле.
В HTML файл вставим два обязательных тега. Сделаем svg тег невидимым, копируем параметр viewBox и вставляем в тег symbol. Затем добавим идентификатор с любым осмысленным названием. Далее копируем из tag.svg все содержимое тегов path + circle и вставляем между тегами symbol. Это будет очень много кода, поэтому я не буду его сюда вставлять.
Ниже вставляем этот код, указав идентификатор иконки.
В итоге иконка появилась на HTML странице.
Как управлять SVG иконкой?
Добавим к тегу svg класс tag-icon и можем стилизовать ее как обычно, через CSS свойства.
Например позиционировать, изменять размер и цвет.
.tag-icon <
width: 100px;
height: 100px;
fill: rgb(230, 19, 107);
>
2) Масштабирование без потери качества
Вставим на сайт иконку, как растровую картинку и увеличим ее размеры в 10 раз. Края изображения стали неровными.
img <
width: 3000px;
height: 3000px;
>
Проделав тоже самое с SVG изображением, края остаются таким же ровными, как и у оригинального размера. Масштабирование никак не влияет на качество.
3) Возможности анимации безграничные.
Попробуем поменять цвет у иконок при наведении на более светлый. Посмотрите, как легко реализуется данный эффект у SVG иконки.
.tag-icon:hover <
fill: darkorange;
cursor: pointer;
>
При наведении на PNG иконку меняется цвет фона, а не самой иконки.
img:hover <
background-color: darkorange;
cursor: pointer;
>
Посмотрите пример на CodePen
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
2019 год — Модный, стильный и прогрессивный год дизайна, не так ли? Ещё в 2010 году разработчики не задумывались и выбирали для своего логотипа текстовой формат или же графический, разрешения JPEG или PNG. Однако не так давно многие пересмотрели свою точку зрения с вошедшим в моду «SVG», это новый вид который используется веб-мастерами и дизайнерами.
Оба формата поддерживают прозрачность и имеют неплохое качество, хотя SVG в нём выигрывает, помимо этого SVG не «пикселится», а так же является кодом, который всегда и везде возможно редактировать, даже в консоли браузера зайдя в CSS, разве не классно? Но, не спешим торопиться.
У SVG есть ограничения. Как и у любых других форматов, это логично. SVG рассчитывается математически — это значит, что формы и цвета всегда будут в порядке. Но растровые артефакты (т.е фотографические элементы) все равно не будут масштабируемыми, при этом будут занимать кучу места.
Тем самым если Вам настолько важна загрузка сайта (а она важна) — не стоит пихать все картинки SVG форматом.
Если же говорить о JPEG — то использовать его отлично если нужно сжимать изображения, ведь он отлично сжимается, но если Вам нужны прозрачные элементы, качество — забудьте о данном формате, используйте его для картинок публикаций на Вашем сайте, там он отлично подойдёт
А что, если мне нужно разработать сайт для экранов с разными разрешениями, в том числе и с 1920 на 1080, но SVG мне не подходит?
Ответ прост: используйте PNG, он так же отлично подойдёт, так как имеет высокое качество, а так же поддерживает прозрачность.
Вывод.
Если Вы действительно хотите следовать тренду и иметь красивый сайт — используйте SVG формат как минимум для логотипа, это сделает его более приятным, красивым и подчеркнет Ваш проект. Но! Не пихайте его везде — это увеличит время загрузки Вашего сайта, а анимации SVG формата — могут не поддерживаться на старых ОС Android и старых браузерах на подобии IE, что сделает логотип «не рабочим».
Удачи в Ваших начинаниях!
Оцените, данная информация была полезна для Вас?
SVG, Iconfonts vs PNG
Статья по мотивам Изображения в верстке. Хватит это терпеть. Скорее даже по мотивам комментариев к этой статье и в общем реакции хабра на призыв использования векторной графики везде, где можно и действительно нужно.
Признаться, я был немного удивлен реакцией на такие мысли в 2014-м то году. По этому случаю рассмотрим более детально существующие техники работы с иконками.
На текущий момент все более-менее просто. Мы можем верстать иконки с помощью SVG, создавать иконочные шрифты, ну и никуда не делась старая добрая техника с применением растра, в частности PNG. Правда добавились некоторые нюансы с появлением кучи HDPI устройств с совершенно разной плотностью пикселей.
Самую бурную реакцию вызвало именно применение SVG. Сначала юзер franzose заметил что:
Только вот вес у сложного вектора гораздо больше. И шансов подвесить браузер тоже
Так как в статье речь шла преимущественно о иконках — такой коммент для меня совершенно непонятен. Да, я сам несколько раз получал от дизайнера ужасные иконки, которые представляли собой нагромождение примитивов, налепленных друг на друга. Но ничего не мешает подойти к дизайнеру и сказать, — “что за херня, мужик?!”, ну или самому зафиксить это дело в том же иллюстраторе, объединив в какой-нибудь общий shape (ну это конкретно мой случай, других “сложных векторов” я не видел пока). Еще для этих целей можно использовать SVGO. Кажется объединение в общий shape — это единственная его часть, которая действительно драматически влияет на производительность.
На самом деле даже если забыть про все эти вещи с иконками — я не могу представить какого-нибудь хоть минимально часто встречающегося кейса про “сложный вектор”. Да все равно вектор, применительно к задачам сегодняшнего веба будет меньше растра (это про вес).
Все мы понимаем что есть задачи, где это все же случается, но в таких случаях разработчики думают несколько другими категориями. Нужно например отобразить какую-нибудь огромную, сложную схему на небольшой площади, ну и будет подход вроде “что-то SVG-ха под мегабайт у нас выходит, коллега, давайте ка мы ее на сервере растрируем”. Тайлы те же на картах.
Потом пришла куча юзеров и крайне негативно высказалась по части производительности SVG как такового. Дескать все катастрофически хреново, десктопный браузер на 3-х с половиной SVG безбожно тормозит на скролле, мобильные устройства взрываются в руках.
На самом деле я считал что абсолютно во всех браузерах SVG, прилепленный через background-image кэшируется по самое нехочу. Мы ведь именно об этом случае говорим? На практике все оказалось немного сложнее.
Я пообщался с парой людей, которые занимаются SVG частью в Chrome и Firefox и показал им вот это демо, которое Adrian Osmond делал еще год назад для, в принципе, таких же целей. Но тогда все было на порядки хуже. Почему, можно почитать в его статье и багтрекере вебкита.
Chrome
FPS проседает примерно раза в полтора, два. Печально конечно, но не 10x все же. Так что же происходит под капотом Хрома в этот момент?
Я немного почитал исходники на chromium.org, нашел кое-какой кэширующий код для SVG, и это меня запутало еще сильнее. Тут я решил спросить у знающих людей.
Philip Rogers из Google, который в общем то и пишет большую часть всяких дел с SVG в хромиуме, сказал что различия отрисовки SVG и PNG несколько сложнее. Во-первых PNG декодируется в отдельном потоке, а SVG в главном, а во-вторых помимо производительности есть еще такие вещи, как например, память. В общем они решили отказаться от хранения кэша для svg чтобы сэкономить памяти. Как по мне — так это какой-то сомнительный план. Не совсем понимаю почему бы не кэшировать все это дело. Bitmap, которым заканчивается рендер не будет каких-то неприличных размеров, с сегодняшними то объемами памяти, даже на мобильных устройствах. Ну и грядет же вектор, тема перспективная. Но видимо поэтому в Google работают они, а не я.
Так что да, в хроме SVG отсчитывается заново каждый фрейм. Правда Philip сказал что они там что-то придумали, что “should bring it much closer to png performance”. Будет в следующей Canary. Посмотрим. Тем не менее производительность на уровне чуть меньшем чем 60 FPS (а у меня в общем средний такой конфиг) на огромной куче иконок одновременно находящихся на экране — это вполне себе адекватная производительность.
Firefox
Я не знаю чем померить FPS в FF (видел какую-то софтину, но процесс инсталляции был не совсем тривиален и я не стал возиться), но на глаз производительность PNG и SVG одинаковая. Так же думает и Robert Longson, контрибьютор SVG в Firefox. По словам Роберта, в Firefox есть кэш для всех изображений и разница между SVG и PNG может заключаться разве что в том, что SVG немного дольше “декодируется” при первой отрисовке, что вполне закономерно.
Таким образом в FF мы вообще имеем идентичную производительность, если не производим каких-либо манипуляций инвалидирующих SVG кэш. Естественно, скролл ничего не инвалидирует. Возможно есть еще какие-то моменты, но драматически производительность они ухудшить не могут.
Новые IE часто бывают очень хороши во всяких неочевидных местах, например WebGL. Тут такая же ситуация. В IE демо работает намного лучше чем в 2-х предыдущих браузерах, показывает одинаковый framerate для SVG и PNG. Но делает это по каким-то магическим причинам не сразу.
К сожалению я не знаю кто занимается разработкой SVG в IE, а в багтрекер писать сомнительно как-то такие вещи, поэтому эта часть останется без комментариев с другой стороны.
По части вещей вроде SVGO — я отношусь к ним довольно скептически. Не знаю на какую долю процента ускорится рендер при немного более быстром парсинге, но на мой взгляд — это штука сомнительная. Т.е. конечно да, какой-то профит есть, но минимальный.
С практиками верстки SVG все более-менее понятно. Я предпочитаю рисовать SVG спрайты. Техника такая же как и для растровых спрайтов. Проблемы решаемые ими в принципе такие же. Естественно есть куча разных плагинов для этих целей, например вот.
Еще можно делать это с помощью data url. Тут я рекомендую вот такую штуку и их же софтину вот тут, для тех, в чей процесс Grunt по каким-то причинам не входит. Ну еще можно прям файлами на background-image, но не нужно.
Единственный современный браузер где я видел проблемы с рендерингом SVG — это IE на Windows Phone. Но там эта проблема решаема.
Iconfonts
Если в SVG мы в принципе можем нарисовать все что душе угодно, то с помощью шрифтов ограничены монохромными иконками (если не брать во внимание извращения вроде stackicons), что в рамках текущих веяний в дизайне не представляется таким уж недостатком. Зато перед нами открывается куча возможностей начиная от банальной смены цвета и размера, заканчивая пачкой CSS манипуляций с шрифтами, вроде тенюшек и т.д.
Техника с иконочными шрифтами сложнее чем те же SVG. Тут нужно обладать некоторым объемом знаний в областях, где не каждый дизайнер ориентируется. Казалось бы, делов то, запихай свои SVG-хи в один из кучи онлайн-упакавщиков типа того же Icomoon-а или настрой какой-нибудь Grunt\Gulp плагин, и будет тебе счастье.
В комментариях к статье главным обвинением относительно шрифтов было что-то вроде
рендеринг ужасный в мелких размерах (явные лесенки) (с) designiac
А что вы хотели, ребят? Нарисовать огромную иконку приблизительно кегля так 48-го, проработать мелкие детали, потом воткнуть ее кеглем так 12-м и вместо удивления о каком-то плохом рендере этих ужасных вебшрифтов, наслаждаться идеальными чистыми иконками?
Хинтинг!
Вот основная вещь, которую нужно знать про iconfonts. Вот он, святой грааль иконок в вебе! Я считаю что если вы точно знаете что скажем, цвет иконок или их размер не изменятся (вероятно бывает и такое), нужно брать SVG и не морочить голову. Использовать шрифты без необходимости — какой-то не очень критичный конечно, но все равно overhead.
Чтобы было понятно зачем нам это вообще нужно — вот такой пример: берем модный Font Awesome и одним хинтом делаем из вот такой иконки pinterest:
Лучше всего видно на мелком кегле, естественно.
С наступлением эры HDPI устройств заморачиваться с этими вещами фронтэндеру возможно скоро не придется вообще, потому что хинтировать глиф в такой ситуации:
немного сложнее чем в такой:
Я не тот человек, который может авторитетно написать о хинтинге, поэтому делать этого не буду. Буду рад если придет серьезный шрифтовик и напишет детальную статью. Нужно просто брать во внимание то, что он (хинтинг) существует. И это не шрифты криво рендерятся, это некоторые разработчики не хинтируют их совсем, или лепят автохинты (которые, надо сказать, неплохо спасают временами).
Субпиксельное сглаживание
Ну, все что нужно знать о субпиксельном сглаживании — это то, что оно есть. Версию назад с этим были проблемы в хроме, но сейчас все работает так, как должно.
Недостатки растровой графики с такой необходимостью учитывать HDPI устройства, какая есть сейчас — очевидны. Возможно, если бы плотность ограничивалась 2 вариантами ретина\не ретина — это было бы достойным вариантом, и мало кому в голову пришло бы заморачиваться со всеми неоднозначностями вектора, существующими сейчас в вебе. Но у нас есть 1.5x, 2x, 3x устройства. И собирать спрайты под каждое из них уже не кажется достаточно изящным вариантом.
С другой стороны у растра без потерь есть достоинство, которое, лично для меня, перекрывает все недостатки в обслуживании — он стабилен. Можно быть точно уверенным в том, что как ты иконку нарисуешь — так она и будет выглядеть в итоге. Пиксель в пиксель. Вопрос лишь в том, нужна ли такая точность в каждом конкретном случае.
Я работаю над системой мониторинга и управления всяким серьезным оборудованием, вроде электрических подстанций или котельных. У нас есть солидная пачка иконок, обозначающих те или иные неисправности на объектах. Причем иконки эти встречаются в разных местах, разного размера и разного цвета. И мы на самом деле убили бы кучу времени, если бы делали все это в PNG, еще и под HDPI.
В общем я не совсем понимаю зачем в текущих условиях однозначно отказываться от таких вкусных техник как шрифты, да и вектор в целом. Есть моменты конечно, вроде того же решения в хроме отказаться от кэша, но в целом с производительностью и качеством рендера все в порядке. А если перестать теоретизировать и глянуть на стандартные задачи, так вообще выйдет пара кейсов, где стоит посмотреть в сторону растра.
Так вот, зачем я все это написал? Я предлагаю юзерам, негативно отозвавшимся о производительности и рендере векторных иконок, в том посте, с которого все началось, или сочувствующих им и их точке зрения, пари.
Вы предоставляете мне верстку или какой-то конкретный сайт (что лучше), иконки на котором сейчас заверстаны в PNG и под ретину и под простые дисплеи, исходники иконок которого у вас есть в векторе, который при любых эффектах выдает 60FPS на средней машине. Сразу оговоримся что объективно это должен быть обычный сайт. Не онлайн софтина по работе с иконками и не пример из этой статьи.
Я заменяю растр на вектор и оптимизирую какими хочу способами.
В итоге должна получиться страница, на которой FPS проседает не больше, скажем, 30%. О дальнейших условиях договоримся в процессе. Как вам? Докажем ущербность SVG?
Спрайт (png, svg) или отдельные изображения — что лучше для SEO?
Приветствую.
Есть на странице сайта раздел брендов — ссылки. Выглядит примерно так: 
Думаю о том, как лучше сформировать изображения брендов и не прихожу к какому-то определенному умозаключению. Вариантов несколько и какой выбрать — вопросище!
1. Внуть ссылки вставить изображение (a > img)
Будет подгружаться много изображений. Нагрузка. Вероятно, лучше для SEO, так как есть конкретные изображения брендов.
2. Добавить для ссылок фон (png).
Вариант жрет меньше ресурсов. Нет отдельных изображений брендов, вероятно, хуже для SEO, чем отдельные картинки. Возможны два варианта: каждой ссылке отдельный файл фона или брать из спрайта.
3. Добавить внутрь ссылок вектор (svg).
Засоряет страницу лишним кодом, но для каждого бренда есть своя конкретная картинка, но понимает ли ПС что на SVG?
4. Добавить внуть ссылок фон (svg).
Жрет мало ресурсов, всегда выглядит опрятно. Нет отдельных изображений и хуже для SEO, вероятно — ПС лучше понимает конкретные изображения. Возможны два варианта: каждой ссылке отдельный файл фона или брать из спрайта
SVG подход, если использовать спрайт, нравится больше по работе с ним (добавлять, менять + выглядит норм — не размывается на ретина дисплеях), но кажется, что первый вариант для SEO лучше (много разных картинок, а чем их больше, тем лучше, вероятно), если бы не делал столько отдельных запросов для каждого изображения, а много запросов могут отрицательно повлиять на SEO (сайт будет дольше подгружаться). в общем, ребята, какой-то замкнутый круг.
Поделитесь своими знаниями, мыслями, наблюдениями, опытом: что лучше и когда использовать? Отдельные png/svg, отдельные фоновые png/svg или спрайте png/svg.
GIF, PNG, JPG или SVG: что использовать?
Дата публикации: 2017-03-02
От автора: если вы только что не выпрыгнули из дымящегося Делориана прямиком из 1985 года, то вам должен быть знаком самый бестолковый формат в интернете — GIF (Graphics Interchange Format). GIF – формат растровых изображений. Однако в отличие от JPEG и PNG этот формат файлов ограничен цветовой палитрой в 256 цветов. По сути, в каждом GIF изображении предустановлен «бокс с цветными мелками», и вы не можете получить новый цвет путем их смешивания.
Может показаться, что 256 цветов это много. Для сравнения в сложных фотографиях тысячи оттенков. В процессе преобразования в GIF диапазон цветов сильно сужается, и это основная причина не использовать GIF для цветных фотографий.
GIF плохо подходит для изображений с широким диапазоном цветов, но ограничение в 256 цветов может помочь сохранить низкий вес файла, что идеально подходит даже для самых медленных соединений. На протяжении долгого времени только GIF имел функцию прозрачности. Сейчас она есть в PNG и SVG.
Категория: без потери качества
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
графика с низкой вариацией пикселей (т.е. монотонные цвета типа логотипов и флагов).
В зависимости от вашего предпочтения вы можете использовать этот формат в виде «JPEG» или «JPG» — оба являются приемлемыми вариантами одного акронима — Joint Photographic Experts Group.
В отличие от GIF формат JPEG 16-битный, т.е. он умеет смешивать красный, синий и зеленый. Это позволяет отображать миллионы цветов и делает его очень дружелюбным к фотографиям. Отчасти так сложилось потому, что это стандартный формат, в большинстве цифровых камер на рынке.
JPEG позволяет гибко настраивать степень сжатия изображения: от 0% (сильное сжатие) до 100% (без сжатия). Как правило, 60%-75% хватит, чтобы значительно снизить вес файла, сохраняя отличное качество на большинстве экранов.
JPEG хорошо подходит для сжатия и рендеринга фотографий, но это тип сжатия с потерями. То есть он мало подходит для постоянного редактирования изображений. Экспорт в JPEG приводит к потере качества, и потери становятся все больше с последующими экспортами. Поэтому профессиональные фотографы в основном снимают в формате без потерь RAW.
Также в отличие от GIF и PNG формат JPEG не сохраняет прозрачность.
Категория: с потерями качества
изображения со сложными цветами и динамикой.
В отличие от GIF и JPEG формат PNG (Portable Network Graphics) более новый. Благодаря двум версиям формат похож на микс GIF и JPEG.
PNG-8 сильно похож на GIF и использует также цветовую палитру в 256 цветов (максимум). У него чуть лучше прозрачность и чуть меньше вес файла. Однако в PNG-8 нет функции анимации.
PNG-24
PNG-24 позволяет рендерить изображения с миллионами цветов, почти как JPEG, но также сохраняет прозрачность.
PNG-24 – формат без потерь качества, что увеличивает вес файлов. Если качество изображений важнее веса файлов, PNG-24 лучший выбор. Сервисы типа TinyPNG.com зачастую могут сильно снизить вес файла.
По сравнению со своим сводным братом JPEG, PNG-24 не являются универсально совместимыми со всеми приложениями и платформами, что делает формат неподходящим для совместного использования в сети. Тем не менее, формат можно редактировать без потерь качества.
Категория: без потерь качества
веб-графика с прозрачностью;
сложные фотографии с множеством цветов и графика;
изображения, которые необходимо повторно редактировать и экспортировать.
В отличие от трех форматов выше SVG (Scalable Vector Graphics) – не чисто растровый формат. Это векторный формат, близкий к AI в Adobe Illustrator и EPS. Векторная графика постепенно приобретает популярность в сети и у UI дизайнеров.
Иногда удобно представлять SVG как «HTML для иллюстраций». Этот формат немного отличается от других.
SVG лучше всего подходит для отображения логотипов, иконок, карт, флагов, графиков и другой графики, созданной в векторных графических редакторах типа Illustrator, Sketch и Inkscape. SVG написан на XML разметке, его можно редактировать в любом текстовом редакторе, а также с помощью JS и CSS. Векторная графика масштабируется под любой размер без потери качества, что идеально подходит для адаптивного дизайна.
SVG – векторный формат, однако в него можно (часто так и делается) вставить растровую графику точно так же, как JPEG вставляется в HTML.
Вставить изображение можно по URL (как ссылка на JPG на странице) или с помощью инкапсуляции пиксельного изображения в виде Data URI. Это делает SVG максимально гибким и мощным форматом.
SVG сохраняет хорошую картинку на сайте, но это не тот формат, который обычный пользователь сможет сохранить и загрузить через сайт или социальные сети.
Мне нравится, что есть маленькие хостинги SVG, однако я на 99% уверен, что следующие 5 лет только GitHub будет SVG-friendly. При использовании SVG в веб-дизайне почти всегда можно сжать вес файла в отличие от JPEG и PNG. Но чем сложнее SVG, тем больше вес файла.
Категория: векторная графика/без потерь качества
логотипы и графика в веб-дизайне;
Сравнение
Мы узнали про отличия популярных форматов, теперь пора сравнит их лицом к лицу. Ниже вы увидите, как GIF, JPEG, PNG и SVG обрабатывают изображения с простыми и сложными цветами, а также изображения.
Графика с монотонными цветами
Первый тип, который мы рассмотрим – графика с монотонными цветами. Она покрывает большую часть логотипов и брендов, иконок, простых карт, графиков и диаграмм. Исходный размер изображения 23.4 Кб с разрешением 1280 х 1280.
Ниже показано сравнение веса файлов и качество. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
JPEG 100% (без сжатия): 53.3 KB
SVG: 6 KB (чистая векторная графика)
В случае с этим изображением не заметно больших потерь качества при сравнении шести форматов. Хотя можно заметить небольшие артефакты по краям сжатого JPEG.
Не всегда все будет так с графикой с монотонными цветами, но в большинстве случаев проблем с такими изображениями не возникнет. Для этого изображения наилучший вариант при условии, что у нас есть оригинал – SVG с весом в 6Кб. Если векторной графики нет, на замену можно использовать PNG-8. Вес файла снижается с 23,4Кб до 11,8Кб.
Изображения со сложными цветами
Оригинал – 328Кб JPEG с разрешением 1280 х 960. Ниже показано сравнение веса файлов и качества. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.
У нас нет векторной версии этого изображения, поэтому любая SVG версия будет представлять собой просто JPEG внутри SVG. Этот формат здесь будет лишним.
JPEG 100% (без сжатия): 776 KB
Изображения со сложными цветами лучше выглядят в JPEG, PNG-24 и SVG. Цвета по большей части сохраняются, и нет этих страшных колец и шума, который обычно вылезает в GIF и PNG-8.
Цветные фотографии
Оригинал – 215Кб JPEG с разрешением 1280 х 710. Ниже показано сравнение веса файлов и качества. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.
SVG здесь также мало что даст.
JPEG 100% (без сжатия): 90 KB
Как и со сложными изображениями, фотографии лучше всего сохранять в JPEG, PNG-24 или SVG. В фото сверху цвета сохраняются во всех форматах кроме PNG-8 и GIF, где вылезают кольца и шум в тени волос, на заднем фоне, а также в верхней части фото.
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!