Рубрика «оптимизация изображений»

в 12:42, , рубрики: Блог компании Mail.Ru Group, браузеры, высокая производительность, загрузка картинок, Клиентская оптимизация, никто не читает теги, оптимизация изображений, Разработка веб-сайтов
Максимально оптимизированная веб-загрузка изображений в 2021 году - 1

В этой статье я расскажу про 8 методик оптимизации загрузки изображений, которые уменьшают необходимую пропускную способность сети и нагрузку на процессор при выводе на экран. Приведу примеры аннотированного HTML, чтобы вам было легче воспроизвести. Какие-то методики уже давно известны, а какие-то появились относительно недавно. В идеале, ваш любимый механизм публикации веб-документов (например, CMS, генератор статичных сайтов или фреймворк для веб-приложений) должен всё это реализовывать из коробки.
Читать полностью »

в 10:43, , рубрики: javascript, графика, Клиентская оптимизация, обработка изображений, оптимизация изображений, разработка

Привет! Представляю вашему вниманию перевод статьи «How to optimize image loading on your website».

Если на сайте много красивых изображений, то это здорово, но они могут значительно ухудшить время загрузки и как результат — пострадает SEO, а многие пользователи будут закрывать сайт еще до того, как он загрузится. Нередко бывает, что несколько мегабайт изображений загружаются просто, чтобы показать слайдер на главной странице.

Представьте, что вы заходите на такой сайт через медленный мобильный интернет, это может занять очень много времени и большинство пользователей в такой ситуации просто закроют ваш сайт еще до его загрузки. Хороший способ протестировать это — воспользоваться возможностью ограничить скорость интернета через Chrome Devtools.

Проблема

Проблема в том, что часто бывает так, что сам контент уже загружен, а изображения все еще загружаются. В итоге пользователь может увидеть пустое пространство там, где изображения загружаются медленно. Это явно не то, чего вы хотели бы.
Читать полностью »

в 6:49, , рубрики: VR, виртуальная реальность, Дизайн игр, оптимизация изображений, разработка игр, Разработка под AR и VR, трёхмерная графика

Создание графических ресурсов: рекомендации

Как создавать графику для VR — рекомендации Google - 1

Как художник VR и AR, я заметил две тенденции. Во-первых, постоянно появляются новые инструменты и практики, которые позволяют повысить качество наших работ. Но в то же время возвращаются техники и навыки конца 90-х и начала 2000-х. Они полностью применимы к виртуальной реальности, потому что вычислительные ресурсы в VR ограничены. И если вы только начинаете свой путь, то вам стоит рассмотреть разнообразные подходы. Итак, если вы художник и недавно занялись VR, то вот некоторые из моих самых любимых советов по созданию качественных графических ресурсов.
Читать полностью »

в 9:00, , рубрики: css, html, javascript, Блог компании Яндекс, Клиентская оптимизация, оптимизация, оптимизация изображений, оптимизация кода

Виталий vithar Харисов — один из ключевых разработчиков и руководителей Яндекса. На московском Я.Субботнике по фронтенду Виталий рассказал про лёгкую версию поиска для медленных соединений и способы оптимизации кода, позволяющие уложиться в 10 килобайт.

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

в 16:54, , рубрики: jpg, lossless, PNG, оптимизация изображений, сжатие данных

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

В тесте принимали участие следующие программы.

Для PNG:

1. Leanify 0.4.3 (x64)
2. pingo v0.79c
3. pinga v0.09
4. OptiPNG 0.7.6
5. pngout
6. PngOptimizer 2.5 (x64)
7. advpng aka AdvanceCOMP v1.23
8. ECT 0.6 (x64)
9. TruePNG 0.6.2.2
10. pngwolf-zopfli 1.1.1 (x64)

Для JPEG:

1. Leanify 0.4.3 (x64)
2. pingo v0.79c
3. ECT 0.6 (x64)
4. mozjpeg 3.2 (x64)
5. jhead 3.00
6. jpegoptim v1.4.4 (x64)
7. jpegtran
Читать полностью »

в 11:22, , рубрики: IT-стандарты, jpeg, PDF, Клиентская оптимизация, обработка изображений, оптимизация изображений, хранение изображений

Изображения в формате JPEG, помимо собственно файлов с расширением .jpg, можно встретить внутри PDF-файлов и TIFF-файлов.

Стейкхолдеров технологии JPEG можно, наверное, разделить на следующие группы:

  • разработчики фотоаппаратов и сканеров;
  • фотографы (большие фотографии в хорошем разрешении с высокими требованиями к качеству);
  • соцсети и CDN'ы типа imgix, которые раздают залитые фоточки неконтролируемого UGC-происхождения, количества и размера в пережатом виде;
  • вебмастеры, которые управляют умеренным количеством не-UGC картинок с контролируемым качеством;
  • любители отсканированных бумажных книг и прочих исторических источников;

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

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

в 6:26, , рубрики: WebP, Клиентская оптимизация, оптимизация изображений, ускорение сайта

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

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

Если все так — то переходим к сути.
Читать полностью »

в 16:14, , рубрики: gif, веб-дизайн, обработка изображений, оптимизация изображений

0*wsxGNSYkec4cuuDJ

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

В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.
Читать полностью »

в 13:03, , рубрики: Блог компании Generate.club, контент, оптимизация изображений, оптимизация конверсии, Программирование, Статистика в IT, метки:

Все мы знаем знаменитое выражение «Content is king». Но, если говорить более конкретно, нужно уточнить, что в Интернете важнее всего изображения (как копирайтеру, мне сложно говорить эти слова, но это действительно так).

Как пользователи интернета, мы жаждем изображений — чем больше, тем лучше. Но, как разработчики, создатели контента и владельцы сайтов, мы впадаем в тоску из-за проблем с изображениями. По последним данным HTTP Archive, средняя страница весит 1795 КБ, из которых 56% (1000 KB) занимают изображения. Это делает изображения, наверное, наиболее благодатной почвой для улучшения скорости загрузки страниц. И это — то, почему мы в Radware так много времени вкладываем в оптимизацию изображений.

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

Чеклист оптимизации изображений - 1
Изображение взято с сайта litmus.com

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

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