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

  1. Вступление
  2. Избегайте изображений, если это возможно
  3. Фон
  4. Пиксели в сети
  5. Расчет отношения пикселей устройства
  6. Обзор методов изображения HiDPI
  7. Сильно сжатое изображение HiDPI
  8. Прогрессивные форматы изображений
  9. Используйте JavaScript, чтобы решить, какое изображение загрузить
  10. Решите, какое изображение загрузить на сервер
  11. Используйте медиазапросы CSS
  12. Используйте новые функции браузера
  13. Функции браузера для поддержки высокого разрешения
  14. Лучшие практики для набора изображений
  15. Изображение Srcset
  16. Использование набора изображений для элементов изображения
  17. Polyfilling srcset
  18. Заключение

Вступление

Одной из особенностей современного сложного устройства является то, что очень широкий диапазон плотностей пикселей экрана имеется в наличии. Некоторые устройства оснащены дисплеями с очень высоким разрешением, а другие отстают. Разработчики приложений должны поддерживать диапазон плотности пикселей, который может быть довольно сложным. В мобильном Интернете проблемы усугубляются несколькими факторами:

  • Большое разнообразие устройств с различными форм-факторами.
  • Ограниченная пропускная способность сети и время автономной работы.

С точки зрения изображений, цель разработчиков веб-приложений состоит в том, чтобы максимально качественно обслуживать изображения самого высокого качества . В этой статье будут рассмотрены некоторые полезные методы для этого сегодня и в ближайшем будущем.

Избегайте изображений, если это возможно

Прежде чем открывать эту банку червей, помните, что в Интернете есть много мощных технологий, которые в значительной степени не зависят от разрешения и DPI. В частности, текст, SVG и большая часть CSS будут «просто работать» из-за функции автоматического масштабирования пикселей в Интернете (через devicePixelRatio ).

Тем не менее, вы не всегда можете избежать растровых изображений. Например, вам могут быть предоставлены активы, которые было бы довольно трудно воспроизвести в чистом SVG / CSS, или вы имеете дело с фотографией. Хотя вы можете автоматически конвертировать изображение в SVG, векторизация фотографий не имеет большого смысла, потому что уменьшенные версии обычно выглядят не очень хорошо.

Фон

Очень короткая история плотности отображения

В первые дни компьютерные дисплеи имели плотность пикселей 72 или 96 точек на дюйм ( точек на дюйм ).

Дисплеи постепенно улучшают плотность пикселей, во многом благодаря мобильному варианту использования, когда пользователи обычно держат свои телефоны ближе к лицу, делая пиксели более заметными. К 2008 году телефоны с разрешением 150 точек на дюйм стали новой нормой. Тенденция к увеличению плотности отображения продолжилась, и на сегодняшних новых телефонах используются дисплеи с разрешением 300 точек на дюйм (бренд «Retina» от Apple).

Святой Грааль, конечно, является дисплеем, в котором пиксели полностью невидимы. Для форм-фактора телефона текущее поколение дисплеев Retina / HiDPI может быть близко к этому идеалу. Но новые классы оборудования и носимых устройств, таких как Project Glass скорее всего, будет продолжать увеличивать плотность пикселей.

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

Павианы! при различной плотности пикселей.

Пиксели в сети

Когда сеть была разработана, 99% дисплеев имели разрешение 96 точек на дюйм (или притворился ), и несколько положений были сделаны для изменения этого фронта. Из-за большой разницы в размерах и плотности экрана нам нужен был стандартный способ, чтобы изображения выглядели хорошо при различных плотностях и размерах экрана.

Спецификация HTML недавно решил эту проблему, определив эталонный пиксель, который производители используют для определения размера пикселя CSS.

Рекомендуется, чтобы опорный пиксель представлял собой угол обзора одного пикселя на устройстве с плотностью пикселей 96 точек на дюйм и расстоянием до считывающего устройства на расстоянии вытянутой руки. Следовательно, для номинальной длины руки в 28 дюймов угол обзора составляет около 0,0213 градусов.

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

Расчет отношения пикселей устройства

Предположим, что у смартфона есть экран с физическим размером пикселя 180 пикселей на дюйм (ppi). Расчет отношения пикселей устройства занимает три шага:

  1. Сравните фактическое расстояние, на котором устройство удерживается на расстоянии для опорного пикселя.

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

  2. Умножьте отношение расстояний на стандартную плотность (96ppi), чтобы получить идеальную плотность пикселей для данного расстояния.

    idealPixelDensity = (28/18) * 96 = 150 пикселей на дюйм (приблизительно)

  3. Возьмите отношение плотности физических пикселей к идеальной плотности пикселей, чтобы получить соотношение пикселей устройства.

    devicePixelRatio = 180/150 = 1,2

Диаграмма, показывающая один опорный угловой пиксель, чтобы проиллюстрировать, как рассчитывается devicePixelRatio.

Так что теперь, когда браузеру необходимо знать, как изменить размер изображения, чтобы оно соответствовало экрану в соответствии с идеальным или стандартным разрешением, браузер использует соотношение пикселей устройства 1,2, что говорит о том, что для каждого идеального пикселя это устройство имеет 1,2 физических пикселя. , Формула перехода между идеальными (как определено веб-спецификацией) и физическими (точки на экране устройства) пикселями выглядит следующим образом:

PhysicalPixels = window.devicePixelRatio * idealPixels

Исторически производители устройств имели тенденцию округлять PixelRatios (DPR). IPhone и iPad от Apple сообщают о DPR 1, а их эквиваленты Retina - 2. Спецификация CSS рекомендует

блок пикселей относятся к целому числу пикселей устройства, которые наилучшим образом аппроксимирующей опорного пикселя.

Одна из причин, почему коэффициенты округления могут быть лучше, заключается в том, что они могут привести к меньшему субпиксельные артефакты ,

Однако реальность ландшафта устройств гораздо более разнообразна, и телефоны Android часто имеют DPR 1,5. Планшет Nexus 7 имеет DPR ~ 1,33, который был получен в результате расчета, аналогичного приведенному выше. Ожидайте видеть больше устройств с переменными DPRs в будущем. Из-за этого вы никогда не должны предполагать, что ваши клиенты будут иметь целочисленные DPR.

Обзор методов изображения HiDPI

Существует множество методов для решения проблемы быстрого и качественного отображения изображений, которые можно разделить на две категории:

  1. Оптимизация отдельных изображений и
  2. Оптимизация выбора между несколькими изображениями.

Подходит одно изображение: используйте одно изображение, но сделайте что-нибудь умное с ним. Недостатком этих подходов является то, что вы неизбежно жертвуете производительностью, поскольку вы будете загружать изображения HiDPI даже на старые устройства с более низким DPI. Вот несколько подходов для случая с одним изображением:

  • Сильно сжатое изображение HiDPI
  • Полностью потрясающий формат изображения
  • Прогрессивный формат изображения

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

  • JavaScript
  • Доставка на сервер
  • CSS медиа запросы
  • Встроенные функции браузера (image-set (), <img srcset>)

Сильно сжатое изображение HiDPI

Изображения уже составляют колоссальные 60% пропускной способности потратил скачивание среднего сайта. Предоставляя изображения HiDPI всем клиентам, мы увеличим это число. Насколько больше это будет расти?

Я провел несколько тестов, которые генерировали 1x и 2x фрагменты изображения с качеством JPEG в 90, 50 и 20. Вот сценарий оболочки Я использовал (используя ImageMagick ) сгенерировать их:

Образцы изображений при разных компрессиях и плотности пикселей.

Из этой небольшой ненаучной выборки кажется, что сжатие больших изображений обеспечивает хороший компромисс между качеством и размером. На мой взгляд, сильно сжатые 2х образы на самом деле выглядят лучше, чем несжатые 1х картинки.

Конечно, обслуживание 2-кратных изображений низкого качества с высокой степенью сжатия на 2-х устройствах хуже, чем обслуживание более качественных устройств, и вышеупомянутый подход влечет за собой потери качества изображения. Если вы сравните качество: 90 изображений с качеством: 20 изображений, вы увидите снижение четкости и увеличение зернистости. Эти артефакты могут быть неприемлемы в случаях, когда высококачественные изображения являются ключевыми (например, приложение для просмотра фотографий), или для разработчиков приложений, которые не хотят идти на компромисс.

Вышеупомянутое сравнение было сделано полностью со сжатыми JPEG. Стоит отметить, что есть много компромиссов между широко распространенными форматами изображений (JPEG, PNG, GIF), что приводит нас к ...

WebP довольно убедительный формат изображения это сжимает очень хорошо, сохраняя высокое качество изображения. Конечно, это не везде реализовано еще!

Один из способов - проверить поддержку WebP через JavaScript. Вы загружаете изображение размером 1 пиксель через data-uri, ждете, пока загрузятся или сработают события ошибки, а затем убедитесь, что размер правильный. Modernizr корабли с таким скрипт обнаружения функций , который доступен через Modernizr.webp.

Однако лучший способ сделать это - напрямую в CSS, используя функция изображения () , Так что если у вас есть изображение WebP и резервный JPEG, вы можете написать следующее:

#pic {background: image ("foo.webp", "foo.jpg"); }

Есть несколько проблем с этим подходом. Во-первых, функция image () широко не используется. Во-вторых, несмотря на то, что сжатие WebP уносит JPEG из воды, оно все еще является относительно постепенным улучшением - примерно на 30% меньше, исходя из этого Галерея WebP , Таким образом, одного WebP недостаточно для решения проблемы высокого разрешения.

Прогрессивные форматы изображений

Прогрессивные форматы изображений, такие как JPEG 2000, Progressive JPEG, Progressive PNG и GIF имеют (несколько обсуждаемый) преимущество видеть изображение прийти на место, прежде чем он полностью загружен. Они могут нести некоторый размер накладных расходов, хотя есть противоречивые данные об этом. Джефф Этвуд утверждал этот прогрессивный режим «добавляет около 20% к размеру изображений PNG и около 10% к размеру изображений JPEG и GIF». Тем не мение, Стоян Стефанов утверждал что для больших файлов прогрессивный режим более эффективен (в большинстве случаев).

На первый взгляд, прогрессивные изображения выглядят очень многообещающе в контексте предоставления изображений самого высокого качества как можно быстрее. Идея состоит в том, что браузер может прекратить загрузку и декодирование изображения, когда узнает, что дополнительные данные не повысят качество изображения (т. Е. Все улучшения качества воспроизведения являются субпиксельными).

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

Одним из способов решения этой проблемы является использование Диапазон HTTP запрос, который позволяет браузерам указывать диапазон байтов для выборки. Умный браузер может сделать запрос HEAD, чтобы получить заголовок, обработать его, решить, какая часть изображения на самом деле нужна, и затем извлечь. К сожалению, HTTP Range плохо поддерживается на веб-серверах, что делает этот подход непрактичным.

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

Используйте JavaScript, чтобы решить, какое изображение загрузить

Первый и наиболее очевидный подход к решению, какое изображение загружать, - это использование JavaScript в клиенте. Этот подход позволяет вам узнать все о вашем пользовательском агенте и делать все правильно. Вы можете определить соотношение пикселей устройства с помощью window.devicePixelRatio, получить ширину и высоту экрана и даже потенциально сделать какое-либо прослушивание сетевого подключения с помощью navigator.connection или выдать ложный запрос, например библиотека foresight.js делает. Собрав всю эту информацию, вы можете решить, какое изображение загрузить.

Есть примерно один миллион библиотек JavaScript которые делают что-то подобное выше, и, к сожалению, ни один из них не является особенно выдающимся.

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

Решите, какое изображение загрузить на сервер

Вы можете отложить принятие решения на стороне сервера, написав собственные обработчики запросов для каждого изображения, которое вы обслуживаете. Такой обработчик будет проверять поддержку Retina на основе User-Agent (единственной информации, передаваемой на сервер). Затем, основываясь на том, хочет ли серверная логика обслуживать активы HiDPI, вы загружаете соответствующий ресурс (названный в соответствии с некоторыми известными соглашениями).

К сожалению, User-Agent не обязательно предоставляет достаточно информации, чтобы решить, должно ли устройство получать изображения высокого или низкого качества. Кроме того, само собой разумеется, что все, что связано с User-Agent, является взломом, и его следует избегать, если это возможно.

Используйте медиазапросы CSS

Будучи декларативными, медиазапросы CSS позволяют вам заявить о своем намерении и позволяют браузеру делать правильные вещи от вашего имени. В дополнение к наиболее распространенному использованию медиа-запросов - соответствию размеру устройства - вы также можете сопоставить devicePixelRatio. Соответствующий медиа-запрос имеет отношение устройство-пиксель, и, как и следовало ожидать, имеет связанный минимальный и максимальный варианты. Если вы хотите загрузить изображения с высоким разрешением и соотношение пикселей на устройстве превышает пороговое значение, вот что вы можете сделать:

# my-image {background: (low.png); } @media только экран и (min-device-pixel-ratio: 1.5) {# my-image {background: (high.png); }}

Это становится немного сложнее, когда все префиксы вендоров смешаны, особенно из-за безумия различия в размещении из префиксов "min" и "max":

экран @media only и (min - moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1,5 ), (min-device-pixel-ratio: 1.5) {# my-image {background: url (high.png); }}

При таком подходе вы снова получаете преимущества предварительного анализа, который был утерян с помощью решения JS. Вы также получаете гибкость в выборе отзывчивых точек останова (например, у вас могут быть изображения с низким, средним и высоким DPI), которые были потеряны при подходе на стороне сервера.

К сожалению, это все еще немного громоздко и приводит к странно выглядящему CSS (или требует предварительной обработки). Кроме того, этот подход ограничен свойствами CSS, поэтому нет способа установить <img src>, и все ваши изображения должны быть элементами с фоном. Наконец, строго полагаясь на соотношение пикселей на устройстве, вы можете оказаться в ситуации, когда ваш смартфон с высоким разрешением в конечном итоге загружает массивный ресурс изображения в 2 раза, находясь на EDGE соединение , Это не лучший пользовательский опыт.

Используйте новые функции браузера

В последнее время много обсуждается вопрос о поддержке веб-платформы проблемы изображения с высоким разрешением. Apple недавно ворвалась в космос, принеся изображение набора () Функция CSS для WebKit. В результате и Safari, и Chrome поддерживают его. Поскольку это функция CSS, функция image-set () не решает проблему с тегами <img>. Войти @srcset , которая решает эту проблему, но (на момент написания этой статьи) не имеет ссылочных реализаций (пока!). Следующий раздел углубляется в набор изображений и srcset.

Функции браузера для поддержки высокого разрешения

В конечном итоге решение о том, какой подход вы выберете, зависит от ваших конкретных требований. Тем не менее, имейте в виду, что все вышеупомянутые подходы имеют недостатки. Однако, глядя вперед, после того, как image-set и srcset получат широкую поддержку, они станут подходящим решением этой проблемы. Пока поговорим о некоторых лучших практиках, которые могут приблизить нас к этому идеальному будущему, насколько это возможно.

Во-первых, как эти два разных? Ну, image-set () - это функция CSS, подходящая для использования в качестве значения свойства CSS фона. srcset - это атрибут, специфичный для элементов <img>, с похожим синтаксисом. Оба эти тега позволяют вам указывать объявления изображений, но атрибут srcset позволяет вам также настроить, какое изображение загружать в зависимости от размера области просмотра.

Лучшие практики для набора изображений

CSS-функция image-set () доступна с префиксом -webkit-image-set (). Синтаксис довольно прост, принимая одно или несколько разделенных запятыми объявлений изображений, которые состоят из строки URL или функции url (), за которой следует соответствующее разрешение. Например:

background-image: -webkit-image-set (url (icon1x.jpg) 1x, url (icon2x.jpg) 2x);

Это говорит браузеру, что есть два изображения на выбор. Один из них оптимизирован для 1х дисплеев, а другой для 2х дисплеев. Затем браузер выбирает, какой из них загружать, исходя из множества факторов, которые могут даже включать скорость сети, если браузер достаточно умен (в настоящее время, насколько я знаю, он не реализован).

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

Вместо указания 1x, 1,5x или Nx вы также можете указать определенную плотность пикселей устройства в dpi.

Это работает хорошо, за исключением браузеров, которые не поддерживают свойство image-set, которое вообще не показывает изображения! Это явно плохо, поэтому вы должны использовать запасной вариант (или серию запасных вариантов) для решения этой проблемы:

background-image: url (icon1x.jpg); background-image: -webkit-image-set (url (icon1x.jpg) 1x, url (icon2x.jpg) 2x); / * Это будет полезно, если набор изображений попадает на платформу без префикса. Также включите другие префиксные версии этого * / background-image: image-set (url (icon1x.jpg) 1x, url (icon2x.jpg) 2x);

Выше будет загружать соответствующий ресурс в браузерах, которые поддерживают набор изображений, и в противном случае использовать ресурс 1x. Очевидное предостережение заключается в том, что, хотя поддержка браузера image-set () низкая, большинство пользовательских агентов получат актив 1x.

Это демо использует image-set () для загрузки правильного изображения, возвращаясь к ресурсу 1x, если эта функция CSS не поддерживается.

В этот момент вам может быть интересно, почему бы просто не заполнить polyfill (то есть создать shim для JavaScript) image-set () и назвать его днем? Оказывается, реализовать CSS-функции довольно сложно. (Для подробного объяснения почему, см. Это обсуждение в стиле www ).

Изображение Srcset

Вот пример srcset:

<img alt = "my awesome image" src = "banner.jpeg" srcset = "banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">

Как вы можете видеть, в дополнение к объявлениям x, которые предоставляет image-set, элемент srcset также принимает значения w и h, которые соответствуют размеру области просмотра, пытаясь обслуживать наиболее релевантную версию. Приведенное выше будет отображать banner-phone.jpeg для устройств с шириной области просмотра менее 640 пикселей, banner-phone-HD.jpeg для небольших устройств с высоким разрешением экрана, banner-HD.jpeg для устройств с высоким разрешением с экранами более 640 пикселей и banner.jpeg на все остальное.

Использование набора изображений для элементов изображения

Поскольку атрибут srcset в элементах img не реализован в большинстве браузеров, может показаться заманчивым заменить ваши элементы img на <div> с фоном и использовать подход с набором изображений. Это будет работать с оговорками. Недостатком здесь является то, что тег <img> имеет давнее семантическое значение. На практике это важно в основном для веб-сканеров и по причинам доступности.

Если вы в конечном итоге используете -webkit-image-set, у вас может возникнуть соблазн использовать фоновое свойство CSS. Недостаток этого подхода заключается в том, что вам нужно указать размер изображения, который неизвестен, если вы используете изображение, отличное от 1x. Вместо этого вы можете использовать CSS-свойство содержимого следующим образом:

<div id = "my-content-image" style = "content: -webkit-image-set (url (icon1x.jpg) 1x, url (icon2x.jpg) 2x);"> </ div>

Это автоматически масштабирует изображение на основе devicePixelRatio. Увидеть этот пример вышеупомянутой техники в действии, с дополнительным отступлением к url ​​() для браузеров, которые не поддерживают набор изображений.

Polyfilling srcset

Одна удобная особенность srcset заключается в том, что он имеет естественный запасной вариант. В случае, когда атрибут srcset не реализован, все браузеры знают, как обрабатывать атрибут src. Кроме того, так как это просто атрибут HTML, можно создать полифилы с JavaScript ,

Этот polyfill идет с модульные тесты чтобы убедиться, что это как можно ближе к Спецификация насколько это возможно. Кроме того, существуют проверки, которые препятствуют выполнению полифиллом любого кода, если srcset реализован изначально.

Вот демонстрация полифилла В бою.

Заключение

Нет волшебной палочки для решения проблемы изображений с высоким разрешением.

Самое простое решение - полностью избежать изображений, вместо этого выбрав SVG и CSS. Однако это не всегда реалистично, особенно если у вас есть высококачественные изображения на вашем сайте.

Подходы в JS, CSS и использование на стороне сервера имеют свои сильные и слабые стороны. Однако наиболее перспективным подходом является использование новых функций браузера. Хотя поддержка браузером для набора изображений и srcset все еще не завершена, есть разумные варианты использования сегодня.

Подводя итог, мои рекомендации заключаются в следующем:

  • Для фоновых изображений используйте изображение набора с соответствующими запасными вариантами для браузеров, которые его не поддерживают.
  • Для изображений содержания используйте srcset polyfill или отступить к используя набор изображений (см. выше).
  • В ситуациях, когда вы готовы пожертвовать качеством изображения, рассмотрите возможность интенсивного использования сжатые 2x изображения ,

Похожие

Печать изображений в Photoshop Elements - Инструкции
... изображений в Photoshop Elements: Обзор Этот урок покажет вам, как печатать изображения в Photoshop Elements. Чтобы распечатать изображения в Photoshop Elements на принтере по умолчанию, выберите «Файл | Печать ... »из строки меню. Вы можете выбрать эту команду в «Редакторе фотографий» или в окне «Органайзер». После этого запускается диалоговое окно «Печать». Здесь вы можете выбрать принтер и установить параметры печати. В зависимости от версии используемых вами элементов ваше
Обзор Mozilla Firefox
2017 был отличным годом для Fire Fox , После нескольких лет отставания от основных конкурентов, Chrome и Edge, браузер Mozilla обрел новую жизнь с выпуском Quantum - крупнейшего обновления Firefox с момента его запуска 14 лет назад. Mozilla Firefox Скачать здесь:
Установите и используйте Apache Tomcat в CentOS 7
Узнайте, как установить и использовать Apache Tomcat в CentOS 7. Apache Tomcat - это контейнер Java-сервлетов, разработанный Apache, в котором можно развертывать Java-сервлеты и JSP. Apache Tomcat также функционирует как веб-сервер, который может поддерживать небольшие и средние веб-сайты. В этом руководстве также рассказывается, как установить и использовать Tomcat Web Admin Manager, который позволяет управлять Tomcat и виртуальными хостами из веб-браузера. Требования
Как получить доступ к Windows Media Center из любого браузера
Ваш Windows Media Center делает организацию и наслаждение музыкой, видео, фильмами и другими медиафайлами невероятно легко - но если вы хотите слушать или смотреть удаленно, вам не повезло. Бесплатный, чудесно названный Remote Potato позволяет вам использовать этот носитель из любого веб-браузера. Вот как это использовать: Скачайте и установите Remote Potato Server на ваш компьютер с Windows , Во время установки вам нужно
Google PageSpeed ​​Insights - 100/100 с помощью WordPress
... для скорости веб-сайта - удерживать ее менее 3 секунд. время загрузки. Как видно из приведенного ниже графика, эта лучшая практика далеко не соблюдается для сайтов, базирующихся в Соединенных Штатах. Кроме того, как рост размера веб-страницы Продолжается, рекомендуемая Google лучшая практика по поддержанию размера веб-сайта размером менее 500 КБ также в среднем не соблюдается. Постоянный рост
Caterpillar CAT B15
Мы протестировали очень интересный и надежный смартфон Caterpillar CAT B15 для крутых парней и злых девчонок. Компания, известная своими желтыми земснарядами, вилочными погрузчиками и кранами, решила носить подходящую одежду и обувь, чтобы предложить своим клиентам одинаково прочный
Huawei Watch 2 в тесте: лучшие умные часы?
Не каждый преемник умных часов похож на одно яйцо на другое. Это, безусловно, можно сказать о Huawei Watch 2. Вторые умные часы китайцев не только спортивнее, но и немного мощнее в толщине корпуса с безелем. У нас была базовая модель (от 349 франков), доступная для теста. Корпус круглосуточно выполнен из пластика, а дисплей Amoled защищен стеклом Gorilla Glass. Безель, кольцо дисплея, здесь сделан из керамики. По мнению Huawei, эта окантовка должна быть в шесть раз прочнее нержавеющей
PlayStation 4 Pro дебютирует на рынке. Что означает новая консоль Sony для очков PS VR?
Сегодня состоялась премьера новой консоли Sony - PlayStation 4 Pro. В связи с тем, что, как и в «обычной» PS4, вы можете подключить очки PlayStation VR к устройству, мы проверили, какую прибыль вам предложат VR-плееры. Сегодня дебютирует PlayStation 4 Pro - улучшенная версия PlayStation 4. По заявлению Sony, PS4 Pro имеет более чем в два раза более мощный графический процессор, который не только медленно запускает игры в разрешении 4K, но и обеспечивает
Веб-приложения: привнесение преимуществ нативных приложений в веб-браузер
Родные приложения всегда пользовались большим успехом с точки зрения пользовательского опыта и функциональности мобильной сети, но этот разрыв быстро сокращается благодаря HTML5 и развитию веб-приложений. Преимущества мобильная сеть с точки зрения большей досягаемости, доступности для различных типов устройств и преимуществ от поиска по ссылкам из социальных
Как играть в игры PlayStation 2 (PS2) на Mac с PCSX2
... для Windows и Linux. Благодаря паре лет на аппаратное обеспечение и порт Mac, ваш современный компьютер Apple также является подходящим кандидатом для почти идеальной эмуляции нежно запоминающейся второй домашней консоли Sony. Этот конкретный учебник поможет вам получить PCSX2 и работает на компьютере Snow Leopard или Lion Mac. Имейте в виду, что хотя многие игры будут полностью воспроизводимыми (некоторые будут работать со скоростью
Philips Screeneo HDP1590 - тестирование проектора
Philips Screeneo HDP1590 - это Apple среди проекторов. Вы покупаете, достаете из коробки, подключаете электричество - и все работает. Проблема в том, что вам нужно выделить большую сумму для покупки. Philips Screeneo HDP1590 / фото: mobiManiaK.pl

Комментарии

Кто должен купить это (и какая модель)?
Кто должен купить это (и какая модель)? Как бы мне ни понравилась моя первая неделя с Pixel Slate and Keyboard, это не устройство для всех. Зачем? Не всем нужен планшет с ОС Chrome, когда 2-в-1 или традиционный Chromebook лучше соответствуют их потребностям. Я заметил это, когда сказал, что ты должен задайте себе эти два вопроса, чтобы решить, подходит ли вам Pixel Slate
Com/css?
com/css? family = Noto + Serif: 400,400italic, 700,700italic' rel = 'stylesheet' type = 'text / css'> Примечание. Это приведет к появлению FOIT, который представляет собой вспышку невидимого текста. Вы также можете загрузить свои шрифты Google асинхронно, используя Google Web Font Loader , Просто поместите следующий код в нижний колонтитул. <script type = "text / javascript">
Но где Lenovo Сохранено - и, возможно, это был не тот конец?
В разделе «Параметры JavaScript» снимите флажок «Принудить JavaScript в?» Под опциями CSS установите флажок «Inline all CSS?» Font Awesome Многие люди, которые используют Font Awesome, берут файл CSS и помещают его в свой заголовок. Проблема в том, что если вы поместите это в свой заголовок, он станет блокировать рендеринг, так как CSS является блокировкой рендеринга . Поэтому мы берем следующий код и перемещаем его в нижний колонтитул прямо
Пазл - это очень весело, но какова ценность обучения в этой игре?
Пазл - это очень весело, но какова ценность обучения в этой игре? Пусть ваши ученики решают географические головоломки о континенте, стране, мире. Таким образом, они знают, где все принадлежит миру. Пусть ваши ученики решат загадку об изображении, изображающем особую среду или историческую фигуру. На уроках географии или истории они должны рассказать все, что знают о месте или человеке на изображении. Пусть студенты решат мозаику об изображении. Например, изображение
Разве это не справедливо?
Разве это не справедливо? Мы желаем вам много веселья с вашими исследованиями Smartwatch smartwatch-im-praxistest.de !
Вы подключили свою квартиру к интернету или только собираетесь это сделать, но вам не нравятся кабели в квартире?
Вы подключили свою квартиру к интернету или только собираетесь это сделать, но вам не нравятся кабели в квартире? Может у вас несколько устройств, которым необходим выход в интернет? Тогда роутер - именно то, что вам нужно! Устройство, которое позволяет пользоваться интернетом без проводов и выходить в сеть из любой точки
Что это значит?
Что это значит? Что ж, по сравнению с традиционными проекторами, мы можем выставить предложение Philips буквально в нескольких десятках сантиметров от стены, наслаждаясь большим изображением. Если для классического оборудования нам понадобится, например, расстояние около двух метров для отображения 50-дюймового изображения, то в HDP1590 мы получим аналогичный результат на расстоянии всего 10 сантиметров. Отодвинув проектор от стены, мы увеличим диагональ до 100 дюймов
Как это сделать?
Как это сделать? Мы привыкли показывать вам Как подключить мышь или клавиатуру к Android с помощью USB-кабеля OTG , К сожалению, для этого потребовалось подключить оборудование к телефону или планшету с помощью специального OTG-кабеля, поскольку только
Они оба имеют одинаковую емкость, но пока неизвестно, как долго продлится Pixi - будут ли его новые чипы потреблять меньше энергии, чем Apple?
Они оба имеют одинаковую емкость, но пока неизвестно, как долго продлится Pixi - будут ли его новые чипы потреблять меньше энергии, чем Apple? Или его светодиодная вспышка будет потреблять гораздо больше энергии? Связь является самой большой особенностью, которая выделяется. В Pixi нет Wi-Fi (по-видимому, чтобы сэкономить деньги), и это серьезно повлияет на взаимодействие пользователей с устройством, поскольку единственный вариант для беспроводной загрузки - это EVDO, который имеет
Как это звучит?
Как это звучит? Чтобы проверить, доступны ли ваши доменные имена, перейдите на Bluehost и введите свои параметры в их новую проверку домена. 3. Запланируйте свой первый пост и подумайте о других Это хорошая идея, чтобы начать
Могу ли я использовать это в то время как контролируется компанией сигнализации?
Могу ли я использовать это в то время как контролируется компанией сигнализации? Технически это возможно, но вам необходимо получить правильный CSID и номер учетной записи для вашей панели. Обратите внимание, что если вы сбросите настройки вашего номеронабирателя, это не позволит вашей компании-охраннику контролировать ваш дом. Могу ли я одновременно использовать другие радиоустройства дальнего радиуса действия? Шина панели ограничена одним устройством

Насколько больше это будет расти?
Во-первых, как эти два разных?
В этот момент вам может быть интересно, почему бы просто не заполнить polyfill (то есть создать shim для JavaScript) image-set () и назвать его днем?
Что означает новая консоль Sony для очков PS VR?
Кто должен купить это (и какая модель)?
Зачем?
Com/css?
В разделе «Параметры JavaScript» снимите флажок «Принудить JavaScript в?
» Под опциями CSS установите флажок «Inline all CSS?
Пазл - это очень весело, но какова ценность обучения в этой игре?