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?
Lära sig skapa en webbplats kompatibel med Retina-skärmar är en viktig tillgång för alla webbutvecklare. Tyvärr finns det ingen idealisk, 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 tema, Hur 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
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.
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.
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 för att optimera hanteringen av din blogg eller hemsida.
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.
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 | demo | webbhotell
2. Enkel innehållsförteckning
Ce Wordpress plugin användarvänlig låter dig infoga en innehållsförteckning i dina inlägg, sidor och anpassade inläggstyper. Den har många funktioner, de viktigaste är:
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 en Wordpress plugin gratisprogram som har allt du behöver för att visa din innehållsförteckning, så välj det gärna som ditt förstahandsval.
Ladda ner | demo | webbhotell
3. WooCommerce Advanced Bulk Edit
Redigerar du regelbundet din produktkatalog? Oavsett om du har 100 produkter eller 10.000 XNUMX, detta Wordpress plugin premium är enligt min ödmjuka åsikt "A must have": (Det är det första ordet som kommer att tänka på).
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
Rekommenderade resurser
Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.
- 5 trafikkällor du säkert vet
- Fallstudie: Content Marketing, hur man lär sig av misstagen
- Varför frilansare behöver ett dagligt schema
- 7 aspekter som gör att du kan skapa en framgångsrik blogg
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.
.
