Žijeme ve světě s vysokým rozlišením. A protože většina z nás tráví více než osm hodin denně sledováním různých typů obrazovek, kvalita obrázků a znaky obsažené na těchto obrazovkách jsou velmi důležité.
Ačkoli jsou k dispozici pouze několik let, displeje Retina jsou cestou budoucnosti. Díky vysoké hustotě pixelů na displejích Retina jsou obrázky jasné a ostré. A kdo nemá rád pěkné a ostré obrázky?
Učit se vytvořit web kompatibilní s obrazovkami Retina je důležitým přínosem pro každého webového vývojáře. Bohužel neexistuje žádné ideální a dokonalé řešení, které by vaši webovou stránku učinilo uživatelsky přívětivou pomocí displejů Retina-Ready.
Zatímco čekáme, až někdo najde nejkompletnější řešení, podívali jsme se na některé z nejlepších možných možností, jak připravit váš web. Tímto způsobem nebudete svedeni z cesty, až přijde čas, kdy se na všech zařízeních bude Retina zobrazovat v té či oné podobě.
Ale než začnete, udělejte si čas na prohlídku Jak nainstalovat motiv WordPress, Kolik pluginy mám nainstalovat na WordPress.
Tak pojďme do práce!
Vytváření více obrazových souborů
Začněme od základů. Nejjednodušší způsob, jak získat podporu režimu Retina pro váš web, je vytvořit více variací obrazu v různých rozlišeních. To znamená, že pro každý typ rozlišení (tj. 1x) musíte vytvořit verzi tohoto klipu s vysokým rozlišením (tj. 2x).
V zásadě můžete vytvořit více verzí stejného souboru a použít plugin jako WP Retina 2x nebo skript jako retina.js k automatickému generování verzí „@ 2x“ každé velikosti obrázku nebo k vyhledání obrázků „@ 2x“ a zobrazení velikost odpovídající každému zařízení.
Je pravda, že vytváření více verzí stejného obrazu může být časově náročný proces. Bohužel neexistuje žádná rychlá metoda, která by tyto obrázky automaticky generovala. Nicméně, existuje několik pluginů Photoshopu, které vám umožní rychle opravit vaše obrázky.
Pluginy jako „ Retinize to Což je řada akcí Photoshopu, které vám umožní snadno optimalizovat vaše návrhy pro displeje Retina. Pokud používáte starší verzi Photoshopu (pre-CC), můžete použít něco jako „ Čtyři Což v podstatě dělá vše, co dělá aktuální nástroj Photoshop Generator, ale pro starší verze Photoshopu.
Škálovatelná vektorová grafika (SVG)
Nejjednodušší způsob, jak pokračovat v režimu Retina, je použít na vašem webu Scalable Vector Graphics (SVG). SVG je formát vektorového obrázku založený na XML. Jak název napovídá, obrázek SVG je škálovatelný, což znamená, že obrázky lze podle potřeby natáhnout tak daleko (nebo tak málo), přičemž jsou stále ostré a jasné. Může to být rychlý a snadný způsob, jak implementovat režim Retina bez velkého úsilí.
Čtěte také: Jak poskytovat obrázky WebP namísto tradičních PNG a JPG
Existují však dvě nevýhody používání SVG na WordPress. První je, že jelikož jde o vektorový formát, SVG není vhodný pro všechny obrázky. SVG tedy můžete použít pro loga a ikony, ale ne pro soubory, jako jsou fotografie (což je trochu bolestivé, pokud chcete pro svůj web použít obrázky s vysokým rozlišením). Pokud však chcete používat jednoduché ikony, animace nebo ilustrace, soubory SVG mohou být určitě volbou pro web kompatibilní s sítnicí.
Druhou nevýhodou používání SVG na WordPressu je to, že z bezpečnostních důvodů nejde o oficiálně kompatibilní formát s WordPress. Protože soubor SVG je v podstatě soubor XML, otevře se mu všechny známé chyby zabezpečení spojené s formátem souboru XML, jako je donucovací analýza, XML External Entity Attacks (XEE), XML Denial of Service Attack (XDoS) útoky atd.
Existuje však způsob, jak povolit podporu SVG pro váš web, což zajistí vaše soubory SVG.
Jak bezpečně povolit SVG na WordPress
Bezpečný SVG je plugin, který vám umožní bezpečně povolit podporu souborů SVG na vašem webu. Tento modul plug-in zajišťuje, že vaše soubory SVG budou dezinfikovány, aby se zabránilo možným zranitelnostem XML ovlivňujícím váš web.
Nepřibližujte se k pluginům, které typu MIME umožňují nahrávání z SVG do mediální knihovny WordPress, protože jsou nebezpečné a potenciálně škodlivé pro váš web. Pokud vás tedy opravdu láká používat formát SVG na WordPressu, ujistěte se, že to děláte bezpečně a nestahujete první viděný plugin SVG.
Přečtěte si náš blog a získejte více konverzí do svého blogu typy obsahu 15, které generují více návštěvníků na váš blog
Některé pluginy integrují kompatibilitu sítnice na WordPress
Existuje několik skriptů a pluginů pro kompatibilitu s Retina, které vám mohou výrazně usnadnit život při pokusu o nastavení webu kompatibilního s Retina Mode. Jak již bylo zmíněno dříve, většina dostupných doplňků a skriptů nahradí obrázky obrázky s vysokým rozlišením pouze pro displeje s vysokým rozlišením. Nepretahují se jako SVG: stále musíte vytvářet více obrázků s různým rozlišením.
1 - retina.js
retina.js je jedním z nejpoužívanějších skriptů pro poskytování obrázků ve vysokém rozlišení. Jedná se o skript s otevřeným zdrojovým kódem, který usnadňuje poskytování obrázků ve vysokém rozlišení zařízením s displeji Retina.
Skript zkontroluje každý obrázek na stránce, aby zjistil, zda je na serveru verze tohoto obrázku ve vysokém rozlišení. Pokud existuje varianta s vysokým rozlišením, skript zamění standardní rozlišení s obrázkem s vysokým rozlišením. Toto je jeden z nejběžnějších způsobů poskytování obrázků pro displeje Retina na vašem webu.
Viz též: GIF, Emojis nebo Memes: dobrý nápad pro webové stránky WordPress?
2 - Hustý
Podobné jako retina.js, hustý je plugin jQuery, který nabízí snadný způsob poskytování obrázků ve formátu s pixelovým poměrem. Skript volá metodu inicializace $ .fn.dense (), která cílí na značky „img“, které budou podle potřeby sloužit jako obrázky kompatibilní s režimem Retina.
Nahrazuje tedy všechny obrázky příslušnou verzí s vysokým rozlišením, stejně jako skript retina.js.
3 - WP Retina 2x
Ten druhý lze přirovnat k kouzelnému generátoru obrazu sítnice.
WP Retina 2x je plugin, který vytváří obrazové soubory vyžadované zařízeními s vysokým DPI a podle toho je zobrazuje vašim návštěvníkům. Na rozdíl od předchozích dvou skriptů generuje obrázky s odlišným rozlišením od počátečního obrazu. Pokud tedy nejste příliš spokojeni s ručním vytvářením různých obrázků s různým rozlišením, je tato možnost pro vás.
To je vše pro tento tutoriál, doufám, že vám to umožní převést vaše obrázky na obraz Retina Ready.
Objevte také některé prémiové doplňky WordPress
Můžete použít jiné WordPress pluginy poskytnout moderní vzhled a optimalizovat práci s vaším blogem nebo webem.
Nabízíme vám zde prémiové doplňky WordPress, které vám to pomohou.
1. Fancy WordPress Autor Seznam
Jak název napovídá, plugin Efektní seznam autorů WordPress zobrazí seznam autorů vašeho webu v widgetu. Má jednoduché uživatelské rozhraní, které to umožňuje zobrazit informace libovolného autora v postranním panelu. Jediné, co musíte udělat, je přetáhnout autorskou pomůcku na postranní panel a plugin provede práci.
Mezi jeho hlavní rysy patří mimo jiné: možnost pro zobrazení autorů blogů zábavným způsobem přilákat nové návštěvníky, schopnost zobrazit seznam autorů v postranním panelu nebo na stránce, schopnost zahájit soutěž mezi autory vašeho blogu, citlivým rozvržením, podporou krátkých kódů a mnohem více.
Stáhnout | Demo | Web hosting
2. Snadný obsah
Ce WordPress Plugin uživatelsky přívětivý umožňuje vložit obsah do vašich příspěvků, stránek a vlastních typů příspěvků. Má mnoho funkcí, z nichž hlavní jsou:
automatická správa obsahu, podpora značky , Podpora pluginu Rankin Math, kompatibilita s několika editory stránek, jako je Gutenberg, divi, Elementor, WPBakery Page Builder a další, možnost výběru, na kterých stránkách si ji chcete nechat zobrazit, automatické vložení obsahu na určité stránky a mnoho dalších.
Jedná se o WordPress Plugin freeware, který má vše, co potřebujete k zobrazení obsahu, takže si jej můžete vybrat jako svou první volbu.
Stáhnout | Demo | Web hosting
3. WooCommerce Rozšířené hromadné úpravy
Upravujete pravidelně svůj produktový katalog? Ať už máte 100 produktů nebo 10.000 XNUMX, tohle WordPress Plugin premium je podle mého skromného názoru „Musím mít“: (To je první slovo, které mě napadne).
Jen za pár dolarů, plugin WooCommerce Rozšířené hromadné úpravy vám usnadní život a ušetří vám monstrózní čas. Není pochyb o tom, že je to bomba.
Stáhnout | Demo | Web hosting
Doporučené zdroje
Zjistěte další doporučené zdroje, které vám pomohou vytvořit a spravovat váš web.
- 5 zdroje návštěvnosti asi víte
- Případová studie: Content marketing, jak se učit z chyb
- Proč nezávislí lidé potřebují denní rozvrh
- 7 aspekty, které vám umožní vytvořit úspěšný blog
Proč investovat do čističky vzduchu?
Tady ! To je pro tento tutoriál vše, doufám, že vám umožní vytvářet obrázky připravené pro Retina pro váš web. Neváhej sdílet se svými přáteli na svých oblíbených sociálních sítích.
Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek, nahlédněte do našeho průvodce Vytvoření blogu WordPress.
Pokud máte návrhy nebo připomínky, nechte je v naší sekci commentaires.
...
