On ollut jo jonkin aikaa siitä, kun iOS-laitteiden Retina-näytöt julkaistiin ensimmäisen kerran, mutta siellä on vielä paljon sivustoja, jotka eivät ole Retina-valmiita, vaikka suunnittelijat ja kehittäjät ovat saaneet lonkan täysin reagoivan, mobiilin -ystävällinen maailma.
Tässä on tiedettävä mahdollisuudet tehdä työsi parhaimmillaan yhä yleisemmillä Retina-näytöillä. Hyvä uutinen on, että niin pelottava kuin se saattaa tuntua, se ei todellakaan ole niin monimutkaista.
$config[code] not foundVerkkosivuston valmistelu retina-valmiita kuvia varten
Double Your Fun
On todella monia tapoja, joilla tämä kissa voi ihoa niin sanotusti. Ensinnäkin sinun täytyy terävöittää CSS: ääsi hieman ja sisällyttää kuvien versiot normaalilla resoluutiollaan. CSS määrittää, mitä kuvaa näytetään sen laitteen perusteella, jolla sivustoasi tarkastellaan.
CSS-päivitykset, joita tarvitset, vaihtelevat kohdeselaimien mukaan, mutta hyvä uutinen on, että se ei ole nyt kovin monimutkainen ja helpottuu. Jätämme todellisen koodauksen toiseen päivään.
Yksi asia on pidettävä mielessä: saatat haluta kehittää verkkokalvon kuvien nimeämiskäytäntöjä, jotta voit helposti yhdistää kuvan kaksi versiota, jos niitä on muokattava myöhemmin.
SVG
Toinen lähestymistapa on SVG tai skaalautuva vektorigrafiikka. Kuten nimestä käy ilmi, ne rajoittuvat vektorigrafiikkaan, eivätkä ne toimi valokuvakuvien kanssa, mutta SVG-grafiikka eliminoi kahden kuvamateriaalin tarpeen jokaiselle grafiikalle sivustossasi. Jälleen kerran selaimen ja selaimen välillä on muunnelmia, joten haluat tehdä lisätutkimuksia tarpeidesi mukaan.
Ja kuten edellä todettiin, SVG ei todennäköisesti toimi ainoana ratkaisuna useimmilla sivustoilla, ellei sivustossa ole valokuvatyyppisiä kuvia.
Raaka voima
Voit tietysti myös yksinkertaisesti tyhjentää matalan resoluution tiedostot ja palvella vain verkkokalvovalmiita kuvia. Suosittelemme tätä vain käyttötarkoituksiin, joissa on hyvin tiukka yleisö. Jos tiedät, että kaistanleveys ei ole ongelma, tämä voi olla oikea reitti, mutta se ei todellakaan ole paras käytäntö
Muut koodausratkaisut
Ponnistuksen ja eleganssin spektrin toisessa päässä ovat koodausmenetelmät, jotka perustuvat joihinkin palvelinpuolen muutoksiin (kuten.htaccess-tiedostoihin) sekä PHP- ja Javascript-koodaukseen.
Tämä voi olla paras ratkaisu, vaikka pienet hankkeet eivät välttämättä kannata sitä.
Kaiken kaikkiaan käytettävä lähestymistapa riippuu yleisöstäsi, sivustosi kuvien luonteesta ja kehitystyöryhmän teknisestä asiantuntemuksesta. On hyvä ratkaisu lähes kaikkiin tilanteisiin. Ainoa huono ratkaisu on, että Retina ei näy kokonaan.
NASDAQ Photo Shutterstockin kautta
