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.

20 UI Design Photoshop-opplæringsprogrammer som kommer til nytte

Ved å bruke Photoshop til å lage fengende elementer, som realistiske ikoner og widgets, er det ofte en utfordrende oppgave, spesielt for de som fortsatt lærer tauene til UI / UX-design. Mange forskjellige faktorer må tas i betraktning: belysning, kanter, skygger og så videre.Heldig for oss, det er mange nyttige opplæringsprogrammer tilgjengelig online på hvordan du lager imponerende bruker- og webgrensesnittelement; og i dag vil jeg gjerne gi oppmerksomheten til 20 av dem. Du ka

(Tekniske og design tips)

9 leksjoner jeg lærte fra å bygge min første app

Sommeren 2014 bestemte jeg meg for å bygge et spill. Jeg elsker historie og kunnskap, så jeg bestemte meg for at spillet skulle være en trivia. Jeg begynte å bygge et nettsted ved hjelp av PHP og MySQL (som jeg lærte bare for dette formålet) å lagre fakta, spørsmål og annen info.Ved slutten av sommeren hadde jeg begynt å bygge nettstedet. Å måtte

(Tekniske og design tips)