Фон вместо встроенных изображений для мобильной оптимизации с помощью медиа-запросов?

Question

Ive Mobile оптимизировал мой сайт с помощью медиа-запросов. Все выглядит так, как мне бы хотелось, но ненужные изображения (поскольку они скрыты с помощью css) загружаются, что замедляет время загрузки страницы.

Кажется, самое простое решение - заменить как можно больше встроенных изображений на div с фоновыми изображениями. Затем я могу спрятать div с помощью css для мобильной версии.

Я знаю, что в этом есть потенциальные недостатки, хорошо изложенные в этом посте: Когда использовать IMG против CSS background-image?

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

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

Обратите внимание, я провел несколько экспериментов с iPhone и Android (я жду, чтобы получить несколько Blackberrys), и я знаю, чтобы остановить загрузку фоновых изображений, мне нужно установить отображение ни одного из родителей div, а не div с самим фоновым изображением.

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

Спасибо

Answer 1

К сожалению, нет прекрасных ответов на проблемы, которые вы пытаетесь решить.

Во-первых, у вас есть возможность перемещать все из тегов img в фоновые изображения css. Как вы заметили, вы должны быть осторожны, теряя смысловой смысл, делая это.

Но даже если вы можете перейти к фоновым изображениям без потери семантической ценности, это все равно не будет на 100% надежным. Я написал серию тестов прошлым летом. Я проверил их на прошлой неделе, готовясь к главе в нашей книге о мобильном адаптивном веб-дизайне. Тесты расположены в http://www.cloudfour.com/examples/mediaqueries/image-test/.

К сожалению, Android не справляется с каждой из этих техник. Вы можете увидеть, как он загружает несколько копий файлов изображений с помощью мобильного теста Blaze: www.blaze.io/mobile/result/?testid=111031_96_316

ОБНОВЛЕНИЕ 3 ноября 2011 г .: В настоящее время я пытаюсь согласовать противоречивые результаты между тем, что я вижу в Blaze, и тем, что я вижу, используя одно и то же устройство лично. На моем локальном Nexus S он проходит пятый css-тест, который ограничивает imgs, помещая их в медиа-запросы. Я посмотрел логи apache и подтвердил, что устройство загружает только одно изображение вместо двух для теста 5. Blaze работает 2.3.3. У меня телефон работает 2.3.6.

Это верно для Android 2.2, 2.3 и 3.0. Надеемся, что 4.0 будет включать в себя исправления webkit, которые предотвращают это поведение: bugs.webkit.org/show_bug.cgi?id=24223

Кстати, это похоже на ваш комментарий о тестировании установки родительского div для отображения: ни на Android. Если вы получаете другие результаты, я хотел бы услышать об этом.

Если вы оставите их как теги img, каковы ваши варианты? На эту тему я написал серию из нескольких частей. Вторая часть серии содержит подробное описание различных методов: http://www.cloudfour.com/responsive-imgs-part-2/

Опять же, ни одно из решений не является отличным. Если вы хотите что-то простое и работать большую часть времени, я бы пошел на adaptive-images.com. Или направляйте изображения через Sencha.io SRC, пока мы не найдем лучшее решение этой проблемы.

Кстати, извините, что так много ссылок, которые на самом деле не являются ссылками. Это мой первый ответ на stackoverflow, и он позволит мне включить только две ссылки.

Answer 2

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

<img srcset="elva-fairy-320w.jpg 320w,
         elva-fairy-480w.jpg 480w,
         elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
        (max-width: 480px) 440px,
        800px"
     src="elva-fairy-800w.jpg" 
     alt="Elva dressed as a fairy">

Этот код говорит:

• Если мой браузер не поддерживает srcset, используйте значение по умолчанию src. Не оставляйте это.
• Привет, браузер, в srcset, здесь 3 файла и их естественная ширина разделена запятыми.
• Эй, браузер, в sizes здесь указана ширина пространства, которое я хочу, чтобы мое изображение занимало в зависимости от медиазапроса. Используйте тот, который соответствует первому.

Затем браузер сам вычислит, какое изображение лучше всего использовать, основываясь на размере и разрешении экрана пользователя, затем загружает ТОЛЬКО то, что довольно круто в моей книге.

Answer 3

Почему бы сначала не сделать мобильный подход, а затем использовать медиа-запросы для улучшения больших экранов.

Также вы можете использовать медиа-запросы для обслуживания определенных файлов CSS.

С встроенными изображениями я пробовал блок скриптов в голове и сразу после открывающего тега body, который работает только для мобильных устройств (обнаружение по имени класса, добавленному в body, или по наличию CSS-файла медиа-запроса), который находит все встроенные изображения с определенным классом и пустой атрибут src.

см. Здесь Запрет загрузки изображений

<script type="text/javascript" charset="utf-8">
    $(document).ready( function() { $("img").removeAttr("src"); } );
</script>

другой способ - переписать URL с помощью mod rewrite и модуля .htaccess или url rewrite для iis. перенаправить строки агента пользователя для мобильных телефонов в маленькое пустое изображение.

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

RewriteCond %{HTTP_USER_AGENT} (nokia¦symbian¦iphone¦blackberry) [NC] 
RewriteCond %{REQUEST_URI} !^/images/$
RewriteRule (.*) /blank.jpg [L]

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

Answer 4

Хорошо, важно отметить, что мобильный! = Низкая пропускная способность! = Маленький экран и рабочий стол! = Высокая пропускная способность! = Большой экран.

Что вы, вероятно, хотите, это принять решение на основе пропускной способности клиента и размера экрана клиента. Медиа-запросы помогают только с последним.

У Дэвида Кэлхуна есть отличная статья о том, как это сделать: http://davidbcalhoun.com/2011/mobile-performance-manifesto

Настоятельно рекомендуется.

Answer 5

Недавно я наткнулся на замечательную статью в блоге на эту тему, посвященную проблеме адаптивных изображений (т. Е. Отображению небольших изображений на небольших устройствах).Комментарии к статье - самая интересная часть, и я думаю, что метод замены, придуманный Уэстоном Рутером, является многообещающим:

http://jsbin.com/ugodu3/13/edit#javascript,html,live (посмотрите другие итерации в комментариях).

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

Другие распространенные решения для отзывчивых изображений основаны на файлах cookie (проверьте плагин Filament Group Responsive images).

Я предпочитаю адаптивные изображения фону CSS, потому что они более корректны с точки зрения семантики и синтаксического анализа с точки зрения SEO.Если я согласен с тем, что мы не должны предполагать, что больший экран = большая полоса пропускания, у нас не хватает инструментов для решения этой проблемы (navigator.connection только для Android.), Поэтому при условии, что большинство мобильных пользователей имеют плохое соединение 2G / 3G, это самый безопасный способ.

Answer 6

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

var $images = $("img[width]");
    $images.each(function(){ 
      try{
          var $image = $(this);
          var currentWidth = Number($image.attr("width"));
          if(currentWidth > screen.width){
              $image.width("100%");
              $image.removeAttr("height");
           }
      }
      catch(e)
      {/*alert("image scale fail\n"+e)*/}
 });

Если ширина на 100% и удалить любой атрибут высоты, изображение будет отлично масштабироваться, чтобы занять всю ширину, независимо от того, в горизонтальной или книжной ориентации вы находитесь.

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

Answer 7

Я не уверен, что вы подумали об этом, но одна из вещей, которые вы можете сделать, это проверить ширину разрешения экрана с помощью javascript, а затем, если разрешение меньше некоторого числа (я использую 480, потому что то, что сайт выглядит плохо), затем переключите шаблоны CSS с шаблона по умолчанию на мобильный шаблон.

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  }
  if (myWidth < 48)
  {
   switch css template to mobile template
  }
}