Viviamo in un mondo ad alta definizione. E poiché la maggior parte di noi trascorre più di otto ore al giorno guardando diversi tipi di schermi, la qualità delle immagini e i personaggi contenuti in queste schermate sono molto importanti.
Sebbene siano disponibili solo da pochi anni, i display Retina sono la via del futuro. L'elevata densità di pixel nei display Retina rende le immagini chiare e nitide. E chi non ama le immagini belle e nitide?
Imparare a creare un sito Web la compatibilità con gli schermi Retina è una risorsa importante per qualsiasi sviluppatore web. Sfortunatamente, non esiste una soluzione ideale e perfetta per rendere il tuo sito Web user-friendly con i display Retina-Ready.
Quindi, mentre aspettiamo che qualcuno trovi la soluzione più completa, abbiamo esaminato alcune delle migliori opzioni possibili per preparare il tuo sito web. In questo modo, non sarai portato fuori strada quando arriverà il momento in cui tutti i dispositivi hanno Retina che si presenta in una forma o nell'altra.
Ma prima di iniziare, prenditi il tempo per dare un'occhiata Come installare un tema WordPress, Quanti plugin dovrei installare su WordPress.
Allora mettiamoci al lavoro!
Creazione di più file di immagine
Cominciamo con le basi. Il modo più semplice per ottenere il supporto della modalità Retina per il tuo sito web è creare più variazioni di immagine in diverse risoluzioni. Ciò significa che per ogni tipo di risoluzione (ad esempio 1x), è necessario creare una versione ad alta risoluzione di quella clip (ad esempio 2x).
Fondamentalmente puoi creare più versioni dello stesso file e utilizzare un plug-in come WP Retina 2x o uno script come retina.js per generare automaticamente le versioni "@ 2x" di ogni dimensione immagine o trovare immagini "@ 2x" e visualizzare il dimensione corrispondente a ciascun dispositivo.
È vero che la creazione di più versioni della stessa immagine può essere un processo che richiede tempo. Sfortunatamente, non esiste un metodo rapido che generi automaticamente queste immagini per te. Però, ci sono diversi plugin di Photoshop che ti consentono di riparare rapidamente le tue immagini.
Plugin come " Rimettire Che è una serie di azioni di Photoshop che ti consentono di ottimizzare facilmente i tuoi progetti per i display Retina. Se stai usando una versione precedente di Photoshop (pre-CC) puoi usare qualcosa come " Quattro Che fondamentalmente fa tutto ciò che fa l'attuale strumento Photoshop Generator, ma per le versioni precedenti di Photoshop.
Grafica vettoriale scalabile (SVG)
Il modo più semplice per andare avanti con la modalità Retina è utilizzare Scalable Vector Graphics (SVG) sul tuo sito web. SVG è un formato di immagine vettoriale basato su XML. Come suggerisce il nome, un'immagine SVG è scalabile, il che significa che le immagini possono essere allungate quanto più (o meno) quanto necessario, pur essendo nitide e chiare. Può essere un modo semplice e veloce per implementare la modalità Retina senza troppi sforzi.
Leggi anche: Come fornire immagini WebP invece dei tradizionali PNG e JPG
Tuttavia, ci sono due aspetti negativi nell'usare SVG su WordPress. Il primo è che, poiché è un formato vettoriale, SVG non è adatto a tutte le immagini. Quindi puoi usare SVG per loghi e icone, ma non per file come le foto (che è un po 'doloroso se ti piace usare immagini ad alta risoluzione per il tuo sito web). Ma se si desidera utilizzare icone, animazioni o illustrazioni semplici, i file SVG possono certamente essere un'opzione per un sito Web compatibile con Retina.
Il secondo aspetto negativo dell'utilizzo di SVG su WordPress è che non è un formato ufficialmente compatibile con WordPress a causa di problemi di sicurezza. Poiché un file SVG è essenzialmente un file XML, questo lo apre in tutte le vulnerabilità note associate al formato di file XML, come analisi coercitive, attacchi XEE (XML External Entity Attack), attacchi XDoS (XML Denial of Service), ecc.
Tuttavia, esiste un modo per abilitare il supporto SVG per il tuo sito Web che renderà i tuoi file SVG sicuri.
Come abilitare SVG in modo sicuro su WordPress
SVG sicuro è un plugin che ti consente di abilitare in modo sicuro il supporto dei file SVG sul tuo sito web. Questo plugin garantisce che i tuoi file SVG siano disinfettati per prevenire potenziali vulnerabilità XML che interessano il tuo sito web.
Stai lontano dai plugin che consentono al tipo MIME di consentire il caricamento da SVG alla libreria multimediale di WordPress in quanto sono pericolosi e potenzialmente dannosi per il tuo sito web. Quindi, se sei davvero tentato di utilizzare il formato SVG su WordPress, assicurati di farlo in modo sicuro e non scaricare il primo plug-in SVG che vedi.
Indirizza più conversioni sul tuo blog leggendo il nostro tipi di contenuto 15 che generano più visitatori al tuo blog
Alcuni plugin per integrare la compatibilità Retina su WordPress
Esistono diversi script e plug-in per la compatibilità Retina che possono semplificarti la vita quando cerchi di configurare un sito Web compatibile con la modalità Retina. Tuttavia, come accennato in precedenza, la maggior parte dei plug-in e degli script disponibili sostituisce le immagini con immagini ad alta risoluzione solo per schermi ad alta risoluzione. Non si allungano come un SVG: è comunque necessario creare più immagini di diverse risoluzioni.
1 - retina.js
retina.js è uno degli script più utilizzati per fornire immagini ad alta risoluzione. Si tratta di uno script open source che semplifica la pubblicazione di immagini ad alta risoluzione su dispositivi con display Retina.
Lo script controlla ogni immagine sulla pagina per vedere se è presente una versione ad alta risoluzione di quell'immagine sul server. Se esiste una variante ad alta risoluzione, lo script scambia la risoluzione standard con l'immagine ad alta risoluzione. Questo è uno dei modi più comuni per offrire immagini per i display Retina sul tuo sito web.
Vedi anche: GIF, Emoji o Memes: una buona idea per i siti Web WordPress?
2 - Denso
Simile a retina.js, Denso è un plugin jQuery che offre un modo semplice per servire immagini in formato pixel-ratio. Lo script chiama il metodo $ .fn.dense () di inizializzazione, che prende di mira i tag "img" che fungeranno da immagini compatibili con la modalità Retina, se necessario.
Quindi, sostituisce tutte le immagini con la rispettiva versione ad alta risoluzione, proprio come lo script retina.js.
3 - WP Retina 2x
Quest'ultimo può essere paragonato a un magico generatore di immagini Retina.
WP Retina 2x è un plugin che crea file immagine richiesti dai dispositivi High-DPI e li mostra ai tuoi visitatori di conseguenza. A differenza dei due script precedenti, genera immagini a risoluzione diversa da un'immagine iniziale. Quindi, se non sei troppo soddisfatto della creazione manuale di immagini diverse con risoluzioni diverse, questa opzione è per te.
Questo è tutto per questo tutorial, spero che ti permetterà di convertire le tue immagini in immagini Retina Ready.
Scopri anche alcuni plugin WordPress premium
Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.
Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.
1. Una lista di autori di WordPress fantasiosi
Come suggerisce il nome, il plugin Elenco di fantasiosi autori di WordPress visualizza l'elenco degli autori per il tuo sito Web in un widget. Ha una semplice interfaccia utente che consente visualizzare le informazioni di qualsiasi autore nella barra laterale. Tutto quello che devi fare è trascinare il widget dell'autore sulla barra laterale e il plugin farà il lavoro.
Le sue caratteristiche principali sono tra le altre: la possibilità per visualizzare gli autori del blog in modo divertente per attirare nuovi visitatori, la possibilità di visualizzare un elenco di autori nella barra laterale o sulla pagina, la possibilità di iniziare una competizione tra gli autori del tuo blog, un layout reattivo, supporto per codici brevi e molto altro.
Scarica | Demo | Web hosting
2. Sommario semplice
Ce WordPress Plugin user-friendly ti consente di inserire un sommario nei tuoi post, pagine e tipi di post personalizzati. Ha molte caratteristiche, le principali sono:
gestione automatica di un sommario, supporto per il tag , Supporto plugin Rankin Math, compatibilità con diversi editor di pagine come Gutenberg, Divi, Elementor, WPBakery Page Builder e altri ancora, la possibilità di scegliere su quali pagine visualizzare le proprie pubblicazioni, l'inserimento automatico del sommario su certe pagine e molte altre.
Questo è un WordPress Plugin freeware che ha tutto ciò di cui hai bisogno per visualizzare il tuo sommario, quindi sentiti libero di sceglierlo come prima scelta.
Download | Demo | Web hosting
3. Modifica collettiva avanzata WooCommerce
Modifichi regolarmente il tuo catalogo prodotti? Che tu abbia 100 prodotti o 10.000, questo WordPress Plugin premium è a mio modesto parere “Un must have”: (è la prima parola che mi viene in mente).
Solo per pochi dollari, il plugin WooCommerce Modifica in blocco avanzata renderà la vita più facile e ti farà risparmiare tempo mostruoso. Non c'è esitazione, è una bomba.
Download | Demo | Web hosting
Risorse raccomandate
Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.
- fonti di traffico 5 probabilmente sapete
- Case Study: contenuti di marketing, come imparare dagli errori
- Perché i liberi professionisti hanno bisogno di un programma giornaliero
- 7 aspetti che vi aiuterà a creare un blog di successo
Conclusione
Ecco ! Questo è tutto per questo tutorial, spero che ti permetta di creare immagini Retina-Ready per il tuo sito web. Non esitare a condividi con i tuoi amici sui tuoi social network preferiti.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.
Se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires.
...
