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

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

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

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

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

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

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

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

Спасибо

ОТВЕТЫ

Ответ 1

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

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

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

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

UPDATE 3 Nov 2011: Im в настоящее время пытается согласовать противоречивые результаты между тем, что я вижу в 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 для отображения: none на Android. Если вы получаете разные результаты, я люблю слушать об этом.

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

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

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

Ответ 2

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

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

С встроенными изображениями я пробовал блок script в голове и сразу после тега тега открытия, который запускается только для мобильных устройств (обнаружение через добавленное в класс имя класса или наличие файла 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]

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

Ответ 3

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

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

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

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

Ответ 4

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

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

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

Другие распространенные решения для чувствительных imgs основаны на файлах cookie (проверьте плагин Pictureive Group Respive images).

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

Ответ 5

Я не уверен, что вы подумали об этом, но одна из вещей, которую вы можете сделать, это проверить ширину разрешения экрана с помощью 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
  }
}

Ответ 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-запросов приведет к значительно большему увеличению производительности, чем при использовании меньших изображений. Это может быть не идеальное решение, но, безусловно, это будет самое малое обслуживание. Если вы не можете разумно контролировать, какие изображения будут использоваться на сайте, это довольно разумное решение. Если ничего другого, возможно, это зажжет еще одну идею для вас.