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

    Можно смело утверждать, что этой осенью формат WebP переживает второе рождение. Сообщения о новых возможностях следуют буквально одно за другим. Здесь я приведу перевод самых интересных новостей, касающихся формата WebP и перспектив его развития и поддержки. Топик сознательно не оформляется как перевод, так как данные приведены сразу из нескольких источников. Итак, полупрозрачность, сжатие без потерь, поддержка IE6+ и так далее!
    • В WebP появилась поддержка анимации. Можно задавать произвольные временные интервалы между кадрами, а также делать «закольцованные» анимации.
    • WebP теперь поддерживает цветовые профили ICC и метаданные XMP.
    • Появилась поддержка тайлинга: сохранения больших изображений в виде группы картинок меньшего размера, так называемых тайлов, в одном файле. Это позволяет, во-первых, загружать только необходимые части изображения, а во-вторых, превысить ограничение webp на размер кадра.
    • В том же сообщении говорится, что в планах корпорации [добра|зла] — поддержка миниатюр изображения (thumbnails) и стереоскопических изображений.
    • 17 ноября была объявлена поддержка полупрозрачности (альфа-канала) и сжатия без потерь. Утверждается, что WebP в режиме сжатия без потерь дает выигрыш в 45% объема по сравнению со среднестатистическим PNG и в 28% по сравнению с хорошо оптимизированным PNG. В свою очередь, данные альфа-канала добавляют к размеру файла всего 22%.
    • И, пожалуй, самое главное. Dominik Homberger портировал библиотеку libwebp на javascript (полупрозрачность уже поддерживается!). Так что теперь WebP в той или иной форме доступен во всех современных браузерах (включая IE6+, поддержка «ослика» сделана через fallback на флеш). Лицензия — та же, что и у WebP (BSD). К сожалению, мне не удалось найти репозиторий исходного кода. Но для тех хабрачитателей, кому интересно будет посмотреть, как это выглядит в коде, я распаковал и отформатировал исходники, и выложил на pastebin (ссылки — в конце поста).
      Приятного изучения!
    • Впрочем, для Firefox более эффективным решением может стать использование другой javascript-библиотеки, weppy, которая «оборачивает» webp-изображения в видеоконтейнер WebM, воспроизведение которого в Firefox поддерживается изначально.
    • Напомню, «из коробки» на данный момент WebP показывают только Chrome и Opera. А вот среди разработчиков Firefox идея поддержки WebP вызвала нешуточную дискуссию, которая продолжается до сих пор.
    • Тем, кто хочет поэкспериментировать с новым форматом самостоятельно, напомню ссылки на плагины для Photoshop, GIMP и Paint.NET.

    UPD: Фактически, Dominik Homberger сделал целых три библиотеки для поддержки WebP в браузерах. Одна — libwebpjs — это энкодер и декодер на javascript. Вторая и третья (работают в паре, общее название webpjs) — декодеры на javascript и флеш (для IE) + обёртка, реализующая поддержку webp в тегах img, css и так далее.

    Собственно, исходники:
    libwebpjs
    webpjs (javascript — часть)
    webpjs (actionscript — часть)
    Поделиться публикацией
    Никаких подозрительных скриптов, только релевантные баннеры. Не релевантные? Пиши на: adv@tmtm.ru с темой «Полундра»

    Зачем оно вам?
    Реклама
    Комментарии 49
    • +1
      Плагин для GIMP не поддерживает альфа-канал:(
      • +3
        Альфа анонсирована два дня назад. Дайте время разработчикам :-)
        • 0
          Ну на JS-то уже реализовали:)
          • 0
            Видать, альфа в коде libwebp появилась до официального анонса.
      • +1
        Вот бы ещё парочку примеров с наглядным сравнением…
          • 0
            Cравнение JPEG 2000, JPEG XR, обычного JPEG и WebM (первые три примера — из википедии, а именно, из статьи про JPEG XR; пример WebM — мой, версия кодировщика 0.1.3, качество 8.6).
            • 0
              Прошу прощения, WebP, а не WebM, конечно же. Блин, напридумывали форматов)
          • 0
            А какие из самых популярных для Web форматов поддерживают тайлинг?
            • +1
              никакие.
              только обёртки в виде flash/silverlight.
            • –1
              Сравнение с PNG мне кажется неуместным. WebP использует сжатие с потерями.
              • +6
                17 ноября была объявлена поддержка полупрозрачности (альфа-канала) и сжатия без потерь
                • 0
                  Мде, извините. Внимательность — это моё.
              • +5
                Дожили — спустя 20 лет после основания интернета картинки подпирают флэшевыми костылями.

                • +4
                  А как по-другому? Формат может стать успешным только благодаря его кроссплатформенной (в данном случае — кроссбраузерной) поддержки.
                  • –2
                    Да не станет он успешным. Реальных преимуществ перед тройкой PNG, JPG, GIF — нет.

                    А браузеростроители не могут даже о едином формате аудио и видео договриться… А это гораздо более актуальная проблема.
                    Так и будут спорить — что лучше JPEG XR или webP

                    так и вижу…

                    • 0
                      Из за отсутствия кармы код не отобразился, но там в общем парный тэг img c вложенными тэгами source — как сейчас в аудио и видео.
                      • +3
                        > Реальных преимуществ нет.
                        — Полноцветная анимация (не 256 цветов, как в gif)
                        — Полупрозрачность для сжатия с потерей качества
                        — Меньший размер при том же качестве примерно на 25%.
                        • 0
                          — Я вот даже себе не представляю — а где вообще нужна аниманиция кроме прелаодеров? А для них 256 хватает.

                          2 и 3 пункты не сильно существенные. ну да лучше, но подставлять ради них кому скрипты, а уж тем более флэш — это я не знаю кем быть надо. Упоротым гуглофилом наверное.

                          Просто сейчас у всех браузеров — есть поважнее проблемы чем новый формат картинок. Вот реализуют HTML5 полностью… вот тогда мож начнут такое внедрять.
                          • +1
                            На треть урезать трафик, проистекающий из датацентров (пусть даже не немедленно, а в «отдалённом светлом будущем») — вполне достаточная причина для активного продвижения нового формата гуглом.

                            Да, в нынешнем виде это выглядит как набор «костылей». Но ещё не так давно большая часть сайтов содержала в себе разного рода IE PNG fix'ы, которые субъективно тормозили и капризничали не меньше чем поддержка webp на флеш. И ничего, все как-то нормально это воспринимали.

                            На мой взгляд, PNG через VML — не меньшее «извращение», чем webp через флеш.
                            • 0
                              Это абсолютно разные вещи. PNG позволял делать полноцветные картинки. Это было востребовано и необходимо.

                              Если бы Гугл действительно руководствовался благородными идеями снижения трафика — он бы реализовал JPEG XR — хотя бы в силу того что он появился раньше, стандартизован, уже поддерживается хоть где то, так же лучше JPEG, поддерживает прозрачность и свобден и открыт. Но он мало того что не сделан гуглом, так ещё и сделан МС.

                              Это просто перетягивание одеяла на себя
                              • +1
                                JPEG тоже позволяет делать полноцветные картинки. PNG нужен из-за полупрозрачности в первую очередь (ну и скриншотики выкладывать, конечно :). Впрочем, не суть важно. Факт, что «прокладки для иешечки» стали абсолютной нормой.

                                Конечно, гугл тянет одеяло на себя — что ж ему не тянуть-то? Но определенные мотивы помимо этого все-таки есть. Ведь из технических преимуществ JPEG XR — только поддержка более широких цветовых пространств (которую со временем прикрутить к VP8 и, соответственно, WebP — вполне возможно). Зато он жмётся хуже, да к тому же WebP гугл может расширять сколько угодно, добавляя новые интересные плюшки (благо, формат позволяет это делать, не ломая обратную совместимость), а про развитие JPEG XR я что-то давненько новостей не слышал. Из поддержки браузерами — только IE9, так а сколько его, этого IE9-то? Плюс с патентным вопросом как-то спокойнее: Community Promise — это, конечно, хорошо, ну а если MS по своему обыкновению по мере популяризации формата выкатит к нему парочку проприетарных расширений, под этот Promise не подпадающих? А в случае с VP8 On2 специально стремились избежать любого намека на использование чужих патентованных технологий (собственно, то, что за WebM никто никого пока не собрался судить, косвенно подтверждает, что постарались они на славу).

                                Ну и еще один нюанс. IE уже давно перестал быть «законодателем моды» в сфере браузеров. Если лет 10 назад было нормально услышать «не работает в нетскейпе? Да и хрен с ним, у всех винда, в эксплорере пусть смотрят», то сейчас аналогичное рассуждение звучит так: «не работает в эксплорере? Да и хрен с ним, прикрутим костыль, в крайнем случае пусть хромофрейм ставят». При таком раскладе странно было бы ожидать, что гугл пойдет на поводу у MS, имея свою готовую технологию компрессии.

                                Но полностью отрицать то, что с точки зрения гугла JPEG XR обладает фатальным недостатком, конечно, бессмысленно :)
                                • 0
                                  Прокладка для иешечки стала популярной потому что давала реальную новую возможность, которая была очень востребована, а делать прокладку ради экономии 50 — 100 кб на сжатии картинок с прозрачностью… Обычные же джипеги — тоже могут жаться по разному. Тут выигрыш вообще минимален. И обычный Jpeg можно оптимизоровать без XR и webP. А кто из них лучше жмет — это вообще холивар… Так воспритие субъективно и сильно зависит от картинки

                                  Всякие плюшки — это конечно весело. Но зачем 100500 фич это обычным картинкам непонятно.

                                  IE9 сейчас по миру около 10%. Но если брать только win7 — то там его даже больше чем хрома.
                                  МС не выкатит ничего — они ушли от такой практики.

                                  Собственно WebM — сам имеет уж очень смутные перспективы. Кроме гугла на ютьюбе который в ущерб себе кодирует все видео в 2 формата — нигде его не встречал. А видео на h.264 уже почти обыденность.

                                  Ну в общем — они никогда не договорятся.
                                  • +2
                                    > они ушли от такой практики

                                    Пруфлинк или фейл!

                                    Нет, серьезно, если это действительно так, я побежал за шампанским. Но на сегодняшний день мы имеем, к примеру, OOXML, который как бы открытый, но патентованный; .NET, который почти совсем открытый, но патентованный; IE9, который бесплатный, но купите, пожалуйста, висту или 7, и так далее.

                                    > они никогда не договорятся.

                                    Тут согласен на все 100! :-)
                                    • 0
                                      Само собой все патентованное. Так принято. Или завтра кто нибудь зарегистрирует патент и подаст в суд. — Какая то мелкая конторка отсудила у МС миллионы долларов за как раз ООХМЛ — алгорит хранение данных в нем вроде совпадал с патентом.

                                      Или думаете гугл не патентует ничего, что сделал?

                                      Ну а IE9 — это вообще то часть Windows. Мак Ос тоже бесплатна — только Мак купить нужно)
                                      • 0
                                        > Мак Ос тоже бесплатна
                                        То, что её нельзя купить, не значит что она бесплатна.
                                        • 0
                                          А вы попробуйте купить макбук и потребовать деньги за Мак Ос — потому что не будете ей пользоваться.

                                          А вообще странно было бы требовать продать один программный продукт, который идет в составе другого
                            • +2
                              > А для них 256 хватает
                              То-то большинство крутилок сделано png-спрайтом со сменой кадров на js.

                              > 2 и 3 пункты не сильно существенные.
                              Ну так то конечно, кому интереснее уменьшение изображения в 5 раз (пример с цветком).
                              code.google.com/intl/ru-RU/speed/webp/gallery2.html#samples
                              • 0
                                Ни разу таких не видел. Все обычный — гиф — как например на хабре справа от вас. Могу предположить что спрайтовые позволяют тоньше управлять процессом.

                                >> habrahabr.ru/blogs/google/105335/#comment_3298979
                                Сами ведь приводили тесты)

                                А цветок это безусловно круто. Только сильно погоды не делает для 95% сайтов. Картинка уж сильно не типовая.
                                • +1
                                  >> habrahabr.ru/blogs/google/105335/#comment_3298979
                                  > Сами ведь приводили тесты)
                                  Там речь не о том, что формат плохой, а о том, что сравнение, сделанное Гуглом было, мягко говоря, не совсем объективным. С тех пор галерея поменялась, стала более объективной.
                                  • 0
                                    Нашли тип картинки, где реальное преимущество есть. И вся галерея — теперь только этого типа.

                                    Это не стоит внедрения нового формата — путем навешивания костылей.
                      • +2
                        знали бы вы как такой формат насущен как стандарт! тут любые средства хороши
                      • 0
                        Мне пока JPEG XR больше нравится
                        • +4
                          Чем?
                          • +1
                            Для интереса дополнил сравнение форматов из википедии картинкой в webp. Про качество судить не берусь — дело это ой какое субъективное, смотрите сами:

                            img9.imageshack.us/img9/6596/demop.png

                            Но в случае с JPEG XR вам понадобится флеш-обёртка не только в IE6-8, но и в FF, Chrome, Opera…
                            • 0
                              А оригинал сколько весил?
                              • 0
                                Оригинал — который самая левая картинка? 562 КБ в bmp, 408 КБ в png без специальных оптимизаций.
                          • +1
                            Прочитав заголовок, можно понять, что речь идёт о каких-то новостях формата ВП (новости в формате ВП).
                            • 0
                              > я распаковал и отформатировал пример с сайта, и выложил на pastebin. Приятного изучения!

                              Это просто адски толсто :-) Вы хоть обратили внимание, что форматируете автоматически пожатый javascript? :-)
                              • 0
                                Вы проявляете невнимательность, уважаемый. Автоматически пожатый packer'ом javascript был аккуратно распакован перед форматированием. А то, что переменные названы чёрте знает как, в коде куча «магических чисел» и так далее — следствия портирования сишной библиотеки на javascript. Удивительно, что это вообще работает. Учитывая, что портирование начато в августе — о какой-либо «красоте кода» говорить по меньшей мере преждевременно.
                                • +2
                                  Да ладно, вполне красивый код. Любоваться можно бесконечно, главное, ничего не трогать )
                              • +3
                                Затестировал в Paint.NET, скриншот окна:
                                PNG (24 bit) — 278.8 Kb
                                WebP (Preset: Text, Quality: 95, Encoding quality: 6, прочие параметры без изменений) — 122,8 Kb.
                                Разница на глаз не заметна — смотрел вдумчиво, на градиенты, четкость букв и прочие муары.
                                • +1
                                  Позволил себе сделать наглядную демонстрацию из вашего примера.
                                  • 0
                                    Что говорят ваши глаза, разница видна?
                                • +1
                                  Проглядел. Свечение вокруг логотипа более ступенчатое в WebP-версии. Градиенты как лакмусовая бумажка :)
                                  • 0
                                    Я там вижу одну ступеньку. Реально для 90% случаев не нужна бОльшая точность. Фактически, скриншоты с пиксельной точностью нужны в автоматизированном тестировании — а где ещё?
                                    • +2
                                      Эти гребанные ступеньки…

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