挑戰
文字和圖像是原始的力量情侶;他們在一起,引人注目並留下深刻的印象。當您輕鬆地將它們配對時會發生什麼? Exposure.co 正在透過創建一個社群來尋找答案,攝影師、故事講述者和組織可以將高解析度圖像和文字組合成美麗的故事,這些故事的效果大於各個部分的總和。Filson、WWF 和charity:water等客戶正在使用網站擴大影響範圍並透過圖像直接吸引受眾。
然而,在響應式設計時代專注於攝影會帶來一些問題。傳入的圖像很大,需要以各種尺寸顯示,以避免在設備限制的情況下下載時間過長。開發人員 Kyle Bragger 表示,Exposure 的照片網格功能是“產品的命脈”,增加了一層複雜性。
「如果瀏覽器大小調整或裝置方向變更等,網格就會重新繪製,因此我們可能會提供相同原始影像的數十種不同尺寸。如果沒有某種即時圖像大小調整服務,處理這個問題幾乎是不可能的。
作為一個精簡的兩人團隊,Bragger 和聯合創始人 Luke Beard 也擔心設計所需的所有衍生圖像會產生巨額託管費用。在建造該網站時,他們希望透過 imgix 來降低這一潛在成本。
解決方案
因為他們在創建 Exposure 之前就了解了 imgix 的功能,所以團隊能夠預先簡化他們的圖像管道。使用者將故事的原始圖像直接上傳到 Amazon S3 儲存庫中,Exposure 將其連接到 imgix。在網站上查看照片時,Exposure 會向 imgix 請求調整大小的衍生圖像(平均每個原始圖像 7 個),imgix 會建立並快取這些圖像以供以後重複使用。只有原始圖像會產生儲存成本,而衍生圖像僅在請求實際頁面視圖時才會產生頻寬費用。
「圖像實際上永遠不會接觸我們的應用程式伺服器。考慮到我們提供的圖像頻寬,複製和擴展 imgix 將是我們需要獲得有競爭力的定價的東西。相反,我們專注於建立核心產品,而不是其他人已經確定的基礎設施。
透過從一開始就將網站設計為使用 imgix,Exposure 能夠立即利用最佳實踐。為了快取更多的圖像尺寸,他們以 100 像素為增量創建衍生圖像,然後從這些較小的版本中調整到所需的確切尺寸。除了自動內容協商以轉換為具有更好壓縮效果的圖像格式之外,這還為讀者提供了完全的設計靈活性和更快的頁面載入時間。








