Gå till innehållet

Hur du skapar retina-klara bilder för din webbplats

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Vi lever i en högupplöst värld. Och eftersom de flesta av oss spenderar mer än åtta timmar om dagen på att titta på olika typer av skärmar, kvaliteten på bilderna och tecken i dessa skärmar är mycket viktigt.

Även om det bara är tillgängligt i några år är Retina-skärmar framtidens väg. Den höga pixeldensiteten i Retina-skärmar gör bilderna klara och skarpa. Och vem älskar inte fina, skarpa bilder?

Nätfärdig skärm

Att lära sig att skapa en webbplats som är kompatibel med Retina-skärmar är en viktig tillgång för alla webbutvecklare. Tyvärr finns det inte en enda, perfekt lösning för att göra din webbplats användarvänlig med Retina-Ready-skärmar.

Så medan vi väntar på att någon ska hitta den mest kompletta lösningen har vi tittat på några av de bästa möjliga alternativen för att göra din webbplats redo. På det sättet kommer du inte att bli vilse när den tid kommer när alla enheter kommer att ha näthinnan i en eller annan form.

Men innan du börjar, ta dig tid att titta på Hur man installerar en Wordpress temaHur många insticksprogram ska jag installera på Wordpress.

Låt oss börja arbeta!

Skapa flera bildfiler

Låt oss börja med grunderna. Det enklaste sättet att få Retina Mode-stöd för din webbplats är att skapa flera bildvarianter i olika upplösningar. Det betyder att för varje typ av upplösning (dvs. 1x) måste du skapa en högupplöst version av det klippet (dvs. 2x).

I grund och botten kan du skapa flera versioner av samma fil och använda ett plugin som WP Retina 2x eller ett skript som retina.js för att automatiskt generera "@ 2x" -versionerna av varje bildstorlek eller hitta "@ 2x" -bilder och visa storlek som motsvarar varje enhet.

Det är sant att det kan vara en tidskrävande process att skapa flera versioner av samma bild. Tyvärr finns det ingen snabb metod som automatiskt genererar dessa bilder åt dig. I alla fall, Det finns flera Photoshop-plugins som gör att du snabbt kan reparera dina bilder.

Plugins som " Retinera den Vilket är en serie Photoshop-åtgärder som gör att du enkelt kan optimera dina mönster för Retina-skärmar. Om du använder en äldre version av Photoshop (pre-CC) kan du använda något som " Fyra Som i princip gör allt det nuvarande Photoshop Generator-verktyget gör, men för äldre versioner av Photoshop.

Skalbar vektorgrafik (SVG)

Det enklaste sättet att gå vidare med Retina-läge är att använda Scalable Vector Graphics (SVG) på din webbplats. SVG är ett XML-baserat vektorbildformat. Som namnet antyder är en SVG-bild skalbar, vilket innebär att bilder kan sträckas så långt (eller så lite) som behövs, samtidigt som de fortfarande är skarpa och klara. Det kan vara ett snabbt och enkelt sätt för dig att implementera Retina Mode utan mycket ansträngning.

Läs också: Hur man tillhandahåller WebP-bilder istället för traditionell PNG och JPG

Retina vektorvsraster

Det finns dock två nackdelar med att använda SVG på WordPress. Den första är att eftersom det är ett vektorformat är SVG inte lämpligt för alla bilder. Så du kan använda SVG för logotyper och ikoner, men inte för filer som foton (vilket är lite smärtsamt om du vill använda högupplösta bilder för din webbplats). Men om du vill använda enkla ikoner, animationer eller illustrationer, kan SVG-filer säkert vara ett alternativ för en Retina-kompatibel webbplats.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Den andra nackdelen med att använda SVG på WordPress är att det inte är ett officiellt kompatibelt format med WordPress på grund av säkerhetsproblem. Eftersom en SVG-fil i huvudsak är en XML-fil öppnas den för alla kända sårbarheter associerade med XML-filformatet, såsom tvångsanalys, XML External Entity Attacks (XEE), XML Denial of Service Attack (XDoS) attacker etc.

Det finns dock ett sätt att aktivera SVG-stöd för din webbplats som gör dina SVG-filer säkra.

Hur du aktiverar SVG säkert på WordPress

Säker SVG är ett plugin som låter dig säkert aktivera SVG-filsupport på din webbplats. Detta plugin säkerställer att dina SVG-filer desinficeras för att förhindra eventuella XML-sårbarheter som påverkar din webbplats.

Håll dig borta från plugins som gör att MIME-typ tillåter uppladdning från SVG till WordPress-mediebiblioteket, eftersom dessa är farliga och potentiellt skadliga för din webbplats. Så om du verkligen är frestad att använda SVG-formatet på WordPress, se till att du gör det säkert och inte laddar ner det första SVG-plugin du ser.

Kör fler konverteringar till din blogg genom att läsa vår 15 innehållstyper som genererar fler besökare till din blogg

Vissa plugins för att integrera Retina-kompatibilitet på WordPress

Det finns flera skript och plugins för Retina-kompatibilitet som kan göra ditt liv mycket lättare när du försöker skapa en Retina Mode-kompatibel webbplats. Som tidigare nämnts ersätter dock de flesta plugins och skript som finns tillgängliga, dina bilder med högupplösta bilder endast för högupplösta skärmar. De sträcker sig inte som en SVG: du behöver fortfarande skapa flera bilder med olika upplösningar.

1 - retina.js

retina.js är ett av de mest använda manusen för att visa högupplösta bilder. Detta är ett öppen källkodsskript som gör det enkelt att servera högupplösta bilder till enheter med Retina-skärmar.

Skriptet kontrollerar varje bild på sidan för att se om det finns en högupplöst version av den bilden på servern. Om det finns en högupplöst variant byter skriptet standardupplösningen med bilden med hög upplösning. Detta är ett av de vanligaste sätten att visa bilder för Retina-skärmar på din webbplats.

Se även: GIF, Emojis eller Memes: en bra idé för WordPress-webbplatser?

2 - Tät

Liknar retina.js, Tät är ett jQuery-plugin som erbjuder ett enkelt sätt att visa bilder i pixelförhållande. Skriptet kallar metoden $ .fn.dense () för initialiseringen, som riktar sig mot "img" -taggar som kommer att fungera som Retina-kompatibla bilder efter behov.

Så det ersätter alla bilder med respektive högupplöst version, precis som retina.js-skriptet.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

3 - WP Retina 2x

Det senare kan liknas vid en magisk Retina-bildgenerator.

WP Retina 2x är ett plugin som skapar bildfiler som krävs av High-DPI-enheter och visar dem för dina besökare i enlighet med detta. Till skillnad från de två föregående skripten genererar den olika upplösningsbilder från en initialbild. Så om du inte är så nöjd med att manuellt skapa olika bilder med olika upplösningar, är det här alternativet för dig.

Det här är allt för denna självstudie, jag hoppas att det kommer att låta dig konvertera dina bilder till Retina Ready-bild.

Upptäck också några premium WordPress-plugins  

Du kan använda andra WordPress-plugins för att ge ett modernt utseende och optimera greppet på din blogg eller webbplats.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. En Fancy WordPress Författarlista

Som namnet antyder, plugin Fancy WordPress Författarlista visar listan med författare för din webbplats i en widget. Det har ett enkelt användargränssnitt som tillåter visa information om vilken författare som helst i sidofältet. Allt du behöver göra är att dra författarevidgeten till sidofältet och plugin kommer att göra jobbet.

Ett snyggt WordPress-författarlista wordpress-plugin

Dess huvudfunktioner är bland andra: möjligheten för att visa bloggförfattarna på ett roligt sätt att locka nya besökare, möjligheten att visa en författarlista i sidofältet eller på sidan, möjligheten att starta en tävling mellan författarna till din blogg, en lyhörd layout, stöd för kortkoder och mycket mer.

Ladda ner | demowebbhotell

2. Enkel innehållsförteckning

Detta användarvänliga WordPress-plugin låter dig infoga en innehållsförteckning i dina personliga publikationer, sidor och typer av publikationer. Den har många funktioner, de viktigaste är:Enkel innehållsförteckning wordpress plugin tabell matieres

automatisk hantering av en innehållsförteckning, stöd för taggen , Plugin-stöd för Rankin Math, kompatibilitet med flera sidredigerare som Gutenberg, Divi, Elementor, WPBakery Page Builder och andra, möjligheten att välja på vilka sidor dina publikationer du vill visa den, automatisk infogning av innehållsförteckningen på vissa sidor och många andra.

Det är ett gratis WordPress-plugin som har allt du behöver för att visa din innehållsförteckning, så välj det gärna som ditt bästa val.

Ladda ner | demowebbhotell

3. WooCommerce Advanced Bulk Edit

Publicerar du regelbundet din produktkatalog? Oavsett om du har 100 produkter eller 10.000 XNUMX, är ​​detta premium WordPress-plugin IMHO "A must have": (Detta är det första ordet som kommer att tänka på).Woocommerce avancerad bulk redigera wordpress plugin

För bara några dollar, plugin WooCommerce Advanced bulk Edit kommer att göra livet enklare och spara dig monströs tid. Det finns ingen tvekan att det är en bomb.

Ladda ner demo | webbhotell

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Rekommenderade resurser

Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.

Slutsats

Här! Det är det för denna handledning, jag hoppas att det gör att du kan skapa Retina-Ready-bilder för din webbplats. Tveka inte att dela med dina vänner på dina favorit sociala nätverk

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blog skapelse.

Om du har förslag eller kommentarer, lämna dem i vårt avsnitt commentaires.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
7 aktier
del6
tweet
Enregistrer1