Vi lever i en high definition-verden. Og da de fleste af os bruger mere end otte timer om dagen på at se på forskellige typer skærme, kvaliteten af ​​billederne og tegn indeholdt i disse skærme er meget vigtige.

Selvom de kun har været tilgængelige i et par år, er Retina-skærme fremtidens vej. Den høje pixeltæthed i Retina-skærme gør billeder klare og skarpe. Og hvem elsker ikke pæne, skarpe billeder?

Skærm klar til nethinden

Lære at oprette et websted kompatibel med Retina-skærme er et vigtigt aktiv for enhver webudvikler. Desværre er der ingen ideel, perfekt løsning til at gøre din hjemmeside brugervenlig med Retina-Ready-skærme.

Så mens vi venter på, at nogen finder den mest komplette løsning, har vi set på nogle af de bedst mulige muligheder for at gøre dit websted klar. På den måde vil du ikke blive vildledt, når den tid kommer, hvor alle enheder vil have Retina's vises i en eller anden form.

Men inden du starter, skal du tage dig tid til at tage et kig på Sådan installeres en WordPress temaHvor mange plugins skal jeg installere på WordPress.

Så lad os komme på arbejde!

Oprettelse af flere billedfiler

Lad os starte med det grundlæggende. Den nemmeste måde at få Retina Mode support til dit websted er at oprette flere billedvarianter i forskellige opløsninger. Dette betyder, at for hver type opløsning (dvs. 1x) skal du oprette en version med høj opløsning af dette klip (dvs. 2x).

Dybest set kan du oprette flere versioner af den samme fil og bruge et plugin som WP Retina 2x eller et script som retina.js til automatisk at generere "@ 2x" versionerne af hver billedstørrelse eller finde "@ 2x" billeder og vise størrelse svarende til hver enhed.

Det er rigtigt, at oprettelse af flere versioner af det samme billede kan være en tidskrævende proces. Desværre er der ingen hurtig metode, der automatisk genererer disse billeder til dig. Imidlertid, der er flere Photoshop-plugins, der giver dig mulighed for hurtigt at reparere dine billeder.

Plugins som " Retinize det Hvilket er en række Photoshop-handlinger, der giver dig mulighed for nemt at optimere dine designs til Retina-skærme. Hvis du bruger en ældre version af Photoshop (pre-CC), kan du bruge noget som " Fire Hvilket dybest set gør alt det nuværende Photoshop Generator-værktøj, men for ældre versioner af Photoshop.

Skalerbar vektorgrafik (SVG)

Den nemmeste måde at gå videre med Retina-tilstand er at bruge Scalable Vector Graphics (SVG) på dit websted. SVG er et XML-baseret vektorbillede format. Som navnet antyder, er et SVG-billede skalerbart, hvilket betyder, at billederne kan strækkes så langt (eller så lidt) som nødvendigt, mens de stadig er skarpe og klare. Det kan være en hurtig og nem måde for dig at implementere Retina Mode uden megen anstrengelse.

Læs også: Sådan leveres WebP-billeder i stedet for traditionel PNG og JPG

Retina vektorvsraster

Der er dog to ulemper ved at bruge SVG på WordPress. Den første er, at da det er et vektorformat, er SVG ikke egnet til alle billeder. Så du kan bruge SVG til logoer og ikoner, men ikke til filer som fotos (hvilket er lidt smertefuldt, hvis du kan lide at bruge billeder i høj opløsning til dit websted). Men hvis du vil bruge enkle ikoner, animationer eller illustrationer, kan SVG-filer bestemt være en mulighed for et nethindekompatibelt websted.

Den anden ulempe ved at bruge SVG på WordPress er, at det ikke er et officielt kompatibelt format med WordPress på grund af sikkerhedsproblemer. Da en SVG-fil i det væsentlige er en XML-fil, åbner den den for alle kendte sårbarheder, der er knyttet til XML-filformatet, såsom tvangsanalyse, XML External Entity Attacks (XEE), XML Denial of Service Attack (XDoS) -angreb osv.

Der er dog en måde at aktivere SVG-support til dit websted, der vil gøre dine SVG-filer sikre.

Sådan aktiveres SVG sikkert på WordPress

Sikker SVG er et plugin, der giver dig mulighed for sikkert at aktivere SVG-filsupport på dit websted. Dette plugin sikrer, at dine SVG-filer desinficeres for at forhindre eventuelle XML-sårbarheder, der påvirker dit websted.

Hold dig væk fra plugins, der tillader MIME-typen at tillade upload fra SVG til WordPress-mediebibliotek, da disse er farlige og potentielt skadelige for dit websted. Så hvis du virkelig er fristet til at bruge SVG-formatet på WordPress, skal du sørge for at gøre det sikkert og ikke downloade det første SVG-plugin, du ser.

Kør flere konverteringer til din blog ved at læse vores 15 indholdstyper, der genererer flere besøgende til din blog

Nogle plugins til at integrere nethindekompatibilitet på WordPress

Der er flere scripts og plugins til Retina-kompatibilitet, der kan gøre dit liv meget lettere, når du prøver at oprette et Retina Mode-kompatibelt websted. Som tidligere nævnt erstatter de fleste af de tilgængelige plugins og scripts dine billeder kun med billeder i høj opløsning til skærme med høj opløsning. De strækker sig ikke som en SVG: du skal stadig oprette flere billeder med forskellige opløsninger.

1 - retina.js

retina.js er et af de mest anvendte scripts til at vise billeder i høj opløsning. Dette er et open source-script, der gør det nemt at servere billeder i høj opløsning til enheder med Retina-skærme.

Scriptet kontrollerer hvert billede på siden for at se, om der er en højopløsningsversion af dette billede på serveren. Hvis der findes en højopløsningsvariant, bytter scriptet standardopløsningen med billedet i høj opløsning. Dette er en af ​​de mest almindelige måder at servere billeder til Retina-skærme på dit websted.

Se også: GIF, Emojis eller Memes: en god idé til WordPress-websteder?

2 - tæt

Ligner retina.js, tætte er et jQuery-plugin, der giver en nem måde at servere billeder i pixel-forhold-format. Scriptet kalder $ .fn.dense () -metoden til initialiseringen, som er målrettet mod "img" -tags, der fungerer som retina-kompatible billeder efter behov.

Så det erstatter alle billeder med den respektive højopløsningsversion, ligesom retina.js-scriptet.

3 - WP Retina 2x

Sidstnævnte kan sammenlignes med en magisk Retina-billedgenerator.

WP Retina 2x er et plugin, der opretter billedfiler, der kræves af High-DPI-enheder og viser dem for dine besøgende i overensstemmelse hermed. I modsætning til de to foregående scripts genererer den forskellige opløsningsbilleder fra et indledende billede. Så hvis du ikke er for tilfreds med manuelt at oprette forskellige billeder med forskellige opløsninger, er denne mulighed noget for dig.

Det er alt sammen til denne tutorial, jeg håber, det vil give dig mulighed for at konvertere dine billeder til Retina Ready-billede.

Oplev også nogle premium WordPress-plugins  

Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af ​​din blog eller hjemmeside.

Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.

1. En Fancy WordPress Forfatter List

Som navnet antyder, pluginet Fancy WordPress forfatterliste viser listen over forfattere til dit websted i en widget. Det har en simpel brugergrænseflade, der tillader vise oplysninger om enhver forfatter i sidebjælken. Alt hvad du skal gøre er at trække forfatterwidget til sidebjælken, og plugin-værket udfører arbejdet.

Et smukt wordpress-forfatterliste wordpress-plugin

Dets vigtigste funktioner er blandt andre: muligheden for at vise blogforfatterne på en sjov måde at tiltrække nye besøgende, evnen til at vise en forfatterliste i sidepanelet eller på siden, evnen til at start en konkurrence mellem forfatterne af din blog, et lydhør layout, support til kortkoder og meget mere.

Download | demoWeb-hosting

2. Let indholdsfortegnelse

Ce WordPress plugin brugervenlig giver dig mulighed for at indsætte en indholdsfortegnelse i dine indlæg, sider og tilpassede indlægstyper. Det har mange funktioner, de vigtigste er:Nem indholdsfortegnelse wordpress plugin tabel matieres

automatisk styring af en indholdsfortegnelse, understøttelse af tagget , Rankin Math plugin support, kompatibilitet med flere sideditorer som Gutenberg, Divi, Elementor, WPBakery Page Builder og andre, muligheden for at vælge på hvilke sider dine publikationer du ønsker at vise den, automatisk indsættelse af indholdsfortegnelsen på bestemte sider og mange andre.

Det er en WordPress plugin freeware, der har alt hvad du skal bruge for at vise din indholdsfortegnelse, så du er velkommen til at vælge det som dit første valg.

Downloade | demoWeb-hosting

3. WooCommerce Advanced Bulk Edit

Redigerer du jævnligt dit produktkatalog? Uanset om du har 100 produkter eller 10.000, dette WordPress plugin premium er efter min ydmyge mening "A must have": (Det er det første ord, der kommer til at tænke på).Woocommerce avanceret bulk rediger wordpress plugin

Kun et par dollars, plugin WooCommerce Advanced bulk Edit vil gøre livet lettere og spare dig uhyrlig tid. Der er ingen tøven, det er en bombe.

Downloade demo | Web-hosting

Anbefalede ressourcer

Find ud af om andre anbefalede ressourcer, der hjælper dig med at opbygge og administrere dit websted.

Konklusion

Her ! Det er det til denne tutorial, jeg håber, det giver dig mulighed for at oprette Retina-Ready-billeder til dit websted. Tøv ikke med at del med dine venner på dine foretrukne sociale netværk

Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider ved at konsultere vores guide på WordPress blog oprettelse.

Hvis du har forslag eller bemærkninger, skal du lade dem stå i vores afsnit kommentarer.

...