Come Modificare o Ridimensionare le immagini per il tuo sito

Se scatti una fotografia con il cellulare o con la macchina fotografica ottieni belle immagini in funzione della qualita’ del sensore. Usualmente la “grandezza” delle immagini e’ adeguata per poterle stampare, ingrandire o fare elaborazioni grafiche. E questa e’ un ottima cosa.

Se hai un sito internet ti sarai accorto sicuramente che se carichi sul sito le immagini in jpg, cosi’ come le hai scattate le pagine sono lente e ci impiega tanto tempo a caricarsi.

E’ naturale, il sito deve essere veloce (a proposito lo sai che un sito veloce ti aiuta anche a migliorare il tuo posizionamento su google? ) particolarmente per i clienti che usano gli smartphones.

Ricapitolando:

  • Se carichi immagini leggere: il tuo sito è piu’ veloce
  • Se carichi immagini pesanti (cosi come le hai scattate): il tuo sito e’ pesante

Per ottimizzare le immagini ci sono diversi passaggi e sopratutto una conoscenza approfondita di photoshop e di come il file immagine “e’ costruito” nel suo interno, pero’ in questo articolo ti voglio dare un consiglio molto operativo senza farti perdere in passaggi tra photoshop e tools vari, perchè tutto sommato ti interessa semplificarti la vita ed aggiornare velocemente il tuo sito.

Ok, vediamo come fare a ridimensionare le tue immagini ad alta qualita’ per poterle utilizzare sul tuo sito (o anche sui social se vuoi) vediamo quali strumenti puoi utilizzare:

Quali misure impostare di solito per il tuo sito? Devi sapere anche quali possono essere le misure giuste da inserire, vi ho preparato quindi una guida veloce veloce:

  • Foto a grande formato su tutto il monitor, inserisci 1920 pixels
  • Foto circa’ meta’ schermo, inserisci 800 pixels
  • Foto per gallerie immagini, inserisci 900 pixels
  • Foto per i post, immagine circa 1/3 dello schermo 600 pixels
  • Ecommerce prodotti, indicativamente sui 1000 pixels sul lato lungo

Come modificare immagini con Pixlr

E’ come avere un clone di photoshop quando serve e dove serve. Basta una connessione ad internet e siete pronti ad elaborare le immagini. In questo video voglio mostrarvi quanto sia semplice ed utile utilizzare Pixlr per modificare o creare le immagini per il vostro sito internet.

Puo’ darsi che il tuo programma per navigare in internet ti chieda l’ installazione di flash player se non già installato, in questo caso lo puoi scaricare da qui https://get.adobe.com/it/flashplayer/

Unitamente a questo video, forniamo le misure in pixel da usare in modo specifico per il tuo sito

Come modificare le immagini in serie ed aggiungere la filigrana con Faststone

Spesso ci troviamo nella necessita’ di dover eseguire modifiche a molte immagini, anche alcune centinaia. Operazioni che sono tutte uguali e ripetitive, quindi ripetere gli stessi passaggi immagine per immagine, vuol dire perdere molto tempo prezioso.
C’e’ un modo molto semplice per fare eseguire queste lavorazioni direttamente al tuo pc con un programma gratuito che si chiama Faststone Image Viewer. scaricatelo ed installatelo!

Per prima cosa vi consiglio di fare una copia di sicurezza della cartella con le immagini che volete elaborare, infatti le operazioni descritte qui sotto vanno a modificare le immagini originali.

Fate doppio click su una immagine a caso presente nella cartella che contiene le foto. l’ immagine compare a tutto schermo, premete invio e vedrete tutte le immagini in quella cartella.

Modifica le foto in faststone

Modifica le foto in faststone

Come modificare le dimensioni delle immagini in serie con Faststone

Selezionate tutte le foto che vi interessa elaborare e cliccate su Strumenti > “Converti immagini selezionate” e si apre una nuova finestra all interno della quale si eseguono le seguenti impostazioni (nota: se vedete sono gia’ presenti nella sezione elenco input i file che avete selezionato precedentemente):

  • Formato: Jpeg
  • cartella output: deselezionatela
  • Usa le opzioni avanzate: selezionate ed appare un bottone alla destra “opzione avanzate”, cliccatelo e compare un altra finestra dove potete attivare una serie di operazioni:
    Etichetta: Ridimensiona – selezionate “usa il ridimensionamento”, poi ridimensiona basandoti su un lato. Definite poi il lato predefinito “Lato lungo” e selezionate una dimensione standard di riferimento in base alle vostre necessita’ (ad es. 1024), confermate su OK e la finestra si chiude

premete ora il pulsante “INIZIA” e le funzionalita’ automatizzate partiranno ed elaboreranno tutte le immagini che avete selezionato precedentemente.

Come aggiungere una filigrana alle immagini in serie:

Per aggiungere la filigrana utilizzate le opzioni avanzate e selezionate l’ etichetta “Filigrana”. Selezionate “usa la filigrana” ed appariranno delle impostazioni.

Caricate il file da utilizzare come filigrana cliccando sui tre puntini e si aprira’ la finestra che vi permettera’ di selezionare il file. Se non volete il brutto effetto blocco/etichetta incollata con il fondo colorato, utilizzate un file in formato Png a 24 bit con trasparenza (mi spiace ma qui serve una conoscenza di base di uso di photoshop)

Dato che in questa finestra non è possibile dare una proporzione al logo, il logo deve essere preparato precedentemente nelle misure corrette in funzione delle dimensioni dell’ immagine ottenuta.

Ulteriori impostazioni ci permettono di poter collocare la posizione della filigrana e a seconda delle proporzioni delle immagini sorgenti avremo una collocazione sempre nello stesso punto. Proporzioni immaigni differenti implicano uno spostamento della filigrana all’ interno dell’ immagine e quindi le immagini eleborate potranno, in maniera maggiore o minore avere il logo filigrana posizionato in modo differente.

E’ possibile effettuare un controllo veloce sul posizionamento della filigrana cliccando sul pulsante con la lente che in anteprima di mostrera’ alcune immagini. La filigrana puo’ essere posizionata tramite il selettore “Posizione” oppure definendo tramite i valori offset o in alternativa tramite il posizionamento manuale. Per concludere le impostazioni cliccate su “Ok” e fate partire l’ elaborazione cliccando sul pulsante “inizia”

nota: i due passaggi possono essere combinati tra di loro tenendo presente che il programma eseguira’ le modifiche in sequenza.

Come creare immagini su misura con Canva

in questo post vi indichero’ come creare delle immagini con dimensioni personalizzate con il programma Canva, in modo semplice e veloce in 2 passi
Infatti frequentemente si ha bisogno di dover creare delle immagini personalizzate con misure precise da utilizzare all’ interno di slider o di post.
Cosa c’e’ di meglio nell’ utilizzare il nostro fidato Canva che permette con poco sforzo di creare immagini belle per il vostro sito.

Passo 1: Canva Crea un Progetto / Dimensioni personalizzate

Abbiamo bisogno di un progetto personalizzato con le misure che vuoi, quindi e’ necessario avere la possibilita’ di poter inserire delle misure. Per farlo clicca sul pulsante “Crea un Progetto”, e successivamente “usa dimensioni personalizzate”… Facile!
Puoi anche cliccare solo sul pulsante verde.

Passo 2: Canva inserisci le dimensioni personalizzate

dopo aver completato il passo precedente lo schermo si sfoca ed in evidenza compare un selettore che ti permette di inserire le misure per la larghezza e l’ altezza. Nel nostro caso lasciamo selezionato la voce “pixel”. Dopo aver cliccato su “Crea” si aprira’ un foglio di lavoro o progetto personalizzato sulle misure che hai indicato.

Passo 3: Canva come salvare i file Jpg o Png

Quando hai completato la tua grafica con tutti gli elementi che desideri includere, clicca sul pulsante in alto a destra “Scarica”.
Seleziona poi il tipo di file che preferisci, jpg o png, e clicca su “scarica” per fare il download della tua grafica.

Facile e veloce!

Update: Quale formato utilizzare?

Canva ti permette di realizzare diversi tipologie di grafiche, dai social networks, al tuo sito, poster di stampa o altro e’ possibile farlo. Dopo aver creato la tua grafica, Canva assegna automaticamente un formato che pensa sia perfetto per quello che devi fare. Ma, in ogni caso puoi cambiare quando vuoi da un formato all’ altro tra i formati disponibili per il download:

  • JPG e PNG sono il formato di file perfetto per le grafica per il web ed avranno un aspetto pulito e preciso. I formati sono relativamente piccoli e sono perfetti per le attivita’ di mailing, social e per il sito internet, ma non sono l’ ideale per la stampa. Se hai realizzato una grafica multipagina, il file realizzato verra’ scaricato in formato zip.
  • PDF: standard Pdf e’ il formato perfetto per le presentazioni e per documenti multi pagina. usualmente viene esportato in formato a 96 dpi che va bene come file da scaricare online ma non e’ ancora l’ ideale per la qualita’ di stampa.
  • PDF: stampa Scegliendo questa opzione, il file sara’ scaricato a 300 dpi con la qualita’ massima perfetta per la stampa. Questa e’ la risoluzione perfetta per tutte quelle grafiche che verranno stampate su carta.
Andrea-icon

Andrea

Studente di Informatica All' IISS Ettore Majorana di Seriate (Bg, si detreggia abilmente tra Riff e assoli con le sue numerose chitarre, con pause rilassanti tra Musica, Videogiochi e tipico Humor Lombardo.

Clicca per vedere tutti gli articoli di questo Autore