Retina Monitor’s Web Image Solution

什麼是Retina螢幕


今天來談談網頁圖片在視網膜(Retina)螢幕的顯示議題,首先必須來談談什麼是視網膜螢幕,其實他就是一種能在單位尺寸內顯示更多像素點的螢幕,且已經達到視網膜能辨識的極限,視網膜螢幕是由蘋果公司提出,賈伯斯在2010年iPhone 4的發表會中提到:「當你所拿的東西距離你10-12英寸(約25-30厘米)時,它的解析度只要達到300ppi這個『神奇數字』(每英寸300個像素點)以上,你的視網膜就無法分辨出像素點了。」

所以簡言之,視網膜螢幕比較一般非視網膜螢幕的不同處在於,能在同樣的範圍顯示更多的像素點,也就是PPI(Pixels Per Inch)比較高的螢幕,可參考下圖所示:

可以看到圖左在單位尺寸內顯示的像素點較少,圖右則能以更多的像素去呈現,在肉眼上就會覺得圖右會比較細緻。

接下來談談網頁圖片與視網膜螢幕之間的關係,先來看看同樣一張圖片在不同螢幕上顯示的效果。

非Retina顯示

Retina顯示

當然在美觀的立場下,我們不會希望發生這樣的視覺差異,那網頁上要如何設置才可以做到讓圖形在視網膜螢幕下也能正常的顯示呢?以下提出一些解決方案:

方案1. 透過CSS針對不同的DPR (Device Pixel Ratio)設計顯示圖片


大家如果想知道自己螢幕的DPR,可以在Chrome的主控台輸入“window.devicePixelRatio”,就可以得知目前Chrome所在螢幕的DPR值。

非Retina螢幕
Retina螢幕

可以觀察出來在兩個螢幕的DRP值是不同的,而透過CSS的樣式,可以針對這兩個不同的DPR設定顯示方式,可以參考下面的做法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .logo{
            width: 190px;
            height: 190px;
            background-image: url("atd-icon.jpg");
            background-size: contain;
        }
        @media (-webkit-min-device-pixel-ratio: 2){
            .logo{
                background-image: url("atd-icon@2x.jpg");
            }
        }
    </style>
</head>
<body>
    <div class="logo"></div>
</body>
</html>
<script>
</script>

這邊必須針對圖檔尺寸做個說明,其中atd-icon.jpg為190 x 190,而atd-icon@2x.jpg為380 x 380。

@media (-webkit-min-device-pixel-ratio: 2)的部分是在DPR兩倍下的Media Query。

透過這樣的方式去設定,當DPR為2的時候,螢幕上的圖片改變為atd-icon_2.jpg,剛好能夠滿足在兩倍像素狀況下的顯示需求,當然以此類推,也能去設定三倍或更高倍數下的顯示圖片。

方案二. 透過img標籤的srcset屬性


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="atdIcon.jpg" srcset="atd-icon@2x.jpg x2">
</body>
</html>
<script>
</script>

其中srcset=”atd-icon@2x.jpg 2x”表示在DPR等於2的時候要去呈現的圖片。

非Retina螢幕
Retina螢幕

以上兩個方法都可以解決圖片在Retina螢幕上面顯示的問題,但也要稍微注意一下支援程度:

CSS -webkit-min-device-pixel-ratio 支援列表
HTML srcset 支援列表

可以看到在IE都是無法支援的狀態,但從Edge後就開始支援,當然也可以想想目前擁有Retina螢幕的使用者,用的瀏覽器都會是哪些?說不定你不會太在乎上面那兩張圖紅色的部分。

但若是一定要有IE瀏覽器的支援,大家應該也能從上述的文章了解,我們可以透過window.devicePixelRatio的數值自行寫script進行判斷,然後再給出適合DPR的圖片,不過這邊另外推薦一個JS Library可以協助你進行這方面的判斷。

方案三. 透過Retina.js輔助進行判斷


首先到Retina.js的網站下載他們所提供的js檔,接下來至網頁引入該JS,其實網站上也有詳細的使用方法,另外檔案大小僅有約4KB並不算很大,可以參考下面的Sample Code。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="retina.min.js"></script>
</head>
<body>
    <img src="atd-icon.jpg" />
</body>
</html>

可以看到在img標籤中僅使用了原始大小的atd-icon.jpg,但因為有引入retina.min.js,他會在螢幕DPR兩倍時,自動去搜尋符合倍率下的圖片,但要記得如果不加其他屬性去設定兩倍圖片的檔名,檔名就必須按照內建的規則,也就是atd-icon@2x.jpg,當然3x也依然支援,可以到官網看一下他的使用方式,但若是使用CSS設定的背景,依然沒辦法透過retina.js達到支援IE的效果。

以上三個方法提供目前在設計網頁時,對於Retina螢幕支援的做法,若在不考慮IE瀏覽器的情況下,其實方法1+方法2就已經可以解決所有情況,但若要支援IE則可以參考方法三的做法,也歡迎大家有問題可以留言進行討論。

方案四. 使用SVG圖檔


過往我們在網頁中使用的圖片僅有GIF、PNG、JPG這三種點陣圖格式,所以在高解析度(Retina)的螢幕中,我們需要輸入不同Size的圖片,來補足像素點不足的問題,現在有了另外一種解法“SVG”圖檔。

大家可以把SVG視為一種可以放在網頁上的向量圖檔,也就是說我們以前透過Illustrator或其他向量繪圖軟體(也包含Photoshop中向量工具)繪製出來的向量圖,本身放大就不會失真,但因為要放在網頁上,我們把它轉換成了前述的三種點陣格式,才導致圖檔放大後的失真,而SVG就是保留圖片原來的向量屬性,簡言之,就是把向量圖檔放在網頁上的意思。

非Retina螢幕
Retina螢幕

感覺這個解決方案應該會比前幾項方便,但也有他必須要注意的地方:

  1. 在SVG檔案中匯入的點陣圖,在儲存成SVG時並不會被向量化,例如上圖中間的ASUS Design Logo就是匯入的點陣圖(放大後還是會模糊)。
  2. SVG字型可能會遺失,所以需要使用網路字型或是將文字轉成外框或形狀之後再轉存成SVG。
字型遺失
轉換成外框或形狀

You may also like...

37,825 Responses

  1. RichardJah表示:

    Криптовалюта перевернула мир, и все сразу осознали: крипта — это не игрушка.
    Европейский Центральный банк, столп финансовой стабильности, сейчас в панике. В своём последнем отчёте они предупредили:
    Биткойн — это не просто пузырь, это социальная угроза.
    Якобы биткойн способствует классовому неравенству: владельцы крипты, по их мнению, обогащаются за счёт бедных, оставшихся не у дел. Слабым и беззащитным, мол, пора активно выступать против криптовалют.
    Иначе, намекает ЕЦБ, последствия будут катастрофическими. В отчёте даже рекомендовали блокировать криптовалюты, чтобы предотвратить политические последствия, намекая на то, что держатели активов могут повлиять на выборы. Примером они приводят США, где кандидаты активно заигрывают с крипто-избирателями.
    Внезапно банки стали предупреждать нас о некой угрозе, исходящей от крипты, словно всю жизнь они берегли нас от бедности.
    Неужели банки, которые сами по себе являются орудием неравенства, теперь стали беспокоиться о простых людях? Это забавно, потому что именно криптовалюта открыта для всех, кто готов попробовать что-то новое. Здесь нет двери с надписью «Только для своих», как в случае с банками.
    Никто не запрещает вам пользоваться биткоином или эфиром. Никто за вас не решает, кто достоин, а кто нет. Но банки об этом не говорят. Вместо этого они пытаются создать образ криптовалют как инструмента для преступников, заявляя, что она вредит экономике и ведёт к катастрофическим последствиям.
    Как будто предыдущие кризисы и экономические коллапсы — это дело рук биткоина, а не самих банков.

    Реальные примеры:
    В последние годы, особенно в 2024 году, швейцарские банки без зазрения совести закрывали счета у всех, у кого в паспорте указано место рождения — Россия.
    По всей Европе, прикрываясь санкциями, банки отбирали деньги у населения. Например, чтобы перевести деньги, нужно предоставить массу документов, подтверждений, деклараций, историю происхождения денег. Даже если всё в порядке, счёт могут заморозить.
    В Турции, где сейчас рекордная инфляция, люди нашли спасение в криптовалюте, так как она даёт хоть какую-то стабильность и никак не зависит от капризов правительства, банков или комплаенс-отделов.
    В Ливане банки за один день заблокировали вклады, оставив людей без своих денег.

    Банковский контроль:
    Банкиры мониторят ваши транзакции, требуют подтверждений и историю происхождения денег, даже если прошло 10 лет. Вы вынуждены объяснять, зачем вам ваши же собственные средства. И всё это сопровождается традиционными комиссиями и навязанными услугами.

    А что даёт криптовалюта?
    Вы можете переводить деньги сколько угодно, кому угодно, когда угодно.
    Нет лишних вопросов, никакого контроля и комплаенса.
    Полная конфиденциальность.
    Да, крипта имеет свои риски: волатильность, недостаточная правовая защита. Но при грамотном подходе эти риски можно минимизировать. Тогда криптовалюта становится надёжной альтернативой.

    Криптовалюта — это не просто средство обмена, это символ независимости.
    Она не зависит от банковской системы, которая строила границы и правила исключительно в свою пользу. ЕЦБ утверждает, что биткойн — это угроза. И он прав. Только эта угроза направлена не на людей, а на банковскую систему.
    Настоящий ужас для ЕЦБ в том, что люди больше не зависят от их комиссий и бесконечных документов.
    Криптовалюта даёт финансовую свободу. Именно это пугает банки. Их борьба с криптой — это борьба за сохранение монопольных привилегий.

    Теперь выбор за каждым:
    Остаться в клетке банковских правил.
    Или стать частью свободного мира, где твои деньги — это твоё решение.
    https://www.youtube.com/watch?v=_cSJTHSC_SE

  2. Ernestzow表示:

    top 10 pharmacies in india: indiapharmi – indian pharmacies safe

  3. таможенное оформление сыпучие грузы таможенное оформление сыпучие грузы .

  4. Jeffreyvop表示:

    mexican pharmaceuticals online: mexican pharmacy – best online pharmacies in mexico

  5. Willardvem表示:

    http://mexicanpharmi.com/# mexican border pharmacies shipping to usa

  6. MatthewHen表示:

    indianpharmacy com indian pharmacy reputable indian pharmacies

  7. MatthewHen表示:

    buy medications online Canada pharmacy online cialis without doctor prescription

  8. Jeffreyvop表示:

    world pharmacy india: Indian pharmacy international shipping – best india pharmacy

  9. Willardvem表示:

    http://indiapharmi.com/# online pharmacy india

  10. StephenJem表示:

    https://canadianpharmi.com/# online drugs

  11. MatthewHen表示:

    mexican border pharmacies shipping to usa Mexican pharmacies that ship to the United States mexican border pharmacies shipping to usa

  12. StephenJem表示:

    http://indiapharmi.com/# indian pharmacy paypal

  13. Ernestzow表示:

    mexican pharmaceuticals online: Online pharmacy – buying prescription drugs in mexico online

  14. Willardvem表示:

    http://canadianpharmi.com/# ed drugs compared

  15. Jeffreyvop表示:

    real viagra without a doctor prescription usa: Best Canadian pharmacy – carprofen without vet prescription

  16. Jeffreyvop表示:

    pharmacies in mexico that ship to usa: mexicanpharmi – pharmacies in mexico that ship to usa

  17. BernardNet表示:

    Главное управление гестапо

    Как ГСУ питерского главка МВД выбивало «показания» по «делу «Лайф-из-Гуд» –«Гермес» – «Бест Вей»

    5 декабря на заседании Приморского районного суда Санкт-Петербурга была допрошена в качестве свидетеля 75-летняя Зоя Магомедовна Семенова из Самары.

    Она сообщила суду, что была пайщиком кооператива «Бест Вей» и клиентом компании «Гермес», консультантом, привлекавшим клиентов и в «Гермес», и в «Бест Вей», но больше в «Бест Вей», так как он был более интересен ее знакомым. Пояснила, что «Бест Вей» и «Гермес» – разные организации, а не подразделения одной, как пытаются представить следствие и государственное обвинение.

    У Зои Магомедовны было три договора с кооперативом на приобретение квартир, один из них – на внука. С помощью кооператива, сообщила она, многие приобрели квартиру, в том числе участники СВО. Многие не успели приобрести из-за того, что счета кооператива были арестованы, а сам он руководителем следственной группы Винокуровым признан гражданским ответчиком по уголовному делу.

    Кооператив, подчеркнула она, работал с 2014 года, действительно помогал приобрести жилье, никто в него людей не заманивал. Кооператив, пояснила Зоя Магомедовна, не имел никаких признаков финансовой пирамиды, в чем его обвиняет следствие.

    Выдуманные Сапетовой показания

    Зоя Магомедовна была приглашена как свидетельница обвинения, на нее именно в этом качестве рассчитывали государственные обвинители из Прокуратуры Санкт-Петербурга (покрывающие преступления следственной группы ГСУ питерского главка МВД).

    Но ее показания на суде полностью разошлись с теми, что она (якобы) давала на следствии – следователям Сапетовой и Мальцеву.

    В выдуманном следователями тексте, зачитанном прокурором, она:
    – якобы обвиняла кооператив в том, что он ее обманул – что она опровергла в суде;

    – якобы предъявляла претензии, что кооператив работал непрозрачно, непонятно как формируется очередь на жилье, от пайщиков закрыта информация о состоянии паевого и других фондов – она полностью опровергла это в суде, заявив, что кооператив работал абсолютно прозрачно для пайщиков, информация была доступна в реальном времени, механизм работы «Бест Вей» был совершенно понятен;
    – якобы заявила следствию, что работа кооператива строилась на обмане – сказала в суде: «Мы никого не обманывали»;
    – якобы рассказывала об аффилированности кооператива «Бест Вей» и «Гермесом» – что она также опровергла в суде, подчеркнув, что это разные организации;
    – якобы пришла к заключению, что кооператив – это пирамида – что она полностью опровергла в суде.

    Зоя Магомедовна категорически отвергла показания, которые якобы давала следствию: «Я не могла всего этого говорить, я даже терминов и слов таких не знаю, слышу все это впервые, вслух показания мне никто не зачитывал!». Таким образом, следователи прямо нарушили УПК.

    Прессинг начался с задержания

    Зоя Магомедовна пояснила суду, что была задержана в аэропорту Санкт-Петербурга – когда она должна была улетать в Самару вместе с другими пайщиками из Самарской области, с которыми приезжала на суд об аресте счетов кооператива, чтобы поддержать кооператив.

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

    Гестаповец и обманщица

    Зоя Магомедовна допрос частично помнит, частично не помнит – так как очень плохо себя чувствовала: у нее было высокое давление (она – хронический гипертоник с инвалидностью). С ней работали два следователя: Сапетова и Мальцев. Мальцев кричал на нее, угрожал, что прямо сейчас спустит ее в подвал. Сапетова разговаривала спокойно, «входила в положение». Но при этом не давала Семеновой пить, о чем та неоднократно просила, и не давала подышать свежим воздухом, ссылаясь на необходимость проводить допрос без пауз.

    «Допрос продолжался 12 часов – и когда он закончился, мне было не до чтения. Я подписывала не читая, чтобы только побыстрее уйти», – рассказала Зоя Семенова суду.
    То есть следователи сознательно создали риски для здоровья допрашиваемой, чтобы обманным путем получить нужные им, заранее написанные показания. И это далеко не единичный пример – один из свидетелей умер после допроса в ГСУ.

    Возмутительно, что липовое уголовное дело, сплошь состоящее из подобных «показаний», крышуется руководством МВД во главе с Колокольцевым. А также Прокуратурой Санкт-Петербурга – хотя адвокаты кооператива и обвиняемых предупреждали прокуратуру, что дело зиждется исключительно на липовых, нарисованных показаниях и развалится в суде!

    Преступные следователи Сапетова, Мальцев, их коллеги по следственной группе, а также руководивший следственной группой Винокуров должны быть привлечены к уголовной ответственности! Выявленные факты должны стать предметом внимания генерального прокурора Краснова, председателя Следственного комитета России Бастрыкина и главы ФСБ Бортникова!

  18. MatthewHen表示:

    mexican rx online Online Mexican pharmacy pharmacies in mexico that ship to usa

  19. Willardvem表示:

    https://mexicanpharmi.com/# mexican drugstore online

  20. Ibnwfk表示:

    where to buy promethazine without a prescription – brand ciprofloxacin buy lincocin 500mg pill

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。