A weboldal képének adaptálása a retina-kijelzők alatt

Manapság elmondom Önnek, milyen gyorsan optimalizálhatja webhelye képeit az új MacBooks, iMacs, iPhones, iPads stb. Mint általában, mielőtt ez egy kis elmélet és gyakorlati tanácsom.

Kezdjük a definícióval:

A Retiina (a latin retina - retina) az Apple készülékekben használt LCD kijelzők közös marketingcíme, és ilyen magas képpontsűrűséggel rendelkezik, hogy az emberi szem nem tudja észrevenni, hogy a kép magából áll.

Talán ezen az elméleti részben befejeződött. Ki érdekli a Retina-megjelenítő eszköz, könnyen megtalálhatja a speciális erőforrásokra vonatkozó mélyebb információkat.

Szóval, valószínűleg észrevette, hogy a legtöbb weboldal grafikus retina része terjedt el. Pontosabban, nem tűnik világosnak a felület egyéb elemeihez képest. Ami még a szabad szemmel is látható. Nem nehéz megérteni - a raszteres grafika lebeg. A vektor minden rendben van, tökéletesen skálázható minden felbontásnál és bármilyen képpontsűrűségnél. Számos módja van ennek a problémának a leküzdésére, teljes könyvtárakat fejlesztettek ki, amelyekkel teljes mértékben alkalmazkodni tud a webhelyéhez a Retina-hoz. De ma egy kicsit más lesz.

Véleményem szerint a raszter adaptálása nem egészen értelmes megközelítés. Úgy gondolom, hogy régóta itt az ideje, hogy megszabaduljon a felületen, és teljesen lefordítsa elemeit vektoros grafika. Például az SVG-ben. Emellett új CSS3 stílusok használatával megszabadulhat a raszteres vonalakból a színátmenetekben, a gombok árnyékában és a felület egyéb elemeiben. A századfordulón népszerű népszerűség után a bitmap ikonok már régóta elhullottak, és csak a hátramaradók használják. Azokat a helyeket ugyanaz a SVG vektor és a font-ikonok könyvtára váltotta fel, amelyeket a webfejlesztők nagyon szeretnek. Meg fogsz lepődni, de a szinte minden oldal kezelőfelülete raszter nélkül megszabadulhat, anélkül, hogy sok kellemetlenség lenne. Ez véglegesen kiküszöböli a nagyfelbontású kijelzők megjelenítésével kapcsolatos problémákat.

Ha nem tudsz megszabadulni a rasztertől teljesen, ne aggódj! Néhány raszteres kép a webhely felületén - ez nem probléma, és nem probléma. Megmondom, hogyan lehet könnyen és helyesen használni a CSS több sorait, hogy adaptálja a bitképet a helyes megjelenítéshez a Retina kijelzőn.

Anélkül, hogy belemennénk a helyzet részleteibe, vegyünk egy egyszerű példát. Webhelyének grafikusan összetett logója van, amely lehetetlen vagy nehezen konvertálható vektoros formátumra. Tüntessük el a logikai kérdéseket: hogyan történt, hogy nincs vektoros logó, és milyen logót nem lehet megjeleníteni a vektorban. Feladatunk az, hogy a logó megjelenítését a Retina-n világosabban töröljük, megszabaduljunk a szappantól.

A média kérését csak be kell fejezni, hogy a 1,5-nél nagyobb fizikai és CSS-pixelek aránya esetén az új képünket feltöltöttük logo2x.png

Ez nagyon egyszerűen történik:

Ne felejtse el beállítani a háttér méretét ugyanúgy, mint az eredeti képen. A mi esetünkben 300x100 px.

Nyilvánvaló, hogy ez a módszer kevés konkrét kép esetében hasznos. Ha Retina támogatást szeretne, beleértve a tartalmat is, használjon más módszereket is. Beszélünk róluk még egyszer.