網(wǎng)站開發(fā)

Website development

響應(yīng)式網(wǎng)站圖片設(shè)計(jì)，如何設(shè)計(jì)響應(yīng)式網(wǎng)站圖片？響應(yīng)式圖片規(guī)格，響應(yīng)式圖片規(guī)格有那些？

發(fā)布時(shí)間：2016-12-14 11:34:55

<a href=http://mpian.cn target=_blank class=infotextkey>軟件開發(fā)</a>.jpg

隨著器件尺寸和分辨率爆炸并駕齊驅(qū)，我們需要新的標(biāo)準(zhǔn)，使圖像適應(yīng)和應(yīng)對(duì)現(xiàn)代網(wǎng)絡(luò)。

今天，我們可以訪問各種數(shù)字體驗(yàn)，用等多種設(shè)備，對(duì)網(wǎng)絡(luò)，范圍從閃電快牛步。添加到現(xiàn)實(shí)我們?cè)黾荧@得負(fù)擔(dān)得起的，高質(zhì)量的攝影作品，突然，互聯(lián)網(wǎng)是自相矛盾的。

我們希望網(wǎng)絡(luò)是精益和快速甚至在地方我們有一個(gè)弱的信號(hào)-但我們也希望網(wǎng)絡(luò)是美麗的。所以我們大部分人都會(huì)對(duì)視網(wǎng)膜桌面優(yōu)化，希望移動(dòng)用戶將承擔(dān)由此網(wǎng)頁加載緩慢。

但這是一個(gè)不切實(shí)際的希望，大多數(shù)手機(jī)用戶會(huì)反彈從緩慢的頁面。

平衡這些對(duì)立的力量，我們需要把圖像尺度為所有設(shè)備的所有用戶的Web方式。

這就是為什么我們把響應(yīng)圖像WebFlow -每個(gè)人都。

我們改變了給你帶來響應(yīng)圖像

從今天開始，所有內(nèi)聯(lián)圖像（靜態(tài)和動(dòng)態(tài)）將自動(dòng)縮放每個(gè)設(shè)備的尺寸和分辨率。如果你有一個(gè)現(xiàn)有的網(wǎng)站，遷移過程將開始下一次你打開設(shè)計(jì)器（如果沒有，就按指令轉(zhuǎn)移我在Mac或Windows ctrl+shift+I）?；谖覀冎昂椭蟮囊恍└氐哪０鍒D像的網(wǎng)頁加載速度測(cè)試，這種變化可以提高移動(dòng)加載速度提高10倍

對(duì)于技術(shù)上傾斜：這意味著我們已經(jīng)建立了srcset和尺寸into every inline <img> element, automatically generating variants for each image you upload and serving the most efficient option to optimize page load speeds for every site visitor.

我們的方法來構(gòu)建響應(yīng)圖像的所有網(wǎng)站提供了三個(gè)關(guān)鍵好處WebFlow：

速度：

現(xiàn)代的瀏覽器使用一種名為“預(yù)取”或“預(yù)緩存”通過加載圖片甚至在你訪問的頁面提高頁面加載速度。利用這個(gè)速度提升，我們選擇使用

srcset和尺寸而不是一個(gè)基于JavaScript的方法，這需要一個(gè)初始頁面加載之前我們可以正確的變異。

質(zhì)量Aside from slowing down page loads, JavaScript-based methods serve low-quality placeholder images on initial load, or, if using <noscript>, create bloated HTML that’s not standards-compliant.

效率和自動(dòng)化：

我們想幫助你設(shè)計(jì)高質(zhì)量的網(wǎng)站更快，所以我們已經(jīng)生成圖像的變種，時(shí)間密集的過程測(cè)量尺寸，并編寫代碼和自動(dòng)化的一切，這樣你就可以專注于設(shè)計(jì)。你自己做這件事或使用一個(gè)獨(dú)立的JavaScript庫(kù)，還讓你處理每個(gè)主圖像為變種——繁瑣的工作，只會(huì)減緩網(wǎng)頁設(shè)計(jì)周期任務(wù)。

后，我們響應(yīng)圖像免費(fèi)為每個(gè)人使用Webflow。

At present, this change doesn’t include background images or images in rich text elements, but we’ll support these elements in a future iteration. Additionally, building in <picture> element art direction support is not included in this change (for now, you can continue to achieve this effect by setting different images to display or not display for different device sizes).

但首先，響應(yīng)的圖像是什么？

To balance the scales between high-resolution desktop users and average mobile users, the <img> tag needed to be brought into the 21st century. The solution: serve different image sizes and resolutions for each device using thesrcset和尺寸屬性.

這個(gè)srcset屬性是首次出版于2013由W3工作草案。此后，響應(yīng)圖像的解決方案已經(jīng)發(fā)展到包括尺寸屬性，這才是關(guān)鍵

我們首先看到的部分srcset支持在Chrome 34和Opera 21，并在寫作的時(shí)候，srcset現(xiàn)在在所有的全面支持當(dāng)代瀏覽器和向后兼容舊的瀏覽器。

而srcset和尺寸屬性為我們提供網(wǎng)頁設(shè)計(jì)師大量的控制，他們還持有大量的奧秘——遠(yuǎn)比你期望從兩個(gè)簡(jiǎn)單性質(zhì)。

這是一個(gè)簡(jiǎn)單的圖像標(biāo)簽，之前我們已經(jīng)添加了類，ALT文本，或尺寸。

一個(gè)樸實(shí)，反應(yīng)遲鈍的img標(biāo)簽。

看著同一個(gè)圖像-只是這個(gè)srcset和尺寸屬性附加在底層的復(fù)雜性提示。

想象每個(gè)圖像維護(hù)這個(gè)代碼，在每一頁。隨著網(wǎng)站的變化。

從本質(zhì)上說，上面的代碼告訴瀏覽器為一個(gè)特定的變量（記為寬度）不同的媒體查詢。不太復(fù)雜

但我們都知道，網(wǎng)站需要（很多）的維護(hù)。所以你讓一個(gè)CSS改變或移動(dòng)圖像到一個(gè)不同的容器，每一次，你可能需要重新計(jì)算尺寸屬性全部你的圖像。這不僅需要繼續(xù)服務(wù)正確的變種，但也因?yàn)槌叽鐚傩钥梢杂绊憙?nèi)在的圖像尺寸。

這些步驟的膨脹過程。事實(shí)上，人類并不是好的單位工作。

如何反應(yīng)的圖像在Webflow工作

在Webflow，我們相信正確的方式做事，即使是一個(gè)棘手的問題。

我們已經(jīng)采取了我們的時(shí)間來制作經(jīng)驗(yàn)平衡自動(dòng)化代碼質(zhì)量，而堅(jiān)守的迭代，并在Webflow舉辦網(wǎng)站設(shè)計(jì)的協(xié)同性。

那么我們?nèi)绾螢槟木W(wǎng)站生成響應(yīng)的圖像？挑戰(zhàn)分解成兩個(gè)過程：

1、生成你的原始圖像的響應(yīng)變量

2、應(yīng)用srcset和尺寸attributes to your <img> tags

產(chǎn)生的變異

我們已經(jīng)建立了我們自己的工具來生成你自動(dòng)響應(yīng)圖像的變種，幕后。該變種產(chǎn)生，當(dāng)你上傳兼容圖像，所以游客不必等待實(shí)時(shí)生成。

創(chuàng)建的所有變體WebFlow你需要自動(dòng)。

我們已經(jīng)注意到審核所有圖像壓縮工具，應(yīng)用先進(jìn)的縮放算法，無損壓縮的步驟來優(yōu)化網(wǎng)絡(luò)的變體。我們?yōu)槲覀兊淖凅w通過相同的超快速的基礎(chǔ)設(shè)施，我們一直在使用，通過世界一流的CDN。我們給一個(gè)額外的視覺感覺的變異的速度和性能，使他們逐步呈現(xiàn)（下面的例子）。

漸進(jìn)繪制荷載較低分辨率的圖像，然后逐步提高質(zhì)量作為加載圖像。（加載過程放慢了演示的目的。）圖片來源：CSS技巧。

Once an asset’s variants have been generated, any inline <img> you use that asset with will be responsive, including images in symbols and dynamic images pulled from a CMS Collection.

應(yīng)用srcset和大小

這個(gè)srcset屬性代表的瀏覽器可以選擇圖像變量列表。響應(yīng)圖像棘手的部分是尺寸屬性，這暗示了瀏覽器如何大的圖像將幫助選擇合適的變異之前該網(wǎng)站實(shí)際上一直在訪問者的瀏覽器。

這是預(yù)先緩存的關(guān)鍵，但即使預(yù)先緩存不開球，這是幫助瀏覽器無需等待渲染整個(gè)頁面下載正確的變異的關(guān)鍵。我們的目標(biāo)是要有正確的變種下載與JavaScript，CSS和其他資產(chǎn)已經(jīng)在瀏覽器的時(shí)候渲染。

我們?nèi)拥舻膯蜗颉⒎忾]CMSS工作流時(shí)，響應(yīng)的圖像。我們讓設(shè)計(jì)師的工作與我們的算法，通過預(yù)覽效果srcset/sizes當(dāng)你設(shè)計(jì)同時(shí)也重新計(jì)算尺寸每個(gè)響應(yīng)的圖像背后的屬性你讓一個(gè)DOM和CSS的變化可能會(huì)影響它的每一次

我們的方法解決了不只是為不同屏幕尺寸的設(shè)備，而且對(duì)不同像素密度的屏幕。

我們相信這是響應(yīng)式設(shè)計(jì)的未來：在一個(gè)智能的工具讓你建立的東西，通常需要一個(gè)團(tuán)隊(duì)協(xié)作的專業(yè)環(huán)工作，無頭痛。重要的是，在不犧牲控制。

結(jié)果呢？

基于我們之前和之后的一些更重的模板圖像的網(wǎng)頁加載速度測(cè)試，這種變化可以提高移動(dòng)網(wǎng)頁加載速度高達(dá)10倍（甚至很形象的重頁）。即使在臺(tái)式機(jī)和大屏幕，這樣的變化會(huì)使優(yōu)質(zhì)股票圖像相當(dāng)大的影響大小的照片，這在大多數(shù)情況下，都遠(yuǎn)大于必要。

在這個(gè)例子中，95%的500px變負(fù)荷比原來快3500px。這對(duì)移動(dòng)用戶是個(gè)好消息。

如果我們把這種比較的圖像文件本身的性能改善更為明顯。以高品質(zhì)的上面的例子（但不合理的大照片，）我們穿過我們的正常變異的產(chǎn)生過程。相比原來的3500px寬度的圖像，500px寬度有點(diǎn)變近95%小，并將負(fù)荷20倍的速度移動(dòng)。

把這個(gè)放在具體的條款，在3G速度從中檔手機(jī)供應(yīng)商，從1.12秒到這個(gè)圖像的下載時(shí)間滴只需0.06秒對(duì)于變種

muuuuuuuch更好。

高質(zhì)量的圖像構(gòu)成的網(wǎng)絡(luò)越來越大的部分，建筑響應(yīng)圖像的Webflow是我們建筑的終響應(yīng)的網(wǎng)頁設(shè)計(jì)工具的使命的一個(gè)邏輯步驟。

其他響應(yīng)圖像的解決方案，我們?yōu)槭裁床焕盟麄?/span>

而規(guī)劃的新特點(diǎn)，我們采取了在現(xiàn)有的解決方案響應(yīng)圖像的密切關(guān)注，一直在尋找的地方我們可以改善。這些方法一般分為兩類，我們稱之為“手冊(cè)”的方法和“占位符”方法。

手動(dòng)方法

通過CMSS像WordPress使用的一種方法是硬編碼srcset和尺寸直接進(jìn)入主題，這迫使設(shè)計(jì)師手動(dòng)調(diào)整這個(gè)代碼如果他們做出改變布局。其結(jié)果是一個(gè)脆弱的，緊縮，和勞動(dòng)密集型的過程，增加了建筑和修改主題的復(fù)雜性。

占位符的方法

“去”的方法降于圖書館和第三方云圖像服務(wù)依賴于某些版本的占位符的方法。

占位符方法這樣工作：

現(xiàn)場(chǎng)荷載在低質(zhì)量圖像占位符

SRC該網(wǎng)站提供

一點(diǎn)JavaScript運(yùn)行，測(cè)試頁面

這些測(cè)量是用來更新src屬性或，很少，嘗試設(shè)置

srcset/sizes正確的屬性

這種方法缺乏響應(yīng)圖像的標(biāo)準(zhǔn)設(shè)置srcset/尺寸之后頁面加載或根本不

Webflow的做法與上述的主要區(qū)別可以減少到幾個(gè)關(guān)鍵的比較點(diǎn)，概述如下：

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,6987,0.html

上一篇：網(wǎng)站設(shè)計(jì)都有那些設(shè)計(jì)模式？

下一篇：你應(yīng)該學(xué)習(xí)你們的客戶，從客戶的角度出發(fā)

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理