Miért nem éles a logó a retina kijelzőn?

Miért nem éles a logó a retina kijelzőn?

2018-11-21T13:27:40+00:002018. október 28.|Kategória: Tippek|Címke: |

Amikor egy weboldalt készítesz, a menü sorában megjelenik az oldal logója. A beállított logó hagyományos monitoron tűéles, azonban retina kijelzőn zavaróan életlen. Mi ennek az oka?

A WordPress sablonok nagyrészének többféle logót is be tudsz állítani, például normál és retina kijelzőhöz használtat, így minden kijelző típuson éles képet fogsz kapni. A kérdés, hogy ugyanazt a logó képet hogyan mentsük el a különféle kijelző típusokhoz?

Retina kijelző

A retina kijelző az Apple által kifejlesztett megjelenítési mód (az iPhone 4-gyel vezették be a picra), ami nem egy új technológia, csupán egy fantázianév, a hagyományos LCD kijelzők módosított változata. A lényeg, hogy a nagyobb pixelsűrűség miatt az emberi szem már képtelen megkülönböztetni egymástól a pixeleket, így tisztább képet látunk. A szövegek élesebbnek, jobban olvashatónak, a képek színhűbbnek tűnnek.

Telefonoknál ez a felbontás nagyobb mint 300ppi, mivel 25cm-ről nézve 300ppi-nél már nem érzékeljük külön a pixeleket. Notebookok esetében viszont elegendő a 220ppi-nél nagyobb felbontás, ugyanis az éleslátás a távolság növekedésével romlik. Vagyis egy kijelzőt két paraméterrel jellemezhetünk. A felbontásával, ami megadja, hogy mekkora képet fogunk látni, illetve egy távolsággal, aminél messzebbről nézve azt a pixelek egységes képet alkotnak.

Mekkora legyen a kép?

Mivel a retina kijelző felbontása sokkal finomabb, részletgazdagabb, így az a kép, ami egy normál monitoron éles, itt homályos lesz. A lenti ábra alapján talán érezhető, hogy ugyanaz a kép retina estében miért lesz tompább.

Amikor a honlap szerkesztőben beállítjuk, hogy a logó mérete legyen 200×100 pixel, és egy ekkora logóképet töltünk fel, akkor az normál monitoron éles lesz, retina kijelzőn viszont a 200×100 pixelt nagyjából dupla annyi képponton fogja megmutatni, így az eredeti képet fel fogja nagyítani, ami ezáltal raszteresedik.

A megoldás, hogy nagyobb képet töltünk fel. Olyan nagyot, ami a retina kijelzőn is éles, majd a kép méretét úgy adjuk meg, mintha normál képernyőről lenne szó. Példaként legyen a képünk mérete 200×100 pixel, neve teszt_200x100.jpg. A kép html formázása pedig:

<img  scr=” teszt_200x100.jpg”> vagy <img  scr=” teszt_200x100.jpg” with=”200” height=”100”>

A kép normál monitoron éles lesz, de retinán elhomályosodik, mivel a 200×100 pixeles képet a kijelző 400×200 pixelen jelenítjük meg. Azonban, ha a logót készítéskor 400×200 pixel méretben mentjük el, elkerülhetjük a minőség romlást. A lényeg, hogy html-ben az eredeti megjelenítési méretet használjuk, hiszen 200×100 pixelnek megfelelő nagyságú képet akarunk látni:

<img  scr=” teszt_400x200.jpg” with=”200” height=”100”>

Így mindkét felbontás esetén éles képet kapunk.

Az alábbi képen azt látjuk, amikor a KLiSS logóját egy retina kijelzőn jelenítettem meg. A felső egy normál méretű, míg az alsó dupla képpontból álló logót mutat.

Ha a logónkat, ikonjainkat, vagyis a grafikai elemeinket nem jpg, vagy png formátumban mentjük el, hanem svg-ben, akkor a fenti problémával nem kell foglalkoznunk, mivel az svg formátum nem pixeleket tartalmaz, hanem egy leíró kódot. Ezáltal, ahogy a vektorgrafikákat is, minőségromlás nélkül nagyíthatjuk.

Felbontás css-ben szabályozva

Ha elvárás, hogy a képanyag normál és retina kijelzőn is helyesen jelenjen meg, akkor a szerveren biztosítani kell a retina-ready felbontású képeket is. Lényeges, hogy ezeket a képeket csak akkor töltse be az oldal, ha valóban retina kijelzővel van dolgunk, illetve fizikailag tegye azonos méretűvé tegye őket. Ezt pedig css-ben le kell kódolnunk, például így:

/* Kis felbontású kijelző */
.image {
background-image: url(KLiSS-menu-logo.png);
background-size: 178px 35px;
height: 35px;
width: 178px;
}

/* nagy felbontású kijelző */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min–moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi) {
.image {
background-image: url(KLiSS-menu-logo-retina.png);
background-size: 178px 35px;
}
}

A jobb ügyfélélmény érdekében az oldalon cookie-kat (sütiket) használunk. A sütik használatát az oldal böngészésével elfogadod További információk

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close