Открыть список
Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Новый формат изображений WebP2 будет сжимать на 30% лучше, чем обычный WebP

Блог компании Intersect.HostРазработка веб-сайтовOpen sourceОбработка изображений


Сравнение сжатия WebP без потерь с различными кодерами PNG, источник: Smashing Magazine

Инженеры Google начали экспериментировать с новым форматом сжатия изображений WebP2, следующим поколением формата файлов WebP.

Общепризнанная поддержка WebP пока продвигается очень медленно. Например, браузер Firefox добавил поддержку WebP только в 2019 году в версии Firefox 65, а некоторые CMS (и Habrastorage) до сих пор полностью его не поддерживают. В результате многие сайты по-прежнему публикуют изображения в старых и/или проприетарных форматах GIF, JPEG и PNG, генерируя лишний трафик.
Читать дальше →
Всего голосов 16: ↑14 и ↓2 +12
Просмотры3.7K
Комментарии 17

WebP — новый формат картинок в интернете

IT-компании
По заявлению разработчиков, размер данных в этом формате получается в среднем на 39% меньше, чем исходник в JPEG, без видимых потерь качества (статистика из случайной выборки миллиона изображений, хранящихся у гугла).

Формат основан на контейнере RIFF и использует кодек VP8. В данном превью-релизе отсуствует поддержка альфа-канала, однако в будущем она обязательно появится. Помимо работы над различными улучшениями, разрабатывается патч для webkit, чтобы обеспечить нативную поддержку этого формата в Google Chrome.

Галерея изображений для сравнения форматов JPEG и WebP

Проект WebP — библиотека, конвертер, документация.
Всего голосов 80: ↑71 и ↓9 +62
Просмотры3.6K
Комментарии 67

WebP, новый формат изображений для интернета

IT-компании
Перевод
В рамках инициативы компании Google, заключающейся в том, чтобы сделать интернет более быстрым, в течении прошедших месяцев мы выпустили целый набор инструментов, призванных помочь владельцам сайтов их ускорить. Мы запустили расширение для Firefox под названием Page Speed, позволяющее изучать производительность веб страниц, а также получать предложения о том, как её увеличить. Мы представили Speed Tracer, расширение для Chrome, позволяющее найти и исправить проблемы с производительностью в веб приложениях. Кроме того, мы выпустили набор инструментов для завершающей стадии разработки (closure tools), призванный помочь создавать сложные веб приложения с польностью оптимизированным javascript-кодом. В то время, как эти инструменты были невероятно успешны, помогая разработчикам оптимизировать их сайты, мы продолжали работу, и нам удалось обнаружить единственный компонент веб страниц, который полностью ответственнен за большинство задержек на страницах: изображения.

Большая часть распространенных форматов изображений, используемых в сети, были созданы более 10 лет назад и основаны на технологиях того времени. Инженеры из Google решили проверить: нет ли способа увеличить степень сжатия алгоритмов сжатия с потерями (как JPEG), чтобы позволить изображениям загружаться быстрее, при этом полностью сохраняя их разрешение и визуальное качество. В результате работы на этим проектом мы выпускаем новый формат изображений, WebP, в предварительной версии для разработчиков. Этот формат обещает существенно уменьшить бинарный размер фотографий в сети, позволяя сайтам загружаться быстрее, чем раньше.
Читать дальше →
Всего голосов 99: ↑91 и ↓8 +83
Просмотры13.5K
Комментарии 78

Новая сборка Оперы — линейные градиенты, WebP, декларативный UI

Opera
Барракуда наконец-то начала показывать зубки, теперь в ней действительно уже понемногу появляется то, на что реально можно посмотреть.

В этой сборке появилась поддержка CSS3 градиентов — одна из немногих фишек CSS3, которых в Опере действительно сильно не хватало.

Правда есть тут и минус. Пока что градиенты воспринимаются только в префиксной нотации, то есть вида -o-linear-gradient, что увеличивает и без того немалое дублирование в css файлах. Очень хочется верить, что к релизу от префикса избавятся.

Также, в этой сборке добавили поддержку WebP — нового формата сжатия статических изображений, будем надеется, что он станет убийцей jpeg.

Также добавлен Declarative UI — синтаксис управления внешним видом оперы через .ini файлы. За подробностями можно обращаться в dialog.ini или в оригинальную заметку в блоге разработчиков Оперы.

И ещё, как заметили в комментариях, в этой версии добавлена поддержка SOCKS Proxy, пока что, правда пока что можно настроить только через opera:config#Proxy

Скачать

Всего голосов 30: ↑25 и ↓5 +20
Просмотры605
Комментарии 37

Новости формата WebP

IT-компании
Можно смело утверждать, что этой осенью формат WebP переживает второе рождение. Сообщения о новых возможностях следуют буквально одно за другим. Здесь я приведу перевод самых интересных новостей, касающихся формата WebP и перспектив его развития и поддержки. Топик сознательно не оформляется как перевод, так как данные приведены сразу из нескольких источников. Итак, полупрозрачность, сжатие без потерь, поддержка IE6+ и так далее!
Читать дальше →
Всего голосов 75: ↑73 и ↓2 +71
Просмотры2.1K
Комментарии 49

Галерея расширений Chrome перешла на WebP

IT-компании
image

WebP — это новый формат изображений, который был создан специально для использования в интернете, в качестве замены изображений формата jpg, png.

Этот формат сжатия изображений был разработан компанией google, и сегодня, компания решила запустить глобальное тестирование своего формата изображений — в своей галерее расширений.
Читать дальше →
Всего голосов 29: ↑23 и ↓6 +17
Просмотры14.7K
Комментарии 37

Дайджест интересных новостей и материалов из мира айти и веб-разработки за последнюю неделю №55 (27 — 5 мая 2013)

Блог компании Zfort GroupРазработка веб-сайтов
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


Читать дальше →
Всего голосов 41: ↑34 и ↓7 +27
Просмотры26.3K
Комментарии 2

Новинки Opera 19 для разработчиков

Блог компании Opera
Догоняя релиз Opera 19 для Андроида на прошлой неделе, выходит Opera 19 для Mac и Windows (на основе Chromium 32). Дальше о том, что это значит для разработчиков.

Промисы в JavaScript


Так называемые «промисы» (promises) теперь доступны в JavaScript. Промисы — это удобный способ получить доступ к результатам выполнения операций в JavaScript, будь они синхронные или асинхронные. Самый простой пример:

var promise = new Promise(function(resolve) {
	setTimeout(function() {
		resolve('The time machine worked!');
	}, 2014); // see what I did there?
});

promise.then(function(result) {
	console.log('Promise resolved.', result);
});

Джейк Арчибальд недавно написал подробное введение в промисы, так что не пропустите, если у вас остались вопросы или стало интересно посмотреть на другие примеры.
Читать дальше →
Всего голосов 62: ↑36 и ↓26 +10
Просмотры29.7K
Комментарии 169

Загрузка и хранение фотографий в Web приложениях

Блог компании .ioPHPОбработка изображений

Почему это важно?


На современных web сайтах объем картинок может составлять от 30% до 70% всего размера страницы. Например, объем изображений на Хабре обычно составляет несколько мегабайт.

размер фоток на странице

Большинство изображений в Web'e — это фотографии. Профильные фото в соц. сетях, альбом с телефона, профессиональные снимки и т.п. Правильная стратегия и инструменты для работы с фотографиями позволят сделать сайт быстрым для посетителей.
Читать дальше →
Всего голосов 35: ↑31 и ↓4 +27
Просмотры85.6K
Комментарии 81

JPEG 2000, JPEG-XR и WebP в стране упущенных возможностей

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



Попробуем разобраться, почему JPEG 2000, JPEG-XR и WebP все еще пасут задних, и действительно ли они такие классные, как заявлено.
Читать дальше →
Всего голосов 40: ↑34 и ↓6 +28
Просмотры71.1K
Комментарии 34

Сравнение анимации GIF, WebP, APNG, BPG

Блог компании .ioОбработка изображений
Чтобы создать эффект движения нужно повторить слегка измененную картинку с достаточно высокой скоростью. Например в кино эта скорость составляет 24 кадра в секунду. Чем она выше, тем движение выглядит плавнее.

image
Читать дальше →
Всего голосов 21: ↑14 и ↓7 +7
Просмотры41.7K
Комментарии 12

Устройство WebP

Блог компании .ioОбработка изображений
WebP — сравнительно новый формат от Google. Картинки в этом формате занимают на 30% меньше места на странице благодаря особому сжатию, построенному на кодировании ключевых кадров в видеокодеке VP8.

WebP поддерживает сжатие с потерями и без, разные степени прозрачности, метаданные и может содержать встроенный ICC-профиль. Но пока не все браузеры и приложения поддерживают формат.

image
Читать дальше →
Всего голосов 36: ↑33 и ↓3 +30
Просмотры20.5K
Комментарии 24

WebP vs BPG

Блог компании .ioОбработка изображений
Уже очень давно самыми популярными форматами остаются: JPEG — для lossy сжатия, PNG — для сжатия без потерь и GIF для анимации. Эти форматы поддерживаются всеми браузерами и веб-приложениями.

Но чем больше картинок заливается в интернет, тем острее ощущается потребность в лучшем формате. Для экономии места на сервере, для ускорения загрузки страницы и для экономии времени дизайнера.

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

Сейчас уже созданы несколько форматов, имеющих все шансы заменить и JPEG и GIF и PNG. Очень хорошие результаты показывают гугловский WebP и «свободный» BPG.
image
Читать дальше →
Всего голосов 19: ↑14 и ↓5 +9
Просмотры16.7K
Комментарии 29

Оптимизируем графику с помощью WebP

Разработка веб-сайтовHTML
Из песочницы

Блог разработчика интерфейсовКакая сейчас неделя? Какая сейчас учебная неделя? Четная или нечетная?

По данным сайта Web Perfomance Today, средний вес страницы в 2015 году 1109 КБ. По прогнозам, к 2018 будет около 2 МБ. Загрузка изображений занимает в среднем 64% (711 КБ) всего времени загрузки страницы. Поэтому начинать оптимизацию скорости загрузки страницы нужно именно с графики.
Читать дальше →
Всего голосов 17: ↑12 и ↓5 +7
Просмотры29.1K
Комментарии 28

Используем WebP сегодня

Разработка веб-сайтовОбработка изображений
Recovery mode

Это перевод статьи ребят из Aristotle Interactive.
Говорят, фотография стоит тысячи слов. Но в сети, фотография может занимать тысячу килобайт и больше! По данным HTTP Archive, изображения в среднем занимают до 64% веб-страницы. Учитывая это, оптимизация изображений — крайне важный аспект, особенно принимая во внимание то, что многие пользователи просто уйдут с сайта, если он не загрузится за несколько секунд.

Проблема с оптимизацией изображений в том, что мы хотим сохранить размер изображений, не жертвуя при этом качеством. Предыдущие попытки создать типы файлов, которые бы оптимизировали изображения лучше, чем стандартные JPEG, PNG и GIF, успеха не возымели.
Читать дальше →
Всего голосов 31: ↑25 и ↓6 +19
Просмотры111.6K
Комментарии 63

Готовим WebP правильно

Клиентская оптимизация
WebPХабр уже насыщен статьями на тему «нового» формата изображений WebP (описание, сравнение с JPEG2000, сравнение с BPG, использование, подключение на сайте). К сожалению, открытыми остаются вопросы: как правильно подключить WebP на сайте, чтобы «все работало», и насколько он лучше (меньше) PNG/JPEG. В этой заметке я буду отвечать на оба вопроса.

Предполагаю, что вы уже в курсе оптимизации изображений, умеете конвертировать изображения в WebP, понимаете разницу между использованием JPEG и PNG на сайте, знаете инструменты ExifTool, jpegtran, mozjpeg, JPEGrescan, optipng, pngcrush, pngwolf, zopflipng и TruePNG, а также различаете пастеризацию молока и постеризацию изображений.

Если все так — то переходим к сути.
Читать дальше →
Всего голосов 14: ↑12 и ↓2 +10
Просмотры28.1K
Комментарии 8

Свободный формат Lepton сжимает файлы JPEG на 22% без потерь

Open sourceОбработка изображений

Арифметическое кодирование по образцу Pied Piper



Предсказание коэффициентов дискретного косинусного преобразования в соседних 64-битных блоках JPEG

Компания Dropbox опубликовала исходный код нового формата потокового сжатия изображений Lepton (репозиторий на Github). Исходный код Lepton опубликован под свободной лицензией Apache. Всех желающих приглашают оптимизировать новый свободный алгоритм.

Lepton демонстрирует средний коэффициент компрессии 22% на файлах JPEG, предсказывая коэффициенты ДКП в JPEG-блоках и учитывая эти коэффициенты в качестве контекста для арифметического кодера, то есть кодируя дельту коэффициентов в соседних блоках.
Читать дальше →
Всего голосов 37: ↑33 и ↓4 +29
Просмотры24.3K
Комментарии 55

Год без единого байта

Серверная оптимизацияРезервное копированиеХранение данныхСжатие данныхХранилища данных
Об авторе. Арчи Рассел (Archie Russell) — инженер бэкенда во Flickr

Одна из самых затратных статей в работе сервиса вроде Flickr — это хранение. За последние годы мы описывали различные техники для снижения стоимости: использование COS, динамическое изменение размера на GPU и перцептивное сжатие. Эти проекты были очень успешны, но мы продолжали терять много денег на хранении данных.

В начале 2016 года мы поставили перед собой задачу выйти на новый уровень — продержаться целый год вообще не закупая новые носители информации. Используя различные техники, нам это удалось.

История затрат


Небольшие арифметические расчёты на салфетке показывают, что затраты на хранение представляют собой предмет реального беспокойства. В день с высокой посещаемостью пользователи Flickr загружают до 25 млн фотографий. Каждая из них требует в среднем 3,25 МБ, что в сумме составляет 80 ТБ. Наивно размещая их на облачном хостинге вроде S3 фотографии одного дня потянут на $30 тыс. в год и продолжат генерировать затраты каждый последующий год.
Читать дальше →
Всего голосов 50: ↑50 и ↓0 +50
Просмотры17.8K
Комментарии 12

FLIF – идеальный формат для изображений?

Блог компании WEBO GroupРазработка веб-сайтовOpen sourceКлиентская оптимизацияОбработка изображений
FLIF

Как формат JPEG произвел в свое время революцию среди форматов изображений, так и новый формат FLIF обещает такого же масштаба событие для дизайнеров и веб-разработчиков.

FLIF (Free Lossless Image Format) – новый формат файлов для изображений, обеспечивающий беспрецедентное сжатие без потерь. Файлы получаются:

  • На 14% меньше, чем WebP, без потерь
  • На 22% меньше, чем BPG, без потерь
  • На 33% меньше, чем сжатый через ZopfliPNG PNG-файл
  • На 43% меньше, чем обычные PNG-файлы
  • На 46% меньше, чем оптимизированные по Adam7 чересстрочные PNG-файлы
  • На 53% меньше, чем JPEG 2000, без потерь
  • На 74% меньше, чем JPEG XR, без потерь

На Хабре уже опубликовано пару статей на тему FLIF. Но мы пойдем дальше: какую еще практическую пользу несет формат, кроме меньшего размера для большинства типов изображений (в частности, для типов без потерь качества)?
Читать дальше →
Всего голосов 85: ↑75 и ↓10 +65
Просмотры29.8K
Комментарии 69

Оцениваем эффективность Guetzli – время оптимизации и степень сжатия

Блог компании WEBO GroupВысокая производительностьКлиентская оптимизацияАлгоритмыОбработка изображений
Перевод

Изображения вносят самый большой вклад в размер веб-страниц. По мнению многих экспертов, оптимизация изображений, их сжатие – приоритет номер один в списке мероприятий по ускорению производительности сайтов. Для этого могут использоваться различные методы сжатия – с потерями или без потерь, а также конвертация в другие форматы – SVG или WebP.

Поскольку тема оптимизации изображений по-прежнему актуальна, Google недавно представил новый алгоритм сжатия изображений с открытым исходным кодом, называющийся Guetzli. В этой статье мы разберемся, что он собой представляет, как работает и сравним его производительность с другими широко использующимися алгоритмами сжатия изображений.
Читать дальше →
Всего голосов 8: ↑5 и ↓3 +2
Просмотры4.4K
Комментарии 5
1