Что лучше css или gif

JPEG или PNG – У какого формата лучшее качество?

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

jpg vs png

Какой формат файла выбрать?

Формат GIF ограничен 256 цветами. Это формат без потерь и при его использовании достигается минимальное сжатие изображения. Формат GIF поддерживает анимацию (единственный из всех форматов) и прозрачность, но полупрозрачные картинки сохранить в нем не получится. За счет особенностей алгоритма, он очень хорошо сжимает изображения, в котором есть вертикальные линии (для веба, например, это могут быть вертикальные разделительные полосы, одноцветные иконки, графические точки и пр.).Он может быть использован для хранения чертежей, текстовой и знаковой графики в небольшом размере файла.

Формат PNG является форматом, в котором сжатие происходит без потерь. В этом форматена каждый пиксел приходится 3 цветовых канала (RGB – красный, зеленый, синий), тем самым реализуется полноцветное формирование изображения без искажений. По качеству цветового отображения формат PNG может превосходить JPG, но по размеру файла будет также больше. Формат PNG поддерживает разные уровни прозрачности (полупрозрачность). За счет особенностей алгоритма, он очень хорошо сжимает изображения, в котором есть горизонтальные линии. И когда стоит задача выбрать сохранение файла в формате GIF или PNG, для случаев, когда картинка представляет из себя примитивные линии, стоит обращать внимание на положение этих линий – т.е. в формате GIF стоит сохранять изображения с вертикальными линиями, в PNG – горизонтальными. PNG является хорошим выбором для хранения чертежей, текст и знаковых графики в небольшом размере файла.

Формат JPG является форматом, в котором есть потери цвета. Алгоритм работы в этом формате такой, что в нем очень хорошо сжимаются изображения с градиентами (сохраняются цвета первого пикселя в градиенте и последнего, а при выводе изображения – все промежуточные цвета между этими точками вычисляются), что делает его полезным для хранения изображений в меньшем размере, чем в формате BMP. Фотографии, переливы, логотипы, бекграунды и пр. лучше сохранять в формате JPG.

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

APNG vs GIF. Что лучше?

Я использую GIF -файлы для этих небольших загрузочных изображений. Работали отлично, за исключением случайных проблем с прозрачностью и 8-битными цветами. Теперь я узнал о APNG недавно. Но не знаю, стоит ли мне им пользоваться. Достаточно ли у него поддержки браузера? А как насчет размера файла? Большое gif-изображение уже имеет большой размер файла.

4 ответа

Что будет лучше масштабироваться для производительности, размера файла (и моего здравомыслия): анимированные .gif s или Спрайт-лист с анимацией с использованием CSS (и JS, когда это необходимо)? Размер файла Так что, честно говоря, я не уверен, что здесь будет лучше, так как я не понимаю сжатия.

У меня есть анимированное изображение GIF. Я помещу его в прозрачное наложение на своей странице html. Есть ли какой-нибудь способ сгладить изображение (края довольно шероховатые, они отлично смотрятся в psd) и есть ли ANY способ загрузить APNG в IE 6,7,8.

Я думаю, что APNG лучше. Поскольку он поддерживает 24-битную и 8-битную прозрачность. Кроме того, он также поддерживается такими браузерами, как Mozilla Firefox, Chrome, Safari (см. https://caniuse.com/#feat=apng ).

Анимированный PNG лучше, чем GIF, если мы сосредоточены на размере файла – достижение меньшего размера файла было одной из причин, по которой был разработан формат APNG. В этих тестовых данных сравнения изображений вы можете видеть , что APNG меньше, чем GIF для каждого изображения.

Сейчас (июнь 2016 года) поддержка браузеров больше , чем когда был задан этот вопрос. iOS Safari теперь поддерживает APNG (начиная с версии 8) – это довольно большая база пользователей. Таким образом, вы можете обслуживать APNG для Firefox рабочего стола и Android, Safari рабочего стола и iOS, а также обслуживать GIF для всех других браузеров.

У Кори Дауди есть несколько хороших сравнительных данных , в том числе анимированные веб-страницы.

UPDATE 2018-12-4: Chrome, Opera и desktop Safari теперь поддерживают анимированный PNG. Это было верно в течение нескольких месяцев.

Apng-это лучший формат. GIF и apng оба без потерь, но apng, как правило, меньше, а качество лучше (больше цветов и возможность прозрачности), К сожалению, apng в значительной степени не поддерживается, но это может измениться. Надеюсь, apng поймет.

Времена изменились, пожалуйста, смотрите ответы ниже!

Я бы определенно остановился на GIF. Я никогда раньше не слышал о APNG, но, судя по моим исследованиям, это звучит так, как будто это почти единогласно не поддерживается. Похоже, что Internet Explorer и Chrome не поддерживают его, и это просто кажется бесполезным для большинства пользователей. Даже если он будет поддержан, и мои исследования по этому вопросу были ошибочными, это все равно будет только самая последняя версия или две. И для чего-то, где есть очень жизнеспособная альтернатива, я вряд ли считаю, что этот риск того стоит. И я точно знаю, что моя последняя версия IE не работала ни с одним из примеров файлов APNG, с которыми я столкнулся.

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

Похожие вопросы:

После поисков по этому поводу я нашел два интересных ответа: Поддержка собственных форматов изображений для javaFX управление gif-изображением с помощью javaFX но, как я вижу, javaFX не поддерживает.

Где я могу найти некоторые ожидающие / загружающие прозрачные gif / APNG анимации, но анимацию, которая действительно прозрачна без каких-либо цветных линий вокруг фигур, которые я нашел на.

Меня, наверное, за это распалят. Мне интересно, знает ли кто-нибудь какой-нибудь способ загрузить APNG (анимированный PNG) внутри приложения iPhone? Я не говорю о множественном изображении PNG.

Что будет лучше масштабироваться для производительности, размера файла (и моего здравомыслия): анимированные .gif s или Спрайт-лист с анимацией с использованием CSS (и JS, когда это необходимо).

У меня есть анимированное изображение GIF. Я помещу его в прозрачное наложение на своей странице html. Есть ли какой-нибудь способ сгладить изображение (края довольно шероховатые, они отлично.

Я пытаюсь отобразить анимированный png (известный как apng ), добавив изображение к JLabel , как обычно. Это прекрасно работает с обычными gif -анимациями,однако я бы предпочел иметь возможность.

Мне интересно, поддерживает ли QT5 анимированный PNG (APNG)? Если да, то как с ним будут работать? Я знаю, что он поддерживает анимированный gif, и я должен использовать QMovie для отображения.

Где я могу найти бесплатную ожидающую / загружающую прозрачную анимацию GIF/APNG, аналогичную той, которая используется в Windows 8 / Server 2012 (т. е. при входе в систему, перезапуске, выключении.

Я получаю некоторые проблемы, связанные с файлом APNG, анимация файла APNG работает идеально, если я помещаю файлы APNG в ресурс bundle, но когда я загружаю тот же файл APNG с сервера активов и.

Мне трудно понять, как информация о палитре обрабатывается в APNG анимах, использующих тип PNG_COLOR_TYPE_PALETTE , потому что, по-видимому, документации практически нет. Все тестовые анимационные.

5 CSS свойств для изображений, которые вам необходимо знать

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

Однако, существуют другие свойства, которые используются не так часто и применяются непосредственно к изображениям (тегу <img />). Использование тега является наиболее предпочтительными способом размещения изображений на страницах.

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

Давайте рассмотрим каждый из них подробнее.

Усиление резкости изображений с image-rendering

Поддержка браузерами — 90,82% (на 11.2017)

При масштабировании изображения браузер сглаживает его, чтобы оно не выглядело пиксельным, но в зависимости от разрешения изображения и экрана, результат не всегда получается приемлемым. Вы можете контролировать поведение браузера при сглаживании изображения с помощью свойства image-rendering .

Это широко поддерживаемое свойство контролирует алгоритм, применяемый браузером при масштабировании. Оно имеет 2 значения: crisp-edges и pixelated .

Значение crisp-edges удерживает цветовой контраст между пикселями. Другими словами, никакого сглаживания не производится, что отлично подходит для создания контраста.

Когда используется pixelated, соседние пиксели определенного пикселя объединиться с ним, создавая впечатление, будто они образуют один большой пиксель, отличный для экранов с высоким разрешением.

Если вы внимательно посмотрите на края цветов на gif-изображении, представленном ниже, вы сможете увидеть разницу между изображениями: обычным и с примененным CSS-свойством image-rendering: pixelated .

Растягивание изображений с помощью object-fit

Поддержка браузерами — 89,7% (на 11.2017)

Значения contain, cover, fill похожи на аналогичные значения свойства background-size, которое указывает как фоновое изображение заполняет какой-либо элемент. Свойство object-fit очень похоже на упомянутое выше свойство background-size, так как оно также определяет размер изображения внутри его контейнера. Значение contain масштабирует изображение внутри контейнера. Cover делает тоже самое, но если соотношение сторон изображения и контейнера не совпадают, изображение обрезается. Fill заставляет изображение растягиваться и заполнять его контейнер. scale-down уменьшает изображение чтобы оно поместилось внутри контейнера.

Сдвиги изображений с помощью object-position

Поддержка браузерами — 89,7% (на 11.2017)

Аналогично дополняющему background-position свойству background-size, существует свойство object-position , которое дополняет object-fit . Свойство object-position позволяет сдвинуть изображение внутри его контейнера. Координаты можно указывать в абсолютных и относительных величинах, использовать ключевые слова или комбинировать различные значения ( top 20px right 5px, center right 80px ).

Выравнивание изображений с помощью vertical-align

Иногда мы добавляем тег <img /> (который по своей природе является строчным элементом) внутрь текста в качестве иллюстраций или для украшения. В таких случаях выравнивание изображений и текста в необходимом нам положении может стать сложной задачей, если вы не знаете какое свойство применить.

Свойство vertical-align применяется не только в ячейках таблиц. Оно также может выравнивать строчные элементы, родителями которых также являются строчные элементы, поэтому с его помощью мы можем выровнять изображение внутри строки текста. У этого свойства имеется довольно много значений, которые можно применить к строчным элементам, поэтому вам будет из чего выбрать.

Добавляем тень, используя filter: drop-shadow()

Тени, применяемые к тексту и блочным элементам, могут сделать ваши страницы более привлекательными. То же самое относится и к изображениям. Значения, которые передаются filter: drop-shadow() очень похожи на значения CSS-свойств для создания тени ( text-shadow, box-shadow ). Первые 2 указывают вертикальный и горизонтальный отступ тени от изображения, третий и четвёртый – степень размытия и радиус распространения тени, а последнее, пятое значение – цвет тени.

Как text-shadow и drop-shadow тень добавляется к объектам, к которым применяется этот фильтр. При использовании filter: drop-shadow() к изображениям во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

Добавить комментарий

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