Пару недель назад у нас в Новосибирске был митап для фронтендеров JSParty. Один из докладов был от Тима Чаптыкова из ВКонтакте: "Оптимизация графики на практике".
В докладе Тим рассказал про практические приёмы оптимизации векторной и растровой графики. Очень подробно разобрал настройки при экспорте изображений из Photoshop, Illustrator и Sketch. Поделился наиболее оптимальными настройками для SVGO, малоизвестными трюками при работе с изображениями и хорошими чек-листами, с которыми можно сверяться при экспорте графики для веба. В докладе есть пара историй из жизни про генерацию графики на клиенте. Не знаю почему, но из доклада я запомнил такой факт, что при сжатии больших JPEG для Retina-дисплеев достаточно качества 51%.
К сожалению, записи видео не было, но есть запись доклада с Frontfest Moscow 2017. Обновлённые слайды можно найти тут.
#graphic #optimization #talk
https://www.youtube.com/watch?v=wexOXAflVX0
В докладе Тим рассказал про практические приёмы оптимизации векторной и растровой графики. Очень подробно разобрал настройки при экспорте изображений из Photoshop, Illustrator и Sketch. Поделился наиболее оптимальными настройками для SVGO, малоизвестными трюками при работе с изображениями и хорошими чек-листами, с которыми можно сверяться при экспорте графики для веба. В докладе есть пара историй из жизни про генерацию графики на клиенте. Не знаю почему, но из доклада я запомнил такой факт, что при сжатии больших JPEG для Retina-дисплеев достаточно качества 51%.
К сожалению, записи видео не было, но есть запись доклада с Frontfest Moscow 2017. Обновлённые слайды можно найти тут.
#graphic #optimization #talk
https://www.youtube.com/watch?v=wexOXAflVX0
Сегодня прочитал статью 2012 года Люка Вагнера "Optimizing JavaScript variable access". В статье Люк написал про то, каким образом он оптимизировал доступ к переменным в SpiderMonkey (js-движок в Firefox).
Начинается статья с описания оптимизации наихудшего случая, когда скоуп расширяется в рантайме с помощью eval. Поиск значения переменной в этом случае осуществляется с помощью итеративного алгоритма, к которому применяется те же техники оптимизации, которые используются при получении свойства объекта. Затем разбирается быстрый доступ к локальным переменным. В этом случае доступ оптимизируется очень хорошо, так как запись или получение значения из стека сводится к одной команде CPU. Последним пунктом разбирается быстрый доступ к нелокальным переменным. В этом случае не нужно поддерживать динамический хэш как в первом примере, так как вся информация о переменных уже доступна во время запуска js-кода и код может быть скомплирован JIT-компилятором.
Честно говоря не знаю, насколько это описание актуально для новых версий SpiderMonkey. Но как бы то ни было, всегда интересно поразбираться во внутреннем устройстве движков, так как эта информация может пригодиться в самый неожиданный момент.
#spidermonkey #optimization #js
https://blog.mozilla.org/luke/2012/10/02/optimizing-javascript-variable-access/
Начинается статья с описания оптимизации наихудшего случая, когда скоуп расширяется в рантайме с помощью eval. Поиск значения переменной в этом случае осуществляется с помощью итеративного алгоритма, к которому применяется те же техники оптимизации, которые используются при получении свойства объекта. Затем разбирается быстрый доступ к локальным переменным. В этом случае доступ оптимизируется очень хорошо, так как запись или получение значения из стека сводится к одной команде CPU. Последним пунктом разбирается быстрый доступ к нелокальным переменным. В этом случае не нужно поддерживать динамический хэш как в первом примере, так как вся информация о переменных уже доступна во время запуска js-кода и код может быть скомплирован JIT-компилятором.
Честно говоря не знаю, насколько это описание актуально для новых версий SpiderMonkey. Но как бы то ни было, всегда интересно поразбираться во внутреннем устройстве движков, так как эта информация может пригодиться в самый неожиданный момент.
#spidermonkey #optimization #js
https://blog.mozilla.org/luke/2012/10/02/optimizing-javascript-variable-access/
Полина Гуртовая и Рита Клубочкина опубликовали в блоге Злых Марсиан большую статью про использование изображений в вебе — "Images done right: Web graphics, good to the last byte".
В начале статьи рассказывается про то, как CSS-пиксели матчатся на экраны устройств, и почему физический размер пикселей отличается у мониторов и смартфонов. Есть разделы, посвящённые SVG и самым популярным форматам растровых изображений. Для меня самое полезное — сравнение результатов работы разных инструментов для разных форматов. Например, для сжатия PNG лучше всего подходит ImageOptim, а JPEG лучше всего жмут Squoosh и Imagemin. Есть бенчмарки с WebP, которые показывают его эффективность по сравнению с PNG и JPEG. Для анимациий не рекомендуют использовать GIF, вместо него рекомендуется использовать mp4 или webm. В самом начале статьи есть cheat-sheet, который может помочь с выбором наиболее подходящего формата.
Статья очень хорошая. Рекомендую почитать всем без исключения.
#graphic #optimization
https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
В начале статьи рассказывается про то, как CSS-пиксели матчатся на экраны устройств, и почему физический размер пикселей отличается у мониторов и смартфонов. Есть разделы, посвящённые SVG и самым популярным форматам растровых изображений. Для меня самое полезное — сравнение результатов работы разных инструментов для разных форматов. Например, для сжатия PNG лучше всего подходит ImageOptim, а JPEG лучше всего жмут Squoosh и Imagemin. Есть бенчмарки с WebP, которые показывают его эффективность по сравнению с PNG и JPEG. Для анимациий не рекомендуют использовать GIF, вместо него рекомендуется использовать mp4 или webm. В самом начале статьи есть cheat-sheet, который может помочь с выбором наиболее подходящего формата.
Статья очень хорошая. Рекомендую почитать всем без исключения.
#graphic #optimization
https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
evilmartians.com
Images done right: Web graphics, good to the last byte—Martian Chronicles, Evil Martians’ team blog
Start taking graphics on the web seriously and boost your applications' performance by learning the essentials about digital image formats.
Пару недель назад инженеры из Netflix рассказали про новый открытый формат изображений — "AVIF for Next-Generation Image Coding".
Вопрос качества и объёма передаваемых изображений для Netflix стоит особенно остро, поэтому они присоединились к разработке нового формата изображений AVIF на базе кодека AV1, который в свою очередь используется для кодирования видео. На данный момент это один из самых лучших форматов, который превосходит по качеству webp, который был разработан на базе кодека предыдущего поколения VP8. AVIF поддерживает High Dynamic Range (HDR), Wide Color Gamut (WCG) и Standard Dynamic Range (SDR). Для сравнения качества сжатия разных кодеков был разработан специальный фреймворк. Результаты сравнения показали преимущество AVIF.
В ближайшем будущем стоит ожидать появления поддержки AVIF в браузерах — работа над добавлением AVIF в Chrome уже началась. Также The Alliance for Open Media разрабатывает свободную библиотеку для работы с новым форматом. В мае прошлого года поддержка AVIF была добавлена в Windows 10.
#image #codec #optimization
https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4
Вопрос качества и объёма передаваемых изображений для Netflix стоит особенно остро, поэтому они присоединились к разработке нового формата изображений AVIF на базе кодека AV1, который в свою очередь используется для кодирования видео. На данный момент это один из самых лучших форматов, который превосходит по качеству webp, который был разработан на базе кодека предыдущего поколения VP8. AVIF поддерживает High Dynamic Range (HDR), Wide Color Gamut (WCG) и Standard Dynamic Range (SDR). Для сравнения качества сжатия разных кодеков был разработан специальный фреймворк. Результаты сравнения показали преимущество AVIF.
В ближайшем будущем стоит ожидать появления поддержки AVIF в браузерах — работа над добавлением AVIF в Chrome уже началась. Также The Alliance for Open Media разрабатывает свободную библиотеку для работы с новым форматом. В мае прошлого года поддержка AVIF была добавлена в Windows 10.
#image #codec #optimization
https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4
Medium
AVIF for Next-Generation Image Coding
By Aditya Mavlankar, Jan de Cock, Cyril Concolato, Kyle Swanson, Anush Moorthy and Anne Aaron
Всегда ли WebP сжимает изображения лучше чем JPEG? Этим вопросом задался Йоханнес Сипола и написал статью "Is WebP really better than JPEG?"
Google в своих исследованиях про эффективность сжатия WebP говорил про уменьшение размеров изображений на 25-34% относительно JPEG. Йоханнес предполагает, что такая цифра получилась благодаря тому, что для создания JPEG-изображений использовался референсный кодировщик — cjpeg. В то время как существует более эффективный независимый кодировщик JPEG от Mozilla — MozJPEG. При сравнении разных наборов изображений из датасета от Kodak оказалось, что WebP уступает MozJPEG на больших изображениях. При этом во всех замерах с большим отрывом лидирует новый формат изображений — AVIF.
Выводы из статьи. Используйте WebP, когда сжимаются изображения меньше 500px, когда вы не можете использовать MozJPEG и когда вы можете использовать агрессивное сжатие с потерей качества.
#graphics #optimization #benchmark
https://siipo.la/blog/is-webp-really-better-than-jpeg
Google в своих исследованиях про эффективность сжатия WebP говорил про уменьшение размеров изображений на 25-34% относительно JPEG. Йоханнес предполагает, что такая цифра получилась благодаря тому, что для создания JPEG-изображений использовался референсный кодировщик — cjpeg. В то время как существует более эффективный независимый кодировщик JPEG от Mozilla — MozJPEG. При сравнении разных наборов изображений из датасета от Kodak оказалось, что WebP уступает MozJPEG на больших изображениях. При этом во всех замерах с большим отрывом лидирует новый формат изображений — AVIF.
Выводы из статьи. Используйте WebP, когда сжимаются изображения меньше 500px, когда вы не можете использовать MozJPEG и когда вы можете использовать агрессивное сжатие с потерей качества.
#graphics #optimization #benchmark
https://siipo.la/blog/is-webp-really-better-than-jpeg
siipo.la
Is WebP really better than JPEG?
If you have used tools like Google’s PageSpeed Insights, you probably have run into a suggestion to use “next-gen image formats”, namely Google’s WebP image format. Google claims that their WebP…
Дэниэл Александерсен поделился результатами сравнения WebP и AVIF в статье "Comparing AVIF vs WebP file sizes at the same DSSIM".
Дэниэл захотел улучшить качество изображений в своём блоге, сохранив их небольшой размер. Обычно все изображения кодировались с одними и тем же качеством. Такой подход иногда приводил к артефактам на одних изображениях и к избыточному размеру файлов на других, поэтому был выбран другой подход. Каждое изображение кодировалось несколько раз с индивидуальными настройками качества, затем бинарным поиском выбирались те изображения, которые были ближе всего к целевому показателю индекса DSSIM (аппроксимирует работу человеческого зрения и говорит о том, насколько изображения отличаются друг от друга).
При сравнении с оригинальными JPEG-изображениями медианное значение сокращения размера файлов при сжатии с помощью WebP составило 31.5%, у AVIF — 50.3%, на 85-ом перцинтиле 20% у WebP и 39.6% у AVIF. У WebP 2.7% изображений оказались больше оригинального изображения, у AVIF все изображения были меньше.
Рекомендую почитать статью всем, кто интересуется темой сжатия изображений.
#graphics #optimization #benchmark
https://www.ctrl.blog/entry/webp-avif-comparison.html
Дэниэл захотел улучшить качество изображений в своём блоге, сохранив их небольшой размер. Обычно все изображения кодировались с одними и тем же качеством. Такой подход иногда приводил к артефактам на одних изображениях и к избыточному размеру файлов на других, поэтому был выбран другой подход. Каждое изображение кодировалось несколько раз с индивидуальными настройками качества, затем бинарным поиском выбирались те изображения, которые были ближе всего к целевому показателю индекса DSSIM (аппроксимирует работу человеческого зрения и говорит о том, насколько изображения отличаются друг от друга).
При сравнении с оригинальными JPEG-изображениями медианное значение сокращения размера файлов при сжатии с помощью WebP составило 31.5%, у AVIF — 50.3%, на 85-ом перцинтиле 20% у WebP и 39.6% у AVIF. У WebP 2.7% изображений оказались больше оригинального изображения, у AVIF все изображения были меньше.
Рекомендую почитать статью всем, кто интересуется темой сжатия изображений.
#graphics #optimization #benchmark
https://www.ctrl.blog/entry/webp-avif-comparison.html
www.ctrl.blog
Comparing AVIF vs WebP file sizes at the same DSSIM
I got impressive results when comparing AVIF and WebP images at the same visual quality (using DSSIM.) AVIF’s 85th percentile was the same as WebP’s 15th!
В Chrome 85 появилась поддержка формата изображений AVIF. Джек Арчибальд написал большую статью про то, в каких случаях он может быть полезен — "AVIF has landed".
AVIF — это новый формат изображений, который основывается на видеокодеке AV1. По сравнению с другими форматами он сжимает изображения гораздо лучше, но у него есть некоторые ограничения. Для изображений, в которых важна высокая детализация, лучше использовать старый-добрый JPEG. Также AVIF не поддерживает прогрессивный рендеринг, когда изображение медленно появляется на странице по мере его загрузки. Лучше всего AVIF подходит для сжатия небольших изображений.
В статье затрагиваются вопросы производительности при сравнении AVIF c SVG. SVG по качеству превосходит все другие форматы, но сложное векторное изображение может быть очень затратным с точки зрения CPU. Поэтому SVG с большим количеством градиентов и фильтров рекомендуется конвертировать в растровое изображение.
Поддержка AVIF появилась в Chrome 85, в Firefox уже идёт работа над его внедрением. Поддержка AVIF в Safari, скорее всего, тоже не заставит себя долго ждать, так как Apple входит в группу разработчиков AV1.
#graphics #optimization
https://jakearchibald.com/2020/avif-has-landed/
AVIF — это новый формат изображений, который основывается на видеокодеке AV1. По сравнению с другими форматами он сжимает изображения гораздо лучше, но у него есть некоторые ограничения. Для изображений, в которых важна высокая детализация, лучше использовать старый-добрый JPEG. Также AVIF не поддерживает прогрессивный рендеринг, когда изображение медленно появляется на странице по мере его загрузки. Лучше всего AVIF подходит для сжатия небольших изображений.
В статье затрагиваются вопросы производительности при сравнении AVIF c SVG. SVG по качеству превосходит все другие форматы, но сложное векторное изображение может быть очень затратным с точки зрения CPU. Поэтому SVG с большим количеством градиентов и фильтров рекомендуется конвертировать в растровое изображение.
Поддержка AVIF появилась в Chrome 85, в Firefox уже идёт работа над его внедрением. Поддержка AVIF в Safari, скорее всего, тоже не заставит себя долго ждать, так как Apple входит в группу разработчиков AV1.
#graphics #optimization
https://jakearchibald.com/2020/avif-has-landed/
Jakearchibald
AVIF has landed
AVIF is the first browser image format we've had in 10 years. Let's see how it performs…
Опыт оптимизации памяти Miro
Никита Руденко из Miro поделился опытом оптимизации памяти большого приложения — "Fighting for bytes in the frontend".
Ребята из Miro (популярный инструмент для совместной работы, использующий концепцию виртуальной доски для рисования) в прошлом году столкнулись с проблемой. У пользователей iPad из-за нехватки оперативной памяти ломался интерфейс программы.
Для исправления ситуации была оптимизирована структура данных хранения точек виджетов — вместо массива объектов набор точек стали хранить в виде одномерного типизированного массива. Также для снижения потребления памяти и оптимизации производительности рендеринга начали использовать специальные "сжатые" изображения виджетов в виде упрощённых векторных объектов. Была ещё успешная попытка снизить объём хранимой метаинформации для связанных виджетов, но от этой идеи отказались из-за большого количества UX-вопросов. После всех оптимизаций потребление памяти удалось снизить на 40%.
Полезная статья. Очень рекомендую почитать всем, кто разрабатывает большие и сложные web-приложения.
#performance #optimization
https://medium.com/miro-engineering/fighting-for-bytes-in-the-frontend-419c48103ef8
Никита Руденко из Miro поделился опытом оптимизации памяти большого приложения — "Fighting for bytes in the frontend".
Ребята из Miro (популярный инструмент для совместной работы, использующий концепцию виртуальной доски для рисования) в прошлом году столкнулись с проблемой. У пользователей iPad из-за нехватки оперативной памяти ломался интерфейс программы.
Для исправления ситуации была оптимизирована структура данных хранения точек виджетов — вместо массива объектов набор точек стали хранить в виде одномерного типизированного массива. Также для снижения потребления памяти и оптимизации производительности рендеринга начали использовать специальные "сжатые" изображения виджетов в виде упрощённых векторных объектов. Была ещё успешная попытка снизить объём хранимой метаинформации для связанных виджетов, но от этой идеи отказались из-за большого количества UX-вопросов. После всех оптимизаций потребление памяти удалось снизить на 40%.
Полезная статья. Очень рекомендую почитать всем, кто разрабатывает большие и сложные web-приложения.
#performance #optimization
https://medium.com/miro-engineering/fighting-for-bytes-in-the-frontend-419c48103ef8
Medium
Fighting for bytes in the frontend
On tempering greedy drawn widgets and saving iPads from running out of memory
Уменьшение размера npm-пакетов AWS SDK
Тривикрам Камат из Amazon написал статью про опыт уменьшения размера npm-пакетов — "How we halved the publish size of modular AWS SDK for JavaScript clients".
Тривикрам работает над JavaScript-версией AWS SDK, который используется в окружениях с жёсткими квотами, поэтому размер npm-пакетов играет важную роль. Для сокращения объёма устанавливаемого кода были удалены JSDoc-комментарии из JS- и d.ts-файлов, сгенерированных с помощью библиотеки
Благодаря удалению лишнего кода размер пакетов уменьшился на ~50%.
#npm #optimization #typescript
https://aws.amazon.com/blogs/developer/how-we-halved-the-publish-size-of-modular-aws-sdk-for-javascript-clients/
Тривикрам Камат из Amazon написал статью про опыт уменьшения размера npm-пакетов — "How we halved the publish size of modular AWS SDK for JavaScript clients".
Тривикрам работает над JavaScript-версией AWS SDK, который используется в окружениях с жёсткими квотами, поэтому размер npm-пакетов играет важную роль. Для сокращения объёма устанавливаемого кода были удалены JSDoc-комментарии из JS- и d.ts-файлов, сгенерированных с помощью библиотеки
downlevel-dts для старых версий TypeScript. Был удалён исходный TypeScript-код и сорсмапы. Для удобства отладки запланирован релиз специальной дебаг-версии пакетов.Благодаря удалению лишнего кода размер пакетов уменьшился на ~50%.
#npm #optimization #typescript
https://aws.amazon.com/blogs/developer/how-we-halved-the-publish-size-of-modular-aws-sdk-for-javascript-clients/
Amazon
How we halved the publish size of modular AWS SDK for JavaScript clients | Amazon Web Services
On December 15th, 2020, we announced the general availability of the AWS SDK for JavaScript, version 3 (v3). In v3, the modular packages reduce the bundle size of your application by ~75% as compared to that in AWS SDK for JavaScript, version 2 (v2). However…