Рубрика «WebP»

в 20:06, , рубрики: WebP, извращения, никто не читает теги, сжатие, сжатие без потерь

Я хочу, чтобы посетители моего сайта наслаждались им, так что я забочусь об accessibility и проверяю, что даже без JavaScript тут есть, на что смотреть. Я забочусь о том, насколько быстро грузятся страницы, ведь на некоторых из них есть большие иллюстрации, поэтому я минифицирую HTML.

Вот только есть один нюанс, который ставит мне палки в колёса и не даёт сделать блог лёгким как пёрышко.

Палка

Наиболее сильно уменьшает трафик (а значит и latency на мобильных устройствах!) не минификация, а сжатие. HTTP поддерживает gzip и Brotli через заголовок Content-EncodingЧитать полностью »

в 9:00, , рубрики: avif, chrome, chromium, FLIF, Google, JPEG XL, JPEG XL Viewer, Jpegli, JXL, libjxl, PNG, ruvds_статьи, WebP, сжатие без потерь, сжатие изображений
JPEG XL лучше всех, но Google против - 1
JPEG XL превосходит все форматы по уровню сжатия и визуальному восприятию (DSSIM), источник

Оригинальный формат JPEG разработан в далёком 1992 году и уже устарел. Вопрос в том, кто придёт ему на смену. Идеальной заменой казался JPEG XL, в сравнительных тестах он показывает превосходство над AVIF, WebP и другими форматами. Можно было бы сказать, что будущее за JPEG XL, если бы не один нюанс: в 2022 году корпорация Google почему-то удалила его поддержку из браузера Chrome. И не хочет возвращать обратно.
Читать полностью »

в 17:38, , рубрики: css, html, html-верстка, jpeg, optimization, PNG, WebP, webpack, Клиентская оптимизация, плагины, сборщик пакетов, сжатие данных, системы сборки

Как вы знаете, формат изображений WebP в большинстве случаев имеет меньший вес, по сравнению со своими братьями: png и jpeg. Поэтому использовать его в своих приложениях - это хорошая практика.

А как же пользователи, устройства которых не поддерживают данный формат?

В этом случае нам помогает тег <picture> или значение image-set свойства background-image. Просто пишем такие магические конструкции и браузер сам выберет тот источник, который понимает:

<!-- for HTML... -->
<picture>
  <source type="image/webp" srcset="images/cat.webp">
  <img src="images/cat.jpg" width="100" height="100" alt="Cat">
</picture>
Читать полностью »

в 9:00, , рубрики: avif, chrome, css, designMode, html, HTTP/2 Server Push, imagemagick, javascript, JPEG XL, picture, Reporting API, ruvds_статьи, seo, URI-фрагмент, WebP, Блог компании RUVDS.com, браузеры, тригонометрические функции

Интересные трюки HTML, CSS и JS - 1


Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.

Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.
Читать полностью »

в 13:54, , рубрики: avifenc, Guetzli, mezzanine, python, WebP, Разработка веб-сайтов

Всё началось примерно 10 лет назад, когда захотелось, чтобы вот этот вот контейнер выглядел прилично, не имел явно зазубренных граней, но при этом загружался за разумное время.

Правый контейнер ощутимо "царапает" глаз
Правый контейнер ощутимо "царапает" глаз

Текст может быть интересен тем, кто живёт примерно также, как мы.

А как это?

  1. Читать полностью »

в 8:00, , рубрики: docker, Elder.js, FirstDEDIC, firstvds, Go, go-bindata, HTTPServ, Hugo, MPA, mTCP, Qwik, Redbean, Service Workers, SourceHut, SPA, WebP, Блог компании FirstVDS, браузеры, Разработка веб-сайтов, хостинг
Возрождение простых сайтов. Статика, 0kB JS, ничего лишнего - 1
Как мы обсуждали в прошлый раз, удручающее ожирение сайтов и софта вернуло моду на простые, маленькие проекты. И сейчас происходит своеобразный ренессанс веба 90-х, вплоть до стиля Geocities (такой был бесплатный хостинг) и веб-страниц в виде PDF. Таковы примеры самореализации. У каждого человека — уникальный сайт, который отличается от остальных и отражает его личность.

Статический сайт можно выполнить в одном файле HTML, а динамический — в одном бинарнике (под катом). Тенденция видна везде. Современные фреймворки даже хвалятся «0кБ JavaScript» по дефолту, а браузеры внедрили технические усовершенствования, которые во многом аннулируют преимущества использования SPA.
Читать полностью »

в 15:17, , рубрики: AV1, H.264, HEIF, jpeg, jpeg2000, jpg, mpeg, PNG, svg, VP8, WebP, Блог компании Яндекс, браузеры, изображения, интерфейсы, картинки, обработка изображений, принципы работы, Работа с видео, фронтенд

Картинки и видео — это «чёрные ящики», внутри которых лежит много интересного и непонятного. Но можно заглянуть внутрь некоторых форматов, всё там поменять и посмотреть, что из этого получится.

Полина Гуртовая из компании «Злые марсиане» выступила на нашей конференции «Я Картинки как коробки — что внутри? Доклад в Яндексе - 1 Фронтенд» в феврале. При помощи эксперимента Полина разобралась, как превращать простые картинки в «эффективные изображения» с метриками. Инструменты, которые могут делать это за нас, Полина рассмотрела ближе к концу доклада. Получился большой экскурс во внутренности и принципы работы разных форматов: от PNG и JPEG до AV1 и экзотики.

— Всем привет. Меня зовут Полина, я фронт в компании «Злые марсиане».
Читать полностью »

в 6:27, , рубрики: jpeg-xr, jpeg2000, lazy load, page speed, seo, WebP, оптимизация кода, оптимизация сайта, поисковая оптимизация

Йо-йо! Отличная штука SEO. Никто не знает, что делать наверняка, почему сайт «не в топ» и почему онлайн-бизнес не работает. И в поисках истинной причины владельцы сайтов становятся как сорокалетние тётушки, которые верят всякой ерунде цыганок на рынке. И вот взяв в руки клавиатуру и набрав запрос в поисковике они видят «магический совет» — «100 баллов по google page speed и будет тебе счастье». Ни чего плохого в стремлении ускорить свой сайт нет, только fl и всякие kwork'и пестрят заявками типа «оптимизировать сайт до 100 баллов на page speed», а сами владельцы сайтов не понимают сколько на самом деле может стоить им эта оптимизация.

Сегодня я хочу рассказать почему достичь заветного значения практически невозможно на некоторых решения или это будет весьма затратно. Я разберу некоторые советы page speed и расскажу о них.
Читать полностью »

в 11:22, , рубрики: AV1, avif, edge, Firefox, WebP, обработка изображений, Разработка веб-сайтов

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

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

Читать полностью »

в 17:51, , рубрики: Blink, Butteraugli, Cloudinary, Giflossy, Guetzli, ImageOptim, jpeg-recompress, libjpeg-turbo, Mozjpeg, pngquant, progressive jpeg, svg, SVGO, WebP, браузеры, обработка изображений, Разработка веб-сайтов, Серверная оптимизация, сжатие данных, субдискретизация, треллис-квантование

Автор электронной книги — Эдди Османи, один из руководителей разработки Google Chrome

tl;dr

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

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

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

На чтение статей и настройку конфигурации вы потратите время, которое дороже оплаты их услуг (у Cloudinary есть бесплатный тариф). Но если всё-таки не хотите отдавать работу на аутсорсинг по соображениям стоимости или из-за дополнительной latency, то выбирайте приведённые выше варианты с открытым исходным кодом. Проекты Imageflow или Thumbor предлагают альтернативу на собственном хостинге.
Читать полностью »

123
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js