Come posso ottenere un url di immagini

In qualità di consulente tecnico, la creazione di software per marchi globali spesso comporta la gestione e la gestione di una tonnellata di risorse digitali.

Di recente ho lavorato con un importante marchio di benessere con oltre 90 pagine e centinaia di immagini in tutto il loro sito. Fortunatamente, abbiamo utilizzato la gestione delle risorse digitali (DAM) AEM per gestire tutte le loro risorse digitali. La cosa interessante è che a ogni immagine è stato assegnato il proprio URL: questo ha reso facile per gli editor di contenuti trovare e condividere le immagini e abbiamo potuto riutilizzarle facilmente senza duplicarle nel DAM.

Il vero salvavita qui è stata la funzione URL all'immagine, che può far risparmiare tempo, spazio e fatica. Ha anche aumentato enormemente l'efficienza del nostro progetto.

Oggi ti guiderò attraverso due processi che dovresti conoscere per le tue attività relative all'URL e alle immagini: come ottenere un URL per un'immagine che hai sul tuo sito e come aggiungere un URL a un'immagine in modo che reindirizzi a una pagina quando si fa clic su di essa.

Sommario

Perché dovresti imparare come ottenere un URL per un'immagine?

Ottima domanda e ci sono un paio di motivi per cui imparare a ottenere un URL per un'immagine è una buona idea. Ti guiderò attraverso di loro ora.

È un modo semplice per condividere un'immagine.

Se stai inviando un'immagine e vuoi assicurarti che sia accessibile a tutti, puoi prendere in considerazione l'idea di caricarla sul tuo sistema di gestione dei contenuti (CMS) e ottenere un URL per l'immagine. In questo modo, puoi essere certo che tutti coloro con cui vuoi condividere l'immagine possono visualizzarla. (Purché riescano a connettersi a Internet, ovviamente.)

È diretto.

Un altro motivo per cui mi piace avere un URL per un'immagine è perché è diretto. Quando qualcuno segue il link, può accedere a quell'immagine e solo a quell'immagine. Non punta al sito web, ma semplicemente l'immagine stessa.

Come ottenere un URL di un'immagine

Di seguito è riportato il processo passo passo che utilizzo per ottenere un URL di immagine. Sono solo un paio di passaggi e so che lo imparerai rapidamente.

Passaggio 1: apri l'immagine per la quale voglio ottenere un URL.

Fonte immagine

Per questo esempio, otterrò un URL per questa immagine di un cavalier king charles spaniel dal sito Web AKC. Tieni presente che questo non è il mio sito web, ma puoi seguire la stessa procedura per il tuo sito web.

Passaggio 2: fai clic con il pulsante destro del mouse sull'immagine in modo che si appaia un menu.

Dovrebbe assomigliare a questo:

Passaggio 3: individua l'opzione "Copia indirizzo immagine".

Successivamente, seleziono l'opzione "copia indirizzo immagine" e faccio clic su di essa.

Passaggio 4: incolla l'indirizzo che ho copiato nella mia barra di ricerca.

Con il pulsante indirizzo dell'immagine copiato, lo incollo nella mia barra di ricerca. Questo è ciò che vedo. Clicco su Invio per andare alla pagina.

Dopo aver fatto clic su invio, il mio browser mostra la seguente immagine:

Ora posso inviare l'URL dell'immagine a chiunque, e loro verranno indirizzati all'immagine, non alla pagina in cui l'ho trovata.

Questo è tutto! Ora che ti ho mostrato come ottenere un URL per un'immagine, è il momento di mostrarti come aggiungere un URL a un'immagine stessa. (In altre parole, come assicurarsi che venga visualizzato un URL quando i visitatori fanno clic su un'immagine.)

Perché dovresti imparare ad aggiungere un URL a un'immagine?

Ci sono due motivi principali per cui vale la pena imparare ad aggiungere un link a un'immagine: ti consente di catturare l'attenzione dei tuoi utenti e ti consente di lanciare una rete più ampia su cui gli utenti possono fare clic o toccare. Permettetemi di spiegare.

Motivo 1: Attira più attenzione.

Pensala in questo modo: Preferiresti leggere lunghi pezzi di testo senza immagini o goderti la grafica intervallata? Io preferisco quest'ultimo, e non sono solo. Gli esseri umani possono elaborare le immagini in soli 13 millisecondi, che è 60.000 volte più veloce del testo, secondo BRG Communications.

Inoltre, il 65% delle persone apprende visivamente, il che dimostra ancora una volta la necessità di utilizzare le immagini. Immagina una notizia senza un'immagine di presentazione o un'inserzione di prodotto senza una foto dell'articolo. Uno dei miei professori di giornalismo al college diceva alla mia classe che non importava quanto fosse bella la storia: se non c'era un'immagine, nessuno l'avrebbe letta. Le descrizioni da sole non sono sufficienti; Le immagini aiutano a spingere le persone ad agire.

Ciò non significa che la copia sia irrilevante, tuttavia. I motori di ricerca eseguono costantemente la scansione del tuo sito Web per dare un senso ai tuoi contenuti e determinare come, o se, possono condividerli con gli utenti. E perché le immagini sono Tradizionalmente più difficile da analizzare per i motori di ricerca, dovresti rendere le cose più facili per loro aggiungendo meta descrizioni basate su testo. Inoltre, per aderire alle migliori pratiche di accessibilità dei siti web, è necessario il testo alternativo.

Cosa significa questo per il tuo sito web? Dovresti utilizzare il testo e le immagini in modo efficace per costringere i tuoi utenti a convertire o tornare sul tuo sito web.

Motivo 2: crea aree cliccabili più grandi.

L'aggiunta di un link cliccabile a un sito web è un'ottima idea perché aiuta a semplificare l'interazione con i clienti. Ti è mai capitato di arrivare su una pagina del sito web con più prodotti contenenti un link di testo sotto l'immagine? In tal caso, sai che il testo del link occupa molto meno spazio rispetto all'immagine. Se hai solo un link accessibile con il testo, stai creando attrito e frustrazione per gli utenti.

Ecco un esempio di cosa fare invece. Il marchio di trucco pulito Tower 28 ti consente di accedere la pagina individuale del prodotto facendo clic sul nome del prodotto o sull'immagine stessa. Ciò riduce l'attrito e rende l'esperienza utente più fluida.

Fonte immagine

Quando sfrutti i collegamenti alle immagini, ti assicuri che i tuoi utenti siano in grado di accedere a informazioni cruciali tramite il testo e l'immagine ad esso associata. Ciò riduce la probabilità che i tuoi visitatori si sentano frustrati e alla fine abbandonino il tuo sito web.

Come aggiungere un link a un'immagine

La prima cosa che dovresti tenere a mente su questo processo è che varierà leggermente a seconda del sistema di gestione dei contenuti (CMS) che stai utilizzando.

Per il bene di questo tutorial, ti guiderò attraverso come aggiungo i link alle mie immagini utilizzando il CMS nel Content Hub di HubSpot (che consiglio vivamente, soprattutto se stai cercando di creare un sito web).

Come aggiungere un collegamento a un'immagine in Content Hub a un Web Sono

sempre entusiasta di utilizzare le numerose funzionalità di Content Hub per creare il mio sito web. L'aggiunta di un link a un'immagine è una delle funzionalità che Content Hub è riuscito a semplificare. Ecco come lo faccio.

1. Apro Content Hub, accedo all'icona Contenuti e faccio clic su Pagine del sito web.

Navigo sulle pagine del mio blog o del mio sito web, a seconda di dove voglio aggiungere l'immagine. Ci sono due processi che voglio guidarti: aggiungere un'immagine a una pagina del sito Web e quindi a un post del blog.

2. Vado alla scheda "Aggiungi" sul lato sinistro dello schermo.

Clicco sul segno +.

Una volta lì, cerco Immagine nella barra di ricerca. Esistono diversi tipi di moduli immagine che vengono visualizzati. Per questo tutorial, aggiungerò un'immagine tradizionale.

3. Trascino il modulo che voglio aggiungere nella sua posizione corretta sul mio sito web.

Questo è Come appare da parte mia:

4. Sostituisco l'immagine segnaposto, aggiungo il testo alternativo e regolo altre impostazioni dell'aspetto.

Ho trovato tutte queste opzioni nella stessa scheda scorrendo verso il basso.

5. Scorri fino in fondo per aggiungere l'URL.

Ora che ho regolato l'aspetto che voglio che appaia l'immagine, posso aggiungere un URL.

Ho anche la possibilità di aprire o meno l'immagine in una nuova scheda. Qui a HubSpot, ci piace farlo in modo che il visitatore non perda il suo posto nella pagina corrente quando fa clic su un link. Consiglierei di selezionare questa casella, ma alla fine è una tua decisione. Questo dovrebbe aggiornarsi automaticamente, ma a questo punto salvo sempre la mia pagina manualmente come precauzione di sicurezza.

Come aggiungere un link a un'immagine in Content Hub a un post del blog

Che ne dici di aggiungere un link alla tua immagine con Content Hub in un post del blog? Non preoccuparti, ti mostrerò come faccio Anche quello.

1. Apro l'hub dei contenuti, vado all'icona dei contenuti e faccio clic su Blog.

Quindi, vado al mio post sul blog per aggiungere l'immagine.

2. Posso scegliere di creare un nuovo post o accedere al post a cui voglio aggiungere l'immagine.

Posso accedere al pulsante Crea nell'angolo in alto a destra dello schermo, come mostrato. Se disponi di più blog, ti verrà chiesto di selezionare il blog che desideri ospitare dopo aver fatto clic su Crea.

Oppure, posso scegliere un blog che ho creato in precedenza. Per questo tutorial, userò il mio blog Pizzeria - Chi sono.

3. Clicco all'interno del post del blog in cui voglio aggiungere l'immagine per accedere alla barra degli strumenti. Quindi, faccio clic sull'icona Inserisci immagine per accedere al riquadro di modifica dell'immagine.

Vado all'icona Inserisci immagine, come evidenziato e fare clic.

4. Carica o seleziona una foto recente.

Quindi clicco sulla grafica che voglio inserire e la inserisco nel mio post sul blog. Nell'hub di contenuti, l'icona ha l'aspetto di una piccola matita.

5. Una volta che l'immagine è nel mio post, faccio clic su Modifica immagine.

6. Scegli il punto in cui voglio che l'immagine si colleghi.

Per questo esempio, sceglierò un URL. Ma è bene sapere che ci sono altre opzioni se voglio provare qualcosa di nuovo.

7. Inserisci l'URL.

Inserisco il mio URL nella barra che dice URL. Ho anche deciso di aprire il link in una nuova finestra, cosa che, ancora una volta, ti consiglio vivamente di fare lo stesso. Infine, posso visualizzare in anteprima il link per assicurarmi che sia quello che desidero. Una volta terminato, clicco su Applica per salvare.

E il gioco è fatto! Ti ho mostrato con successo come ho aggiunto un URL a un in un post del blog.

Come aggiungere un link a un'immagine utilizzando il sito di hosting di immagini Imgur

Supponiamo che tu abbia un sacco di immagini e desideri gestire la condivisione delle tue immagini con link da una posizione centrale. È qui che un sito di hosting di immagini come Imgur torna utile.

Puoi utilizzare i link generati per incorporare le tue immagini anche su più siti social. Lascia che ti mostri come.

1. Accedi e vai al pulsante Nuovo post.

Clicco sul pulsante + per accedere alla pagina di caricamento dell'immagine.

2. Qui posso caricare una nuova immagine o incollare l'URL di un'immagine.

Ho caricato l'immagine di Hubspot nella mia libreria Imgur e

da qui ho aggiunto un titolo e una descrizione che aiutano a migliorare la visibilità all'interno dei risultati di ricerca.

3. Genera il link alla mia immagine.

Clicco su Afferra Link per generare il link alla mia immagine.

Ora posso vedere l'URL dell'immagine e l'opzione per condividere l'immagine su diversi siti social.

Ed ecco fatto, ho generato il link in meno di cinque minuti. È così semplice.

Come trasformare un'immagine in un collegamento utilizzando HTML

Phew, sono stati molti passaggi! Ora, ti starai chiedendo come questi due processi si collegano, ed è finalmente il momento per me di mostrartelo.

Nel prossimo tutorial, dimostrerò come ottenere un link per la tua immagine utilizzando HTML e come aggiungere un URL a cui reindirizzare.

Se sei uno studente visivo, questo video tutorial ti aiuterà:

https://www.youtube.com/watch?v=k0-9X8uQ7cM&t=5s

Oppure, se desideri indicazioni passo dopo passo, segui mentre ti guido attraverso queste istruzioni.

Passaggio 1: seleziona la tua immagine.

Primo, Trovo l'immagine che ho Vuoi collegarti a. Se si tratta di un'immagine di un prodotto sul tuo sito web, è probabile che tu abbia già diverse immagini. Consiglio di utilizzare quello che meglio mette in mostra il prodotto. Se non hai una foto, scatta e carica una foto di alta qualità o utilizza un'immagine web esistente.

Suggerimento: quando si tratta di riutilizzare immagini già presenti sul web, tuttavia, mi assicuro di pagare per i diritti d'immagine o di utilizzare un'immagine stock senza licenza. Altrimenti, posso finire nei guai per aver rubato l'immagine di qualcuno. Ti consiglio di tenere a mente anche questo.

Di seguito è riportato un esempio di un'immagine che mostra il volano HubSpot. Ho intenzione di trasformarlo in un link a una pagina di destinazione sul sito web di HubSpot.

Passaggio 2: ottimizza le dimensioni e la scala.

Prima di caricare la mia foto sul mio server di web hosting, ne ottimizzo sempre le dimensioni e la scala. Ti consiglio di fare lo stesso. Le dimensioni dei file immagine più grandi rallenteranno tempi di download e potrebbe non essere scalato correttamente. Inizia osservando le dimensioni di tutte le immagini esistenti sul tuo sito per informare le linee guida sulle dimensioni delle immagini. Quindi, comprimi l'immagine se necessario.

Ad esempio, il mio team di HubSpot ama usare Squoosh, uno strumento di compressione gratuito di Google. Dopo aver caricato la mia immagine, posso regolare la qualità in base alla dimensione finale del file e scegliere il formato di output. In generale, il formato JPEG è il migliore per le immagini con molti dettagli (come le fotografie), mentre i PNG sono più adatti per icone, immagini di testo e grafica. In HubSpot, potresti aver notato che utilizziamo il formato WebP.

Posso anche confrontare direttamente la qualità della tua immagine non compressa con la qualità della mia immagine compressa utilizzando Squoosh.

Come puoi vedere dall'esempio sopra, la mia foto compressa potrebbe non essere così nitida, ma questo non sarà evidente ai visitatori se il link dell'immagine è abbastanza piccolo sullo schermo. Inoltre, penso che i visitatori Preoccupa più del tempo di caricamento che del fatto che l'immagine sia il più nitida possibile.

Alla fine, sei tu a decidere quanto comprimere la tua immagine, ma mantenere la qualità al di sopra del 70% in genere eviterà una pixelizzazione significativa.

Passaggio 3: carica la mia immagine e ottieni l'URL.

Successivamente, carico la mia immagine sul mio server web. Questo può avvenire attraverso il tuo costruttore di siti Web o un sistema di gestione dei contenuti, come Content Hub, o tramite un sito di hosting di immagini gratuito come ImgBB.

Indipendentemente da come è ospitata la tua immagine, deve essere caricata sul Web in modo da poter creare l'URL della sua posizione, il luogo in cui il tuo codice HTML "cercherà" la tua immagine per visualizzarla.

Prendiamo ad esempio l'immagine del volano sopra. Questo è stato caricato sul server HubSpot e incorporato in una pagina di destinazione. Supponiamo che io voglia incorporarlo come link cliccabile in un post di un blog esterno. In questo modo, i lettori che cliccano sull'immagine saranno indirizzati a HubSpot sito web. In tal caso, posso andare a quella pagina di destinazione, fare clic con il pulsante destro del mouse sull'immagine e selezionare Copia indirizzo immagine .

Questo è l'indirizzo dell'immagine o l'URL della posizione: https://www.hubspot.com/hs-fs/hubfs/HubSpot-English-Flywheel-Jul-27-2020-04-17-18-68-PM.png?width=1360&name=HubSpot-English-Flywheel-Jul-27-2020-04-17-18-68-PM.png

lo userò più avanti nel mio HTML.

Passaggio 4: specifica l'URL di destinazione.

Successivamente, determino un URL di destinazione, che specifica dove il mio link indirizzerà gli utenti quando fanno clic sulla mia immagine, ad esempio un prodotto specifico o una pagina di pagamento sul tuo sito web.

Come discusso in precedenza, renderò l'URL di destinazione https://www.hubspot.com/flywheel.

Passaggio 5: crea il tuo HTML.

Ora è il momento di creare il mio codice HTML. Ecco il modello di base:

Analizziamo questo concetto:

i tag <a> e </a> rappresentano un collegamento.
L'elemento anchor (<a>) contiene un attributo href. Sostituisci "ProductPageURL" con l'URL della pagina a cui voglio che le persone vengano indirizzate quando fanno clic sull'immagine.
Il tag <img> rappresenta un'immagine.
L'elemento image <img> contiene un attributo source. Ho sostituito "ImageURL" con l'URL della mia immagine.
Contiene anche un attributo alt. Sostituisco il testo segnaposto con il testo effettivo che descrive l'immagine.

È importante compilare la descrizione del testo alternativo, che può essere letta dagli screen reader utilizzati da persone con disabilità visive e verrà visualizzata anche se l'immagine non può essere caricata. Il testo alternativo dell'immagine può anche migliorare la SEO del sito. Di conseguenza, un testo alternativo semplice e accurato è una parte fondamentale dei collegamenti alle immagini HTML.

Ecco come funziona il codice HTML Il frammento per l'immagine del volano HubSpot potrebbe apparire:

Passaggio 6: incolla il codice secondo necessità.

Con il mio codice HTML personalizzato, ora posso incollare la mia immagine collegata su qualsiasi pagina a cui ho accesso come amministratore e che supporta l'HTML.

Se hai seguito correttamente i passaggi, il risultato dovrebbe essere un'immagine cliccabile che porta gli utenti a un URL di destinazione.

Ad esempio, ecco l'immagine del volano di HubSpot trasformata in un link in CodePen:

Vedi la penna Trasformare un'immagine in un link di HubSpot (@hubspot) su CodePen.

Nota: facendo clic sull'immagine nel modulo CodePen verrà visualizzato un messaggio di errore perché non può Carica un'intera pagina web nel modulo. Ma se passi il mouse sopra l'immagine, vedrai apparire l'URL nell'angolo in basso a sinistra dello schermo. Puoi anche fare clic con il pulsante destro del mouse sull'immagine e selezionare Apri collegamento in una nuova scheda . La pagina di destinazione di HubSpot Flywheel si aprirà correttamente nella nuova scheda.

Le migliori pratiche per il collegamento delle immagini

Gli esseri umani generalmente preferiscono il percorso di minor resistenza. È per questo che vogliamo Internet più veloce e perché gli algoritmi dei contenuti sono progettati per darci i contenuti che vogliamo quando li vogliamo.

Queste aspettative di basso sforzo si applicano anche ai siti web. I siti esteticamente gradevoli, facili da navigare e comprensibili hanno maggiori probabilità di catturare l'attenzione dei visitatori e convertire.

Ecco perché ti consiglio queste cinque best practice per collegare la grafica sul tuo sito web.

Semplice è meglio.

Link e immagini dovrebbero essere collegati in modo logico: L'immagine dovrebbe indicare agli utenti dove li porterà il link prima di fare clic.

Ad esempio, se la tua immagine è l'immagine di un capo di abbigliamento specifico, ma il link porta gli utenti alla categoria generale, ciò comporterà frustrazione. Invece, prendi in considerazione l'utilizzo di un'immagine contenente diversi capi di abbigliamento per indicare un collegamento a una pagina di categoria. Ecco un esempio.

Fonte immagine

Qui, la regola per i link come immagini è semplice: ciò che vedi è ciò che ottieni

. Offri un link di backup. I

classici collegamenti ipertestuali di testo sembrano un po' obsoleti oggi, grazie al loro sgargiante colore blu e alla sottolineatura.

Ma c'è un problema. Nonostante i miglioramenti sostanziali nell'HTML e in altri linguaggi di markup che rendono possibili collegamenti più sottili, molti utenti sono condizionati a riconoscere il tradizionale formato di collegamento blu.

Di conseguenza, vale la pena offrire un backup familiare e basato su testo per qualsiasi immagine Link che gli utenti capiranno immediatamente.

Non esagerare. L'aggiunta

di troppi link a una pagina significherà un disastro, e questo vale il doppio per le immagini. Non tutte le immagini hanno bisogno di un proprio link, perché non tutti i contenuti del tuo sito devono rimandare ad altre pagine o risorse.

Ad esempio, nel post del blog qui sotto, l'immagine non è collegata perché l'intestazione è collegata alla pagina in cui è presente l'immagine.

Fonte immagine

Dai la priorità allo scopo quando decidi cosa vuoi collegare. Prima di trasformare qualsiasi immagine in un link, poniti una semplice domanda: perché? Se non c'è un motivo convincente, non apportare la modifica.

Se

non controlli regolarmente i tuoi link, rischi di frustrare i clienti se si imbattono in informazioni obsolete. Ad esempio, se le linee di prodotti o i prezzi cambiano, i vecchi link potrebbero non essere più data, indirizzando gli utenti a pagine che non sono più rilevanti o restituendo errori 404.

Questo vale per tutti i link alle tue pagine, non solo per i link alle immagini o ai link di testo. La revisione regolare aiuta a garantire che i link siano sempre attivi e applicabili.

Apri una nuova scheda.

Questa è più una preferenza personale o organizzativa, ma ti consiglio vivamente di configurarla in modo che si apra una nuova scheda quando un utente fa clic su un'immagine come link. Questo aiuta a garantire che tornino alla pagina in cui si trovano, il che mantiene bassa la frequenza di rimbalzo del tuo sito web. Inoltre, riduce la frustrazione che gli utenti provano quando vogliono continuare a leggere la prima pagina e non riescono a trovarla di nuovo.

Sfrutta al massimo i link sul tuo sito

L'aggiunta di un URL alle mie immagini è stato un modo essenziale per arricchire l'esperienza utente dei miei visitatori. Posso migliorare la navigazione sul mio sito web aggiungendo un URL che indirizza l'utente a un luogo, che a sua volta può aiutare ad aumentare i tassi di conversione. Allo stesso tempo, sto anche aiutando la mia SEO dando all'immagine più contesto attraverso un URL. È un gioco da ragazzi che dare un link alla mia immagine è sicuramente un vantaggio per i miei siti.

A mio parere, l'approccio più vantaggioso è stato l'utilizzo di Content Hub. Gestendo le mie immagini e i link (per il mio blog e/o sito web) in un unico posto, in pratica ottengo un tre a uno. Anche se ti consiglio di provare Content Hub, in definitiva, l'approccio migliore dipende dalle esigenze del tuo sito. Ora che sei ufficialmente un esperto in tutto ciò che riguarda le immagini e gli URL, provalo.

Nota dell'editore: questo post è stato originariamente pubblicato nel dicembre 2020 ed è stato aggiornato per completezza.