Как стать автором
Обновить

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

Время на прочтение 3 мин
Количество просмотров 4.1K


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

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

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

Приложение «Фото» на Windows 11 получило поддержку формата WebP

Время на прочтение 1 мин
Количество просмотров 894

В стандартном приложении «Фото» на Windows 11 появилась поддержка формата WebP. Обновление пока доступно в экспериментальной сборке в каналах Dev и Canary.

Читать далее
Всего голосов 4: ↑4 и ↓0 +4
Комментарии 0

Вышло экстренное обновление Chrome для закрытия уязвимости через WebP

Время на прочтение 2 мин
Количество просмотров 3.8K


Чуть более суток назад Google выпустила обновление для Chrome, устраняя критическую уязвимость CVE-2023-4863 в формате изображений WebP, о которой сообщили эксперты из Citizen Lab, находящегося при университете Торонто. Стабильные и расширенные ветки были обновлены до версий 116.0.5845.187 для Mac и Linux и 116.0.5845.187/.188 для Windows. Киберпреступники уже успели воспользоваться этой уязвимостью.
Читать дальше →
Всего голосов 7: ↑7 и ↓0 +7
Комментарии 7

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

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

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

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

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

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

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

Скачать

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

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

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

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

Время на прочтение 1 мин
Количество просмотров 29K
image

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

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

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

Время на прочтение 7 мин
Количество просмотров 26K
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


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

Статистика по сжимающему прокси от Google

Время на прочтение 2 мин
Количество просмотров 7.6K


Компания Google опубликовала статистику (pdf) по работе сервиса Data Compression Proxy для мобильного веба (кстати, есть расширение, которое позволяет пропускать через этот прокси и трафик с десктопного браузера Chrome, но им мало кто пользуется).

Это аналог известного сервиса Opera Turbo, который тоже сжимает текстовый контент и сильнее компрессирует картинки.
Читать дальше →
Всего голосов 15: ↑14 и ↓1 +13
Комментарии 2

Django, ImageField и .webp. Ещё немного про ускорение web приложения и экономию дискового пространства

Уровень сложности Средний
Время на прочтение 4 мин
Количество просмотров 3.6K

Доброго времени суток уважаемый читатель. Хотелось бы немного поговорить об оптимизации наших с вам любимых WEB приложений, написанных на нашем горячо любимом и всеми уважаемом фреймворке Django. В частности речь в этой статье пойдёт об оптимизации изображений. А теперь по порядку.

Читать далее
Всего голосов 4: ↑3 и ↓1 +2
Комментарии 42

Простые правила при работе с растровыми изображениями на каждый день

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 10K

Привет, меня зовут Денис, я руковожу направлением разработки в Домклик. Дополнительно несу ношу лидера frontend-направления в нашей компании. Не так давно я отрефакторил систему собеседований для frontend-разработчиков, попутно тестируя технические вопросы на внешних и внутренних респондентах. И пришёл к выводу, что множество мной опрошенных разработчиков, вне зависимости от уровня, не знают или просто не обращают внимание на базовые правила при работе с картинками. В результате на просторах интернета зачастую можно найти изображения размером 200 на 200 пикселей и весом в несколько мегабайтов со смещением макета, столь раздражающим пользователей. Если вам интересно, как практически без вложений улучшить пользовательский опыт, то прошу под кат.

Читать далее
Всего голосов 54: ↑50 и ↓4 +46
Комментарии 21

Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза

Время на прочтение 24 мин
Количество просмотров 165K

На протяжении всей жизни мне приходится экономить вычислительные и сетевые ресурсы: сначала были компьютеры с 300 кГц (кило — не гига!) и 32 Кбайт RAM, интернет по dial-up. Потом я решал олимпиадные задачки. Теперь имею дело с терабайтами трафика и 50 млрд событий в сутки. И хотя современные телефоны в 1 000 раз мощнее любого оборудования двадцатилетней давности, я до сих пор оптимизирую. Думал даже, что это со мной что-то не так. Но потом понял, что все постоянно что-нибудь оптимизируют. 

Эта статья в меньшей степени о том, почему нужно бороться за производительность, и в большей о том, на что сейчас стоит заменить устаревший стек из JPEG, JSON, gzip и TCP — и как это сделать. 

Спойлер: у нас есть решение и мы его не только показываем — ссылки на open source в конце статьи.

Читать далее
Всего голосов 435: ↑423 и ↓12 +411
Комментарии 300

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

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

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

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

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

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

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

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

Сжимаем несжимаемое – как уменьшить дистрибутив мобильного приложения

Время на прочтение 6 мин
Количество просмотров 19K
Сегодня в магазинах приложений для платформ iOS и Android существует ограничение на размер приложения в 100 МБ. Магазин Apple для приложений, которые не укладываются в этот лимит, запрещает закачку при помощи мобильного интернета. В  Google Play же это строгий лимит на размер APK – все, что не укладывается в него, должно быть вынесено в файлы дополнений. Для пользователей с платным трафиком закачка большого приложения может быть довольно затратной, поэтому его размер нужно стараться уменьшить всеми силами.


В рамках этой статьи мы расскажем, с помощью каких приемов мы смогли уложиться в это ограничение на проекте Gardenscapes для платформы iOS. Статья касается в основном мобильных игр, но методы сжатия универсальны и могут пригодиться для любых проектов с тяжелой графикой. Для того, чтобы говорить о методах сжатия, нужно определиться с тем, как формируется архив приложения.
Читать дальше →
Всего голосов 38: ↑36 и ↓2 +34
Комментарии 34

Как прошёл октябрьский moscowcss. Видеозаписи со встречи moscowcss №5 из офиса Туту.ру 31 октября 2017

Время на прочтение 1 мин
Количество просмотров 1.8K
moscowcss №5 в офисе Туту.ру

В конце октября в офисе Туту.ру прошла очередная встреча по фронтенду в Москве moscowcss. На митапе выступили три докладчика: Игорь Лесневский из дизайн-бюро «Зебра» рассказал о WebP, фронтендер Туту.ру Артем Нечунаев поделился знаниями об адаптивном SVG, а Сергей Попов из HTML Academy и по совместительству организатор moscowcss выступил с докладом о том, как оставить спецификации, которыми бы могли пользоваться другие разработчики со всего мира.
Мы записали видео лекций и делимся ими с вами.
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 2

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

Время на прочтение 4 мин
Количество просмотров 6.3K

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

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

Как мы уменьшаем размер изображений на веб-страницах в 10 раз с помощью нашего оптимизатора

Время на прочтение 8 мин
Количество просмотров 18K

Привет, Хабр! Меня зовут Евгений Лабутин, я из команды разработки продукта МТС Твой бизнес. Мы разработали свой рецепт приготовления картинок для нашего портала. Благодаря ему удалось сократить их вес на странице до 10 раз относительно уже оптимизированного jpg/png, сохранив при этом простоту разработки – как будто это стандартный img элемент. Разработанный микросервис называется ImageOptimize, из этой статьи вы узнаете, как он работает и что у него под капотом. Мы уже выложили код микросервиса в OpenSource (чему очень рады), поэтому вы тоже можете использовать такую компрессию, настроив ее в несколько простых шагов.

Читать далее
Всего голосов 37: ↑35 и ↓2 +33
Комментарии 28

WebP скоро захватит веб, но век будет не долгим

Время на прочтение 2 мин
Количество просмотров 31K


Стандарт кодирования изображений WebP нельзя назвать новым, его представила Google в уже далёком 2010 году. Однако всё это время использование его было сильно ограничено из-за того, что разработчики браузеров имели собственное мнение по поводу того, какой новый формат изображений должен поддерживать их браузер. Но скоро ситуация изменится, т. к., наконец, поддержка WebP появится на подавляющем большинстве браузеров. Но стандарт WebP рискует стать популярным, будучи уже устаревшим, ведь его конкурент — AVIF, поддерживаемый альянсом большинства разработчиков браузеров, уже в активной разработке.

Читать дальше →
Всего голосов 17: ↑16 и ↓1 +15
Комментарии 74

Сжатие изображений при помощи модели Stable Diffusion

Время на прочтение 10 мин
Количество просмотров 12K
image

Введение


На сегодняшний день Stable Diffusion является источником вдохновения для сообщества любителей опенсорсного машинного обучения и в то же время источником расстройства для художников всего мира. Мне стало любопытно, что ещё может сделать эта важная технология кроме того, как подвергать угрозе рабочие места профессиональных художников и дизайнеров.

В процессе экспериментов с моделью я обнаружил, что она подходит в качестве чрезвычайно эффективного кодека сжатия изображений с потерями. Прежде чем приступать к описанию своей методики и демонстрации кода, вот несколько результатов модели по сравнению с JPG и WebP с высокой степенью сжатия. Все изображения имеют разрешение 512x512 пикселей:
Читать дальше →
Всего голосов 43: ↑41 и ↓2 +39
Комментарии 11

Оптимизация графики для веба: самое важное

Время на прочтение 54 мин
Количество просмотров 93K
Автор электронной книги — Эдди Османи, один из руководителей разработки Google Chrome

tl;dr


Cжатие изображений всегда должно быть автоматизировано


Оптимизацию графики обязательно надо автоматизировать. О ней легко забыть, рекомендации меняются, да и сам контент может легко проскользнуть мимо конвейера сборки. Для автоматизации при сборке используйте imagemin или libvips. Есть и много других.

Большинство CDN (например, Akamai) и сторонних решений вроде Cloudinary, imgix, Fastly Image Optimizer, Instart Logic SmartVision и ImageOptim API предлагают комплексные автоматизированные решения для оптимизации изображений.

На чтение статей и настройку конфигурации вы потратите время, которое дороже оплаты их услуг (у Cloudinary есть бесплатный тариф). Но если всё-таки не хотите отдавать работу на аутсорсинг по соображениям стоимости или из-за дополнительной latency, то выбирайте приведённые выше варианты с открытым исходным кодом. Проекты Imageflow или Thumbor предлагают альтернативу на собственном хостинге.
Читать дальше →
Всего голосов 61: ↑61 и ↓0 +61
Комментарии 31
1