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

28,906 Responses

  1. Wallacefex表示:

    deneme bonusu veren casino siteleri: gГјvenilir casino siteleri – Canl? Casino Siteleri

  2. ClairJaw表示:

    read the full info here MetaMask Download

  3. вывод из запоя в наркологическом стационаре vyvod-iz-zapoya-sochi24.ru .

  4. BradleyEdino表示:

    sweet bonanza sweet bonanza yorumlar sweet bonanza slot

  5. Baji表示:

    We absolutely love your blog and find the majority of your post’s to be exactly what I’m looking for. Do you offer guest writers to write content to suit your needs? I wouldn’t mind composing a post or elaborating on a number of the subjects you write about here. Again, awesome weblog!

  6. JasonUnsoG表示:

    http://slotsiteleri25.com/# slot siteleri

  7. вывод из запоя в наркологическом стационаре http://www.vyvod-iz-zapoya-sochi24.ru .

  8. BradleyEdino表示:

    sweet bonanza guncel sweet bonanza giris sweet bonanza slot

  9. FrankEmine表示:

    slot casino siteleri: en cok kazand?ran slot oyunlar? – slot oyunlar? puf noktalar?

  10. вывод из запоя круглосуточно сочи вывод из запоя круглосуточно сочи .

  11. JasonUnsoG表示:

    https://casinositeleri25.com/# en Г§ok kazandД±ran bahis siteleri

  12. BradleyEdino表示:

    guvenilir slot siteleri slot siteleri az parayla cok kazandiran slot oyunlar?

  13. Kevinnem表示:

    Алистаров – уголовник и террорист
    От уголовника-индивидуала до слуги криминалитета

    Ранее судимый по «наркотической» статье блогер Андрей Алистаров позиционирует себя Робин Гудом, борющимся с теми, кто «обманул людей», – но в действительности он работает в интересах пирамидчиков, в том числе украинских, спонсирующих ВСУ, продвигает через свой канал «Железная ставка» онлайн-казино и черный криптообмен/фишинговый криптообман, отмывает наркодоходы за счет сделок с недвижимостью в Дубае.

    То есть работает в интересах российского преступного сообщества, пытающегося нажиться на предпринимателях, столкнувшихся с незаконными, часто заказными претензиями со стороны российских правоохранительных органов.
    Наркотики и отмывание доходов
    Уроженец Калуги Алистаров отсидел четыре года в лагере – за продажу наркотиков детям.

    Там он связался с уголовными авторитетами и, выйдя из тюрьмы, продолжил участвовать в криминальном бизнесе по распространению наркотиков и отмыванию наркодоходов от них с помощью риелторского бизнеса, который Алистаров создал совместно с партнерами из российского преступного сообщества в России и Эмиратах.
    Ставка на скам
    Канал Алистарова «Железная ставка» – «разоблачение» неправильных (по мнению криминалитета) финансовых проектов и продвижение «правильных»: пирамид и онлайн-казино, спонсирующих Алистарова.

    Он начинался как канал о «правильных» ставках в казино и не сменил название – потому что маркетинговая задача осталась прежней: расчищать поле для «хороших», по «экспертному» мнению Алистарова (то есть заплативших ему), мошенников.

    Обычно Алистаров начинает с попытки вымогательства – представляет жертве компромат и предлагает заплатить. Если жертва отказывается, в ход идут травля и насилие.

    Подстрекательство и нападение в Дубае

    1 января 2025 года состоялось жестокое нападение двух казахстанцев на предпринимателя, проживающего в Дубае, – его избили, отрезали ухо, обворовали.

    До этого Алистаров снял 12 роликов, где подсвечивал адрес этого предпринимателя, публиковал незаконно полученную информацию о его близких и его бизнесах в ОАЭ. Безо всякого стеснения использовал подглядывание, подслушивание, незаконное проникновение, вмешательство в частную жизнь – все то, что в Эмиратах, где строго соблюдается неприкосновенность имущества и жизни инвесторов, является тяжким уголовным преступлением.

    До этого Алистаров публично распространял информацию о месте жительства бизнес-партнера этого предпринимателя – то есть незаконное нарушение конфиденциальности, защищенности финансов и имущества, тайны частной жизни с помощью скрытых источников информации и информаторов в ОАЭ вошло у него в систему. Он терроризирует предпринимателей, в отношении которых нет никаких обвинительных решений судов – ни за рубежом, ни в России.

    Алистаров рассказывал, что заявил на предпринимателя в Интерпол и правоохранительные органы ОАЭ – якобы он помогает правоохранительным органам. Но это почему-то не привело к аресту предпринимателя – может быть, потому, что полиция ОАЭ не видит криминала в его деятельности?

    Подписывайтесь на наш канал

    Ряд партнеров предпринимателя осуждены в России, сам он в розыске российских правоохранительных органов – но не осужден. Иностранные правоохранительные органы не имеют к нему претензий.

    Алистаров на протяжении длительного времени возбуждал ненависть к предпринимателю – рассказывая, что именно этот предприниматель (а не его партнеры) украл деньги вкладчиков. И представил дело так, что на него напали и его обворовали возмущенные вкладчики.

    Сам он в ходе нападения устроил внеплановый стрим, чтобы обеспечить себе алиби – вроде как он не знал, что во время стрима происходит нападение.

    Слежка на Кипре

    Осенью прошедшего года Алистаров вместе со своей боевой подругой Марией Фоломовой устроил слежку в отношении другого предпринимателя – с помощью квадрокоптеров, незаконного сбора информации о нем и его близких, в том числе несовершеннолетних детей. Алистаров утверждал, что предприниматель скрывается на Кипре – хотя он живет там со времен пандемии коронавируса.

    Переселение было связано с тяжелым течением коронавируса у жены предпринимателя, а также с международными проектами – инвестициями в разные отрасли экономики: строительство, торговлю и другие. Предприниматель переселился на Кипр за год до возбуждения уголовного дела следственными органами МВД, за полтора года до арестов. Он имеет паспорт Евросоюза и ни от кого не убегал, не скрывался и не скрывается.

    Предприниматель объявлялся в 2022 году в розыск в России – но следственными органами. Суд к нему претензий не выдвигал, уголовное дело сейчас рассматривается судом – и уже развалилось в суде. Интерпол и Евросоюз отказались акцептировать претензии российской полиции, сочтя их политически мотивированными и юридически необоснованными.

    Алистаров утверждает, что инвестиции в бизнес-проекты осуществляются за счет денег российских клиентов одной из австрийских инвестиционных компаний – однако предприниматель никогда не был ни собственником, ни бенефициаром, ни управляющим этой компании, созданной еще в начале 2000-х – задолго до начала его самостоятельной бизнес-карьеры.

    Одна из фирм предпринимателя осуществляла маркетинговую поддержку продуктов этой инвесткомпании в России по договору с ней. Инвесткомпания успешно работала с российскими клиентами восемь лет – и сейчас продолжает работать, восстановив систему платежей, обрушенную в начале 2022 года связанными с коррумпированными полицейскими преступниками в России. Никакой пирамидой она не является.

    Таким образом, Алистаров устраивает травлю, вмешательство в частную жизнь предпринимателя, ничем себя не запятнавшего, – по заказу российского криминалитета, взявшего в долю коррумпированных полицейских, который стремится отнять активы на 20 млрд рублей созданного предпринимателем крупного социального, народного проекта в России – продолжающего успешно функционировать без его руководства (прекратившегося с переездом на Кипр).

    Слежка в Нидерландах

    Алистаров публиковал данные о местоположении еще одной жертвы в Нидерландах – в городе Гронингене, – обнаруженной с помощью незаконной слежки. Алистаров незаконно подключался к городским телекамерам, заглядывал в окна частной квартиры – и публиковал информацию в YouTube.

    Нарушение конфиденциальности в Турции

    Алистаров обнаружил и обнародовал местоположение квартиры, в которой жили и работали несколько его жертв в Стамбуле.

    Незаконный розыск в Ленинградской области

    Алистаров, не имеющий лицензии частного детектива, незаконно нашел загородный дом предпринимательницы и установил за ней слежку – с незаконной публикацией информации в своих каналах. Параллельно предоставив данные о приобретенной ею в Дубае квартире.

    Шантаж в Казахстане

    Алистаров шантажировал предпринимателей из Казахстана – под прикрытием того, что «разоблачает национальных предателей» и «врагов родины».

    Банкет на деньги украинского пирамидчика

    40-летие 6 марта этого года Алистаров вновь планирует отмечать на яхте своего друга – харьковского пирамидчика Удянского (проект Coinsbit) в Дубае?

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

    Пойманы за руку финансировавшие ВСУ подельники Алистарова – «антиэмэлэмщик» Александр Крюков и заместитель управляющего так называемого Фонда защиты прав вкладчиков и акционеров Леонид Мищенко – «западэнец»: уроженец Винницкой области. Не пора ли ФСБ проанализировать проводки Алистарова?
    Должен сидеть в тюрьме
    Справедливость требует, чтобы Алистаров встретил 40-летие с аннулированными шенгенской и другими визами, для чего есть все основания, тем более что на это обратили внимание западные СМИ. И в тюрьме – российской или дубайской, в зависимости от того, чьи правоохранители быстрее успеют его арестовать, за десятки преступлений, которые он совершил:

    –вымогательство;
    –терроризм и бандитизм;
    –травля и организация расправы над неугодными;
    –государственная измена;
    –отмывание денег;
    –мошенничество;
    –воровство;
    –вмешательство в частную жизнь.

    Тюрьмой началась карьера Алистарова, тюрьмой должна и закончиться.

  14. Wallacefex表示:

    denemebonusuverensiteler25: deneme bonusu veren siteler yeni – yat?r?ms?z deneme bonusu veren siteler

  15. Wallacefex表示:

    sweet bonanza kazanma saatleri: sweet bonanza demo oyna – sweet bonanza yorumlar

  16. FobertWen表示:

    I used to be able to find good info from your content.
    https://slovo-pacana.info/

  17. JasonUnsoG表示:

    https://sweetbonanza25.com/# sweet bonanza kazanma saatleri

  18. BradleyEdino表示:

    sweet bonanza guncel sweet bonanza yorumlar sweet bonanza guncel

發佈留言

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