使用媒體查詢進行移動優化的背景而不是內嵌圖像？

Ive mobile通過媒體查詢優化了我的網站。一切看起來如何，我想它，但不必要的圖像（因爲它們與CSS隱藏）正在下載，減慢頁面加載時間。使用媒體查詢進行移動優化的背景而不是內嵌圖像？

對此的最簡單的解決方案似乎是儘可能多地替換內聯圖像，因爲我可以用div與背景圖像。然後我可以隱藏div的媒體查詢CSS的移動版本。

我知道有潛在的不利因素這一點，在這篇文章中概述得好： When to use IMG vs. CSS background-image?

因此，該公司的標誌，工作人員的照片，等將保留爲內嵌圖像。

我沒有考慮過我的方法嗎？我已經閱讀了很多關於移動優化的內容，尤其是媒體查詢，並且我還沒有聽說過任何人這樣做，儘管看起來相當明顯的解決方案是圖像可以是內聯或背景。

請注意，我做了一些與iPhone和Android實驗（即時通訊等待得到一些Blackberrys），我知道要停止背景圖像下載我需要設置顯示沒有分區的父母，而不是與背景圖像本身的分區。

注2：在一個理想的世界中，網站可能會首先建立爲移動網站，但在這種情況下（通常在其他網站中），原始網站的修改量有限。

感謝

來源

2011-10-20 Evans

不要泄露太多，你能給我們一些關於網站上下文的想法嗎？什麼*類型*的內容它服務於什麼觀衆？等等。？ –

我對我的解決方案的任何潛在問題更感興趣，所以我可以將它應用於（或不是）將來的網站。移動網絡的使用增長非常迅速，只要沒有問題沒有意識到，我可以明確地看到自己在各種網站上使用我的解決方案。我更新了我的問題，讓這個更清楚。謝謝 – Evans

遺憾的是，您嘗試解決的問題沒有很好的答案。

首先，你必須從的img標籤的CSS背景圖像移動一切的選項。正如你所注意到的，你必須小心通過這樣做失去語義。

但是，即使你可以移動到背景圖像不失語義值，它仍然不會是100％可靠。我去年夏天寫了一系列測試。上週我重新測試了它們，以準備我們關於移動第一響應式網頁設計的一章。測試位於http://www.cloudfour.com/examples/mediaqueries/image-test/。

不幸的是，Android失敗了所有這些技術。你可以看到它通過火焰的移動測試下載圖像文件的多個副本： www.blaze.io/mobile/result/?testid=111031_96_316

UPDATE 2011 11月3日：我目前正在試圖調和之間不一致的結果我在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上的第一個響應，它只允許我包含兩個鏈接。

來源

2011-10-31 06:11:38 grigs

基於cookie的解決方案的主要問題在於，它在首次訪問時不起作用，這是最重要的，特別是對於沒有大量常規訪問者的小型企業網站而言。 E.G酒店... – mddw

@mdi我同意。很少有網站與「波士頓環球報」擁有相同的回訪率。 – Evans

不幸的是，波士頓地球公司的響應式圖像JavaScript無法正常工作，因此移動設備當前每次訪問都會獲得大圖像。 – grigs

爲什麼不移動第一種方法，然後使用媒體查詢，以提高更大的屏幕。

此外，您可以使用媒體查詢來爲特定的CSS文件提供服務。

對於嵌入式圖像，我已經嘗試過頭部腳本塊，並立即在開始的body標記之後運行，該標記僅針對移動設備運行（通過添加到body的類名檢測，或者存在媒體查詢CSS文件）所有帶有某個類的內聯圖像並清空src屬性。

看到這裏Prevent images from loading

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

另一種方法是使用網址與國防部重寫和IIS的.htaccess或URL重寫模塊重寫。將手機用戶代理字符串重定向到一個空白的小圖片。

看到： A way to prevent a mobile browser from downloading and displaying images

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

你可以從不同的子域加載的內嵌圖像，只有那些改寫爲移動改善上述情況，因爲你不希望重寫所有圖片（徽標等）

來源

2011-10-25 14:51:10

我喜歡做移動的第一種方法，但即時修改已建成的網站（我沒有建立）。 – Evans

我擔心檢測用戶代理字符串，部分從維護的角度來看，但也因爲我讀了它不完全可靠。 – Evans

你很可能想要關注我的其他[相關問題]（http://stackoverflow.com/questions/7890840/most-efficient-way-to-cater-for-different-web-devices） –

我不知道你是否想過這樣做，但你可以做的事情之一是檢查與JavaScript的屏幕分辨率的寬度，然後如果分辨率小於一些數字（我使用480，因爲在那個站點看起來不好）然後從默認情況下切換CSS模板t到移動主題模板。

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 
    } 
}

來源

2011-10-26 16:57:30 CBRRacer

如果我先加載正常的css，然後用js加載其他樣式，那麼來自正常css的背景圖像已經被下載了。 – Evans

如果我使用js來確定要加載哪些樣式，那麼如果桌面用戶沒有js，那麼不會下載任何樣式？ – Evans

@jdln如果你在加載你的css文件之前在測試屏幕分辨率的頭部加載腳本，這應該不成問題。這是一個幫助我理解這一點的鏈接。 http://uxmovement.com/content/why-you-should-place-style-sheets-before-scripts/ – CBRRacer

好的，重要的是要注意的是，手機！=低帶寬！=小屏幕和桌面！=高帶寬！=大屏幕。

你可能想要的是能夠基於客戶端的帶寬和客戶端的屏幕尺寸決定。媒體查詢只對後者有幫助。

大衛·卡爾霍恩對如何做到這一點在這裏一個偉大的新手必看：http://davidbcalhoun.com/2011/mobile-performance-manifesto

強烈推薦。

來源

2011-10-26 19:35:43 bluesmoon

良好的閱讀，但doest真的解決我的問題。謝謝 – Evans

我最近偶然在關於這個問題有很大blog article，adressing響應圖像的問題（即在更小的設備供應較小的圖像）。這篇文章的評論是最有趣的部分，我認爲由Weston Ruter創造的替代技術是一個很有前途的替代技術：

http://jsbin.com/ugodu3/13/edit#javascript,html,live （查看評論中的其他迭代）。

它有很多警告（並且可能很難但並非不可能在現有網站中合併，因爲影響所有非絕對鏈接，而不僅僅是imgs），但我會嘗試它（與懶惰合併加載）我的下一個項目，這是一個響應式網站，我的設計師做了很重（他不想讓它變輕）。請注意，如果你的服務器支持它，你可以將它與一個php腳本結合起來調整圖像的大小。

爲響應IMGS其他人共同的解決方案是基於Cookie（檢查長絲組響應圖像插件）。

我寧願響應圖像，CSS背景，因爲他們更正確的語義和語法分析SEO明智的。如果我同意我們不應該認爲更大的屏幕=更多的帶寬，我們缺乏解決此問題的工具（navigator.connection僅適用於Android），因此假設大多數移動用戶擁有蹩腳的2G/3G連接是最安全的方式。

來源

2011-10-30 20:57:40 mddw

適應現有的網站很糟糕，但我們做我必須做的。這是我在將博客的Feed導入到移動網站時如何解決的。只有當頁面大於屏幕時，纔會將頁面上的現有圖像縮放到頁面寬度。

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％，並移除任何height屬性時，圖像將按比例完美的你無論是在橫向或縱向是採取了全寬。

很可能，您的常規網站上的圖像已經進行了網絡優化。加載較小的圖像通常沒有太多的性能提升。減少HTTP請求比提供更小的圖像更能提高性能。這可能不是完美的解決方案，但它肯定是最少的維護。如果您無法合理控制將在網站上使用的圖像，這是一個相當合理的解決方案。如果沒有別的，也許這會給你帶來另一個想法。

來源

2011-10-31 05:52:59 sgliser

使用媒體查詢進行移動優化的背景而不是內嵌圖像？

回答

相關問題