Vi lever i en HD-verden. Og siden de fleste av oss bruker mer enn åtte timer om dagen på å se på forskjellige typer skjermer, kvaliteten på bildene og tegn som finnes i disse skjermbildene er veldig viktig.

Selv om det bare er tilgjengelig i noen år, er Retina-skjermer veien for fremtiden. Den høye pikseltettheten i Retina-skjermer gjør bildene klare og skarpe. Og hvem elsker ikke fine, skarpe bilder?

Skjermen på netthinnen

Lære å opprette et nettsted kompatibel med Retina-skjermer er en viktig ressurs for enhver webutvikler. Dessverre finnes det ingen ideell, perfekt løsning for å gjøre nettstedet ditt brukervennlig med Retina-Ready-skjermer.

Så mens vi venter på at noen skal finne den mest komplette løsningen, har vi sett på noen av de best mulige alternativene for å gjøre nettstedet ditt klart. På den måten vil du ikke bli villet av når den tid kommer når alle enheter har Retina som vises i en eller annen form.

Men før du begynner, ta deg tid til å ta en titt på Hvordan installere en WordPress temaHvor mange plugins bør jeg installere på WordPress.

Så la oss komme på jobb!

Opprette flere bildefiler

La oss starte med det grunnleggende. Den enkleste måten å få Retina Mode-støtte på nettstedet ditt er å lage flere bildevariasjoner i forskjellige oppløsninger. Dette betyr at for hver type oppløsning (dvs. 1x), må du lage en høyoppløsningsversjon av det klippet (dvs. 2x).

I utgangspunktet kan du opprette flere versjoner av den samme filen og bruke et plugin som WP Retina 2x eller et skript som retina.js for automatisk å generere "@ 2x" -versjonene av hver bildestørrelse eller finne "@ 2x" -bilder og vise størrelse som tilsvarer hver enhet.

Det er sant at å lage flere versjoner av det samme bildet kan være en tidkrevende prosess. Dessverre er det ingen rask metode som automatisk genererer disse bildene for deg. Derimot, det er flere Photoshop-plugins som lar deg raskt reparere bildene dine.

Plugins som " Retinize den Som er en serie av Photoshop-handlinger som lar deg enkelt optimalisere designene dine for Retina-skjermer. Hvis du bruker en eldre versjon av Photoshop (pre-CC), kan du bruke noe som " Fire Som i utgangspunktet gjør alt det nåværende Photoshop Generator-verktøyet gjør, men for eldre versjoner av Photoshop.

Skalerbar vektorgrafik (SVG)

Den enkleste måten å gå videre med Retina-modus er å bruke Scalable Vector Graphics (SVG) på nettstedet ditt. SVG er et XML-basert vektorbildeformat. Som navnet antyder, er et SVG-bilde skalerbart, noe som betyr at bilder kan strekkes så langt (eller så lite) som nødvendig, mens de fremdeles er skarpe og klare. Det kan være en rask og enkel måte for deg å implementere Retina Mode uten mye anstrengelse.

Les også: Hvordan gi WebP-bilder i stedet for tradisjonelle PNG og JPG

Retina vektorvsraster

Imidlertid er det to ulemper ved å bruke SVG på WordPress. Den første er at siden det er et vektorformat, er SVG ikke egnet for alle bilder. Så du kan bruke SVG for logoer og ikoner, men ikke for filer som bilder (noe som er litt vondt hvis du liker å bruke bilder med høy oppløsning på nettstedet ditt). Men hvis du vil bruke enkle ikoner, animasjoner eller illustrasjoner, kan SVG-filer absolutt være et alternativ for et netthinnekompatibelt nettsted.

Den andre ulempen med å bruke SVG på WordPress er at det ikke er et offisielt kompatibelt format med WordPress på grunn av sikkerhetsproblemer. Siden en SVG-fil egentlig er en XML-fil, åpnes dette for alle kjente sårbarheter tilknyttet XML-filformatet, som tvangsanalyse, XML External Entity Attacks (XEE), XML Denial of Service Attack (XDoS) -angrep osv.

Det er imidlertid en måte å aktivere SVG-støtte for nettstedet ditt, som vil gjøre SVG-filene dine sikre.

Hvordan aktivere SVG trygt på WordPress

Trygt SVG er et plugin som lar deg sikkert aktivere SVG-filstøtte på nettstedet ditt. Dette pluginet sørger for at SVG-filene dine desinfiseres for å forhindre potensielle XML-sårbarheter som påvirker nettstedet ditt.

Hold deg unna plugins som tillater MIME-type å tillate opplasting fra SVG til WordPress mediebibliotek, da disse er farlige og potensielt skadelige for nettstedet ditt. Så hvis du virkelig er fristet til å bruke SVG-formatet på WordPress, må du sørge for å gjøre det trygt og ikke laste ned det første SVG-pluginet du ser.

Kjør flere konverteringer til bloggen din ved å lese vår 15 innholdstyper som genererer flere besøkende til bloggen din

Noen plugins for å integrere netthinnekompatibilitet på WordPress

Det er flere skript og plugins for Retina-kompatibilitet som kan gjøre livet ditt mye enklere når du prøver å sette opp et nettsted som er kompatibelt med Retina Mode. Imidlertid, som nevnt tidligere, erstatter de fleste tilgjengelige plugins og skript bildene dine med bilder med høy oppløsning bare for skjermer med høy oppløsning. De strekker seg ikke som en SVG: du må fortsatt lage flere bilder med forskjellige oppløsninger.

1 - retina.js

retina.js er et av de mest brukte skriptene for å vise bilder med høy oppløsning. Dette er et open source-skript som gjør det enkelt å servere bilder med høy oppløsning til enheter med Retina-skjermer.

Skriptet sjekker hvert bilde på siden for å se om det er en høyoppløselig versjon av det bildet på serveren. Hvis det finnes en høyoppløsningsvariant, bytter skriptet standardoppløsningen med bildet med høy oppløsning. Dette er en av de vanligste måtene å vise bilder til Retina-skjermer på nettstedet ditt.

Se også: GIF, Emojis eller Memes: en god ide for WordPress nettsteder?

2 - Tett

Ligner på retina.js, Tett er et jQuery-plugin som tilbyr en enkel måte å servere bilder i pixel-ratio-format. Skriptet kaller metoden $ .fn.dense () for initialiseringen, som retter seg mot "img" -koder som vil fungere som Retina-modus-kompatible bilder etter behov.

Så erstatter det alle bildene med den respektive høyoppløsningsversjonen, akkurat som retina.js-skriptet.

3 - WP Retina 2x

Sistnevnte kan sammenlignes med en magisk Retina-bildegenerator.

WP Retina 2x er et plugin som oppretter bildefiler som kreves av High-DPI-enheter og viser dem til dine besøkende tilsvarende. I motsetning til de to foregående skriptene, genererer den forskjellige oppløsningsbilder fra et første bilde. Så hvis du ikke er så fornøyd med å lage forskjellige bilder manuelt med forskjellige oppløsninger manuelt, er dette alternativet for deg.

Det er alt for denne opplæringen, jeg håper det vil tillate deg å konvertere bildene til Retina Ready-bilde.

Oppdag også noen premium WordPress-plugins  

Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.

Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.

1. En Fancy WordPress Forfatterliste

Som navnet antyder, pluginet Fancy WordPress forfatterliste viser listen over forfattere for nettstedet ditt i en widget. Den har et enkelt brukergrensesnitt som tillater det vise informasjonen til enhver forfatter i sidefeltet. Alt du trenger å gjøre er å dra forfatterwidget til sidefeltet, og pluginen vil gjøre jobben.

En fancy WordPress-forfatterliste wordpress-plugin

Hovedtrekkene er blant andre: muligheten for å vise bloggforfatterne på en morsom måte å tiltrekke seg nye besøkende, muligheten til å vise en forfatterliste i sidefeltet eller på siden, muligheten til å starte en konkurranse mellom forfatterne av bloggen din, en responsiv layout, støtte for kortkoder og mye mer.

Last ned | dEMOWebhotell

2. Enkel innholdsfortegnelse

Ce WordPress Plugin brukervennlig lar deg sette inn en innholdsfortegnelse i dine innlegg, sider og tilpassede innleggstyper. Den har mange funksjoner, de viktigste er:Enkel innholdsfortegnelse wordpress plugin tabell matieres

automatisk styring av en innholdsfortegnelse, støtte for taggen , Rankin Math plugin support, kompatibilitet med flere sideredigerere som Gutenberg, Divi, Elementor, WPBakery Page Builder og andre, muligheten for å velge på hvilke sider publikasjonene du ønsker å vise, automatisk innføring av innholdsfortegnelsen på bestemte sider, og mange andre.

Det er en WordPress Plugin freeware som har alt du trenger for å vise innholdsfortegnelsen din, så velg den gjerne som ditt førstevalg.

Last ned | dEMOWebhotell

3. WooCommerce Advanced Bulk Edit

Redigerer du regelmessig produktkatalogen din? Enten du har 100 produkter eller 10.000 XNUMX, dette WordPress Plugin premium er etter min ydmyke mening "A must have": (Det er det første ordet som dukker opp).Woocommerce avansert bulk rediger wordpress plugin

For bare noen få dollar, plugin WooCommerce Advanced bulk Edit vil gjøre livet enklere og spare deg uhyrlig tid. Det er ingen nøling det er en bombe.

Last ned dEMO | Webhotell

Anbefalte ressurser

Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.

konklusjonen

Her! Det er det for denne opplæringen, jeg håper det lar deg lage Retina-klare bilder for nettstedet ditt. Ikke nøl med å del med vennene dine på dine favoritt sosiale nettverk

Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide WordPress blog oppretting.

Hvis du har forslag eller kommentarer, kan du la dem ligge i seksjonen vår commentaires.

...