Žijeme vo svete s vysokým rozlíšením. A keďže väčšina z nás trávi viac ako osem hodín denne pozeraním na rôzne typy obrazoviek, kvalita obrázkov a znaky obsiahnuté na týchto obrazovkách sú veľmi dôležité.
Aj keď sú k dispozícii iba niekoľko rokov, displeje Retina sú cestou budúcnosti. Vďaka vysokej hustote pixelov na displejoch Retina sú obrázky čisté a ostré. A kto nemá rád pekné, ostré obrázky?
Učiť sa vytvoriť webovú stránku kompatibilita s obrazovkami Retina je dôležitým prínosom pre každého webového vývojára. Žiaľ, neexistuje žiadne ideálne a dokonalé riešenie na to, aby bol váš web užívateľsky prívetivý s displejmi Retina-Ready.
Takže zatiaľ čo čakáme, kým niekto nájde najkompletnejšie riešenie, preskúmali sme niektoré z najlepších možných možností prípravy vášho webu. Takto sa nenecháte zviesť z cesty, keď príde čas, keď sa na všetkých zariadeniach zobrazí retina v tej či onej podobe.
Ale skôr, ako začnete, urobte si čas na to pozrieť Ako nainštalovať motív WordPress, Koľko pluginy mám nainštalovať na WordPress.
Potom poďme do práce!
Vytváranie viacerých obrazových súborov
Začnime od základov. Najjednoduchší spôsob, ako získať podporu pre váš web v režime Retina, je vytvoriť viac variácií obrázkov v rôznych rozlíšeniach. To znamená, že pre každý typ rozlíšenia (t. J. 1x) musíte vytvoriť verziu tohto klipu s vysokým rozlíšením (t. J. 2x).
V zásade môžete vytvoriť viac verzií toho istého súboru a použiť doplnok ako WP Retina 2x alebo skript ako retina.js na automatické generovanie verzií „@ 2x“ pre každú veľkosť obrázka alebo vyhľadanie obrázkov „@ 2x“ a zobrazenie veľkosť zodpovedajúca každému zariadeniu.
Je pravda, že vytvorenie viacerých verzií toho istého obrázka môže byť časovo náročný proces. Bohužiaľ neexistuje rýchla metóda, ktorá by tieto obrázky automaticky generovala za vás. Avšak existuje niekoľko doplnkov Photoshop, ktoré vám umožňujú rýchlo opraviť vaše obrázky.
Doplnky ako „ Retinizujte to Čo je séria akcií Photoshopu, ktoré vám umožnia ľahko optimalizovať vaše návrhy pre displeje Retina. Ak používate staršiu verziu Photoshopu (pre-CC), môžete použiť niečo ako „ Štyri Čo v podstate robí všetko, čo súčasný nástroj Photoshop Generator, ale pre staršie verzie Photoshopu.
Škálovateľná vektorová grafika (SVG)
Najjednoduchší spôsob, ako pokračovať v režime Retina, je použitie škálovateľnej vektorovej grafiky (SVG) na vašom webe. SVG je formát vektorového obrázka založený na XML. Ako názov napovedá, obraz SVG je škálovateľný, čo znamená, že obrázky je možné roztiahnuť podľa potreby (alebo len tak málo), pričom sú stále ostré a jasné. Môže to byť rýchly a ľahký spôsob, ako implementovať režim Retina bez veľkého úsilia.
Prečítajte si tiež: Ako poskytovať obrázky WebP namiesto tradičných formátov PNG a JPG
Používanie SVG na WordPress však má dve nevýhody. Prvým je, že keďže ide o vektorový formát, SVG nie je vhodný pre všetky obrázky. SVG teda môžete použiť pre logá a ikony, ale nie pre súbory ako fotografie (čo je trochu bolestivé, ak na svoje webové stránky chcete používať obrázky s vysokým rozlíšením). Ak však chcete používať jednoduché ikony, animácie alebo ilustrácie, súbory SVG môžu byť určite voľbou pre webovú stránku kompatibilnú so sietnicou.
Druhou nevýhodou používania SVG na WordPress je to, že z bezpečnostných dôvodov nejde o oficiálne kompatibilný formát s WordPress. Pretože súbor SVG je v podstate súbor XML, otvorí sa mu všetky známe zraniteľné miesta spojené s formátom súboru XML, ako napríklad nátlaková analýza, útoky XML External Entity Attacks (XEE), XML Denial of Service Attack (XDoS) atď.
Existuje však spôsob, ako povoliť podporu SVG pre váš web, vďaka čomu budú vaše súbory SVG zabezpečené.
Ako bezpečne povoliť SVG na WordPress
Bezpečné SVG je doplnok, ktorý umožňuje bezpečne povoliť podporu súborov SVG na vašom webe. Tento doplnok zaisťuje dezinfekciu vašich súborov SVG, aby sa predišlo možným zraniteľnostiam XML ovplyvňujúcim váš web.
Držte sa ďalej od doplnkov, ktoré umožňujú typu MIME umožniť nahrávanie z SVG do mediálnej knižnice WordPress, pretože sú nebezpečné a potenciálne škodlivé pre váš web. Takže ak vás skutočne láka používať formát SVG na WordPress, uistite sa, že to robíte bezpečne, a nestiahnite si prvý viditeľný plugin SVG.
Získajte viac konverzií do svojho blogu prečítaním nášho Typy obsahu 15, ktoré generujú viac návštevníkov vášho blogu
Niektoré doplnky na integráciu kompatibility sietnice na WordPress
Existuje niekoľko skriptov a doplnkov pre kompatibilitu s Retina, ktoré vám môžu výrazne uľahčiť život pri pokuse o nastavenie webových stránok kompatibilných s režimom Retina. Ako sme však už spomenuli, väčšina dostupných doplnkov a skriptov nahradí vaše obrázky obrázkami s vysokým rozlíšením iba pre displeje s vysokým rozlíšením. Nerozťahujú sa ako SVG: stále musíte vytvárať viac obrázkov s rôznym rozlíšením.
1 - retina.js
retina.js je jeden z najpoužívanejších skriptov na poskytovanie obrázkov vo vysokom rozlíšení. Toto je skript otvoreného zdroja, ktorý uľahčuje poskytovanie obrázkov vo vysokom rozlíšení zariadeniam s displejmi Retina.
Skript skontroluje každý obrázok na stránke, aby zistil, či sa na serveri nachádza verzia tohto obrázka vo vysokom rozlíšení. Ak existuje variant s vysokým rozlíšením, skript zamení štandardné rozlíšenie za obrázok s vysokým rozlíšením. Toto je jeden z najbežnejších spôsobov poskytovania obrázkov pre displeje Retina na vašom webe.
Pozri tiež: GIF, Emojis alebo Memes: dobrý nápad pre webové stránky WordPress?
2 - Husté
Podobné retina.js, hustý je doplnok jQuery, ktorý ponúka jednoduchý spôsob poskytovania obrázkov vo formáte pixelov. Skript volá metódu inicializácie $ .fn.dense (), ktorá je zameraná na značky „img“, ktoré budú podľa potreby slúžiť ako kompatibilné obrázky v režime Retina.
Nahrádza teda všetky obrázky príslušnou verziou s vysokým rozlíšením, rovnako ako skript retina.js.
3 - WP sietnica 2x
Ten druhý možno prirovnať k čarovnému generátoru obrazu sietnice.
WP Retina 2x je doplnok, ktorý vytvára obrazové súbory vyžadované zariadeniami s vysokým DPI a podľa toho ich zobrazuje vašim návštevníkom. Na rozdiel od predchádzajúcich dvoch skriptov generuje z pôvodného obrázka obrázky s rôznym rozlíšením. Pokiaľ teda nie ste príliš spokojní s manuálnym vytváraním rôznych obrázkov s rôznymi rozlíšeniami, je táto možnosť určená práve vám.
To je všetko pre tento tutoriál, dúfam, že vám to umožní previesť vaše obrázky na obraz Retina Ready.
Objavte aj niektoré prémiové doplnky WordPress
Môžete použiť iné WordPress pluginy poskytnúť moderný vzhľad a optimalizovať prácu s vaším blogom alebo webovou stránkou.
Ponúkame vám tu niekoľko prémiových doplnkov WordPress, ktoré vám to pomôžu.
1. Fancy WordPress autor zoznam
Ako už názov napovedá, plugin Efektný zoznam autorov WordPress zobrazí zoznam autorov pre váš web v miniaplikácii. Má jednoduché užívateľské rozhranie, ktoré umožňuje zobraziť informácie o ktoromkoľvek autorovi na bočnom paneli. Jediné, čo musíte urobiť, je pretiahnuť autorskú miniaplikáciu na bočný panel a doplnok urobí prácu.
Medzi jeho hlavné črty patrí okrem iného: možnosť na zobrazenie autorov blogu zábavným spôsobom prilákať nových návštevníkov, schopnosť zobraziť zoznam autorov na bočnom paneli alebo na stránke, schopnosť začať súťaž medzi autormi vášho blogu, pohotovým rozložením, podporou krátkych kódov a oveľa viac.
Stiahnutie demo | web hosting
2. Ľahký obsah
Ce WordPress Plugin užívateľsky prívetivý vám umožňuje vložiť obsah do vašich príspevkov, stránok a vlastných typov príspevkov. Má veľa funkcií, z ktorých hlavné sú:
automatická správa obsahu, podpora značky , Podpora zásuvných modulov Rankin Math, kompatibilita s niekoľkými editormi stránok, ako je Gutenberg, divi, Elementor, WPBakery Page Builder a ďalšie, možnosť výberu, na ktorých stránkach si ich publikácie chcete zobraziť, automatické vkladanie obsahu na určité stránky a mnoho ďalších.
Jedná sa o WordPress Plugin freeware, ktorý má všetko, čo budete potrebovať na zobrazenie obsahu, takže si ho vyberte ako svoju prvú voľbu.
Stiahnuť | demo | web hosting
3. WooCommerce Rozšírené hromadné úpravy
Upravujete pravidelne svoj produktový katalóg? Či už máte 100 produktov alebo 10.000 XNUMX, toto WordPress Plugin prémia je podľa môjho skromného názoru „Musím mať“: (To je prvé slovo, ktoré ma napadne).
Len za pár dolárov, plugin Rozšírené hromadné úpravy WooCommerce Uľahčí vám život a ušetrí vám strašidelný čas. Neexistuje žiadne váhanie, je to bomba.
Stiahnuť | demo | web hosting
Odporúčané zdroje
Zistite ďalšie odporúčané zdroje, ktoré vám pomôžu pri vytváraní a správe vašich webových stránok.
- 5 zdroje návštevnosti asi viete
- Prípadová štúdia: Content marketing, ako sa učiť z chýb
- Prečo nezávislí ľudia potrebujú denný rozvrh
- 7 aspekty, ktoré vám pomôžu vytvoriť úspešný blog
záver
Tu ! To je pre tento tutoriál všetko, dúfam, že vám umožní vytvárať obrázky pripravené pre sieťovinu pre váš web. Neváhaj zdieľať so svojimi priateľmi na obľúbených sociálnych sieťach.
Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, pozrite si nášho sprievodcu Tvorba blogu WordPress.
Ak máte nejaké návrhy alebo pripomienky, nechajte ich v našej sekcii Komentáre.
...
