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;
}
}
