Lever high-res bilder på mobile enheter med RetinaJS

Høyoppløselige skjermer på mobile enheter er nå en norm. Bildene gir brukerne et skarpere og sprø utseende, og når de har blitt vant til denne høye kvaliteten, blir webutviklere presset til å produsere høykvalitets bilder for sine brukere også. De fleste bildene vi bruker for tiår siden, vil definitivt bli uklare på en skjerm på skjermen, og vi trenger derfor en ny måte å presentere grafikk på nettet.

Måtene vi kan adoptere varierer avhengig av formålet med bildet. Font Icon og SVG er nå den beste måten å betjene ikoner eller logo på, mens Media Queries er måten å tjene bilde fra CSS.

Men hvis du vil tjene hi-res-bilde i kroppsinnholdet, er Retina.js veien å gå. Retina.js, et JavaScript-bibliotek som gjør visning av høyoppløselige bilder en bris. Du trenger ikke engang å endre mye av koden din. La oss sjekke det ut.

Starter

Retina.js stole ikke på noen form for tredjepartsbiblioteker. Alt du trenger er å laste ned retina.js-filen og lenke den i dokumentet. Alternativt kan du koble filen fra CDNJS.com, slik som det.

Retina.js tilbyr to metoder for å betjene bilder med høy oppløsning.

Metode 1

I sin opprinnelige utgave vedtar Retina.js den samme metoden som Apple gjorde i sine enheter, som fester hi-oppløsningsbildet med @ 2x-suffiks. Så hvis du har et bilde som heter autumn.jpg, heter du høyoppløsningsversjonen som [email protected] . I versjon 1.3.0 introduserer Retina.js et nytt suffiks, _2x . Så bortsett fra @2x kan du navngi bildet som autumn_2x.jpg .

Retina.js vil sjekke serveren din for bilder med disse suffiksene når nettstedet ditt vises på en høyoppløselig skjerm, og erstatter det vanlige bildet med det. For å sikre at Retina.js plukker opp bildet vellykket, må du lagre bildet med høy oppløsning i samme katalog der den vanlige versjonen er lagret.

Metode 2

En annen måte er å bruke data-at2x i img taggen, slik som det.

Ved å bruke dette data- kan du angi navnet på mappen eller bildet annerledes, og Retina.js vil ikke utføre en servertjekke. Dette vil øke hastigheten på prosessen.

Åpne nettstedet ditt i en egen skjerm; en i vanlig skjerm og en annen i høy oppløsning. Sammenlign dem, og du bør se forskjellen (som nedenfor).

MINDRE MIXINTER

Retina.js gir også en mindre Mixins, .at2x, for å vise bildet gjennom CSS. Dette eksempelet:

 .social-ikoner {.at2x ('image / icons.jpg'); } 

... blir til følgende når de samles inn i vanlig CSS.

 .social-ikoner {bakgrunnsbilde: url ('image / icons.jpg'); } @media (-webkit-min-enhet-pixel-forhold: 1, 5), (min-moz-enhet-pixel-forhold: 1, 5), (-o-min-enhet-pixelforhold: 3/2) (min oppløsning: 1.5dppx) {.social-ikoner {bakgrunnsbilde: url ("image/[email protected]"); bakgrunnsstørrelse: auto auto; }} 

Ganske hendig, ikke sant?

Bruke Retina.js i WordPress

WordPress-brukere kan bruke et plugin som heter WP Retina 2x for å utnytte Retina.js på deres nettsted. Forutsatt at du har installert plugin og også lastet opp bilder, kan du gå til Media> WP Retina 2x- menyen. Du bør se listen over bilder du har lastet opp som følger.

Klikk på Generer-knappen. Det vil generere bilder med @2x suffiks for miniatyr, medium, stort og de andre egendefinerte bildestørrelsene du har angitt.

Endelig tanke

Ser det økende antallet enheter med høye oppløsninger, er det bare et spørsmål om tid før webutviklere ikke kan unngå å støtte det. Retina.js er alt-i-ett-biblioteket for å vise bilder med høy oppløsning. Du kan bruke bilder med attributten @2x eller data-* i kroppsinnholdet ditt, bruk .at2x til å betjene ditt nettstedbilde gjennom CSS, og det er et plugin tilgjengelig for WordPress.

10 kule ting HTML-etiketter kan gjøre

For øyeblikket er det totalt 142 HTML-elementer standardisert av W3C, unntatt de i de første faser av standardisering og de som gikk utdatert. Når det er sagt, er det mulig å savne eller glemme noen av dem som kan være nyttige når det trengs.Tidligere gjorde vi et sammendrag av noen av de beste CSS-triksene du kanskje har oversett. Dett

(Tekniske og design tips)

For Love Of Wood: 55 Amazing Wooden Sculptures [Bilder]

En berømt fransk maler og skulptør, Edgar Degas, sa en gang: "Kunst er ikke det du ser, men hva du får andre til å se." Og disse 20 talentfulle og kreative tømmerhuggerne lar oss se skjønnheten som er innlemmet i treskjæringsarbeidet gjennom deres kreasjoner . Mange av disse kunstnerne har også skåret sitt merke til den internasjonale kunstscenen.De flest

(Tekniske og design tips)