爲iPad Pro顯示器優化的網頁圖像分辨率

我爲響應式網站創建標題圖像（全屏寬度）。爲iPad Pro顯示器優化的網頁圖像分辨率

什麼是最佳分辨率將仍然期待在12.9" iPad的好專業？

我的正常工作流程是在Photoshop中72 PPI創建的圖像。

規格顯示它的分辨率2732×2048，每英寸226個像素。

我不希望它在iPad上以橫向模式觀看臨時看起來是像素化。

來源

2016-04-24 KDX

iPad的臨實際上有它用來顯示2732×2048像素屏幕，但我們e用戶將此渲染爲1336x1024顯示。

所以這意味着如果你想要在iPad Pro屏幕上佔用100px的圖像，你需要在72dpi上使用200px（2x）圖像來獲得視網膜清晰度。另外，在226dpi的100px圖像。

所以對於iPad的臨你想輸出圖像在2732x2048的72dpi的全尺寸圖像

在我的球隊人們經常會發現它有用在1X設計，但確保文檔中的所有光柵圖像轉換爲智能對象，這樣他們可以縮小到2倍而沒有質量損失，然後以72dpi輸出以利用Photoshop中的（現在是遺留的）Save for Web工具

來源

2016-04-28 09:23:12 elmarko

我是否需要提供相同的兩個不同版本圖片？或者簡單地爲所有設備提供最高分辨率的圖像？如果我不按照iPad Pro的規格提供全分辨率圖像，它是否仍然可以不失真地調整圖像？ – KDX

您需要提供的圖片數量取決於您的使用情況。因爲這是網頁的最佳做法是在您的HTML中使用一個使用srcset屬性的img元素。這使您可以將適當大小的圖像提供給適當的設備。請注意，手機上沒有人想要下載2732x2048圖片！如果你在你的css中聲明你希望img是100px X 100px，它將顯示爲100px x 100px。不同之處在於，如果您使用100px或1x圖片，它會在iPad Pro上看起來模糊不清。爲了剃得尖銳，它將是一個100px X 100px圖像插槽中的200px X 200px圖像。 – elmarko

對於支持2x的設備，'srcset'屬性替換'src'屬性嗎？由於我不擁有iPad Pro，有沒有辦法讓我在Chrome中進行調試以確保正確加載圖像？ – KDX

爲iPad Pro顯示器優化的網頁圖像分辨率

回答

相關問題