Vai al contenuto principale

Come creare immagini pronte per la retina per il tuo sito Web

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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?

Schermo Retina pronto

Imparare a creare un sito Web compatibile con i display Retina è una risorsa importante per qualsiasi sviluppatore web. Sfortunatamente, non esiste un'unica soluzione 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 WordPressQuanti 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

Retina vectorvsraster

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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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 utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa 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.

Un fantastico plugin per wordpress con elenco di autori di wordpress

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 | DemoWeb hosting

2. Sommario semplice

Questo plug-in WordPress intuitivo ti consente di inserire un sommario nelle tue pubblicazioni, pagine e tipi di pubblicazioni personalizzate. Ha molte caratteristiche, le principali sono:Facile tabella dei contenuti wordpress plugin tabella matieres

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.

È un plugin WordPress gratuito che ha tutto ciò di cui hai bisogno per visualizzare il tuo sommario, quindi sentiti libero di sceglierlo come prima scelta.

Download | DemoWeb hosting

3. Modifica collettiva avanzata WooCommerce

Pubblica regolarmente il tuo catalogo prodotti? Che tu abbia 100 prodotti o 10.000, questo plugin WordPress premium è "A must have" di IMHO: (Questa è la prima parola che mi viene in mente).Woocommerce plugin wordpress per la modifica in blocco avanzata

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

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

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.

... 

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
7 azioni
quota6
Tweet
Enregistrer1