Come ottimizzare le immagini per i post

{Read in English...}

Nel post precedente, parlando delle immagini grandi nei post, in molti commenti è stata espressa perplessità sull'impatto che esse potrebbero avere in fase di caricamento del blog. Mi fa piacere che vi poniate il problema perché è importantissimo che i nostri visitatori non perdano troppo tempo a caricare i post!
Premetto che l'argomento ottimizzazione è molto vasto e va anche oltre il discorso delle immagini. Io stessa dovrei rivedere il modello del mio blog per ottimizzarlo. meglio: è una di quelle cose che mi riprometto di fare appena ho una giornata libera, ma il tempo è così tiranno in questo periodo!
Ad ogni modo, oggi parliamo di come ridimensionare e salvare le immagini da caricare sul web.

Ecco due errori da evitare.
  • Mai, mai e poi mai caricare su Blogger {o altre piattaforme per blog} le immagini così come escono dalla macchina fotografica! Due sono i passaggi fondamentali da effettuare prima: il ridimensionamento e la compressione del formato.
  • Quando sull'editor dei post di Blogger viene chiesto, al caricamento di un'immagine, se la volete visualizzare piccola, media, grande, etc... questa impostazione non avrà alcun effetto sul suo peso! Il browser dell'utente, per visualizzarla, deve comunque scaricare il file nelle sue dimensioni originali e solo dopo avrà l'istruzione di visualizzarlo più in piccolo. La morale della favola è che non bisogna pensare che rimpicciolendo le immagini  tramite l'editor dei post di Blogger si agevoli il caricamento delle stesse.
Avrete capito che, prima di caricare un'immagine sul blog, è necessario qualche piccolo intervento con un programma di grafica, lo stesso con cui magari correggete l'esposizione delle foto, aggiungete i watermark, etc. Queste operazioni possono essere effettuate con l'arcitemuto Photoshop, ma anche con risorse gratuite più easy, come Ipiccy e Picmonkey.

RIDIMENSIONAMENTO
Se abbiamo appena scattato una foto con la nostra fichissima fotocamera a millemila megapixel, sicuramente importando il file sul computer ci accorgeremo che l'immagine è davvero grande, ben più della risoluzione del nostro monitor {perciò per vederla intera dobbiamo zoomare indietro}. Supponiamo di avere una foto che è larga 4000 pixel e alta 2500, quando la larghezza della colonna principale del nostro blog non supera, ad esempio, gli 800 pixel. Perché mai dovremmo caricarla nel suo formato originale, col risultato di appesantire enormemente i caricamenti?
E allora che si fa? La ridimensionamo!
Avendo l'accortezza di mantenere inalterate le proporzioni larghezza-altezza per non deformarne i contenuti, portiamo l'immagine a una dimensione tale per cui la larghezza coincida grossomodo con quella della colonna principale del nostro blog.
Direi che, in generale, 800 pixel è una buona misura: se la vostra colonna principale è molto più ampia, o state usando un modello cosidetto fluido visualizzato su schermo ad alta risoluzione, oppure c'è qualcosa che andrebbe rivisto.
Accertatevi, inoltre, che la risoluzione sia a 72 DPI, che è lo standard per le immagini web {per la stampa, invece, servono immagini a 150-300 DPI!}. Accertatevi anche che la modalità colore sia l'RGB {solitamente è così di base}.
come ridimensionare un'immagine con Photoshop, Ipiccy o Picmonkey
Ora dobbiamo salvare l'immagine ridimensionata. Quale formato scegliere?

FORMATI, COMPRESSIONE E SALVATAGGIO
Tre sono i formati tra cui possiamo scegliere. La loro resa non è uguale: bisogna scegliere quale fa al caso nostro di volta in volta.
  • JPEG: scelta migliore per le foto;
  • GIF: formato leggerissimo, valido solo per disegni con pochissimi colori {può contenerne massimo 256} o monocromatici;
  • PNG: questo formato è leggermente più pesante, per cui è sconsigliato per le foto. La resa delle scritte è però migliore rispetto a quella del .jpeg, inoltre conserva il canale delle trasparenze. Quindi sceglieremo di salvare in .png se, ad esempio, abbiamo un logo con fondo trasparente.
Tutti e 3 questi formati possono essere compressi in vario modo ed è importante scegliere le impostazioni consigliate per web.
Se usate Photoshop, scegliete Salva per Web e dispositivi... Potrete scegliere il formato e il grado di compressione. Fidatevi del vostro occhio e comprimete l'immagine quanto più possibile prima di vedere segni di degrado nella qualità {non è bello trovarsi davanti fotografie quadrettose!}. Per i .jpeg, io solitamente mi tengo intorno al 60-65% di qualità.
Stesso discorso si applica ai programmini gratuiti come Ipiccy. Ho provato anche Picmonkey, anche se non mi ha fatto simpatia l'opzione iper-semplificata per la qualità dell'immagine da salvare: anziché una percentuale, potete scegliere fra 3 nomi maschili! Per il web, Roger dovrebbe essere il vostro uomo.

Ma quanto veramente risparmiamo ad eseguire queste "noiosissime" operazioni? Ne vale davvero la pena?
Vi mostro una mia foto:

È larga esattamente quanto il contenuto del mio post, ovvero 730 pixel, in modo da risultare d'impatto. E pesa 165 Kb.
La foto originale, presa com'era dalla fotocamera, era larga 4000 pixel e pesava 4,15 Mb!
Ora immaginate questo risparmio di peso applicato ad ogni foto che viene visualizzata nella home page di un blog: l'impatto sul caricamento è sicuramente notevole. Sopratutto se visualizzate più di due post alla volta, cosa che comunque sconsiglio, se non volete caricamenti eterni.

Per oggi è tutto. Alla prossima!

NB. Se state offrendo un printable ai vostri lettori, queste regole non vanno applicate! Nel caso di file destinati alla stampa è sempre opportuno fornire un link che rimandi ad un'immagine ad alta risoluzione.

26 commenti:

  1. Grazie Silvia!! Picmonkey permette di modificare anche la risoluzione?

    RispondiElimina
    Risposte
    1. Ciao Koko! Mi pare di vedere che se salvi in qualità "Roger" su Picmonkey l'immagine viene portata in automatico a 72 DPI.

      Elimina
    2. Ah ecco, io non ci avevo fatto caso! Grazie ancora, gentilissima!! ^_^

      Elimina
  2. utilissima davvero!! proprio in questi gg ho dovuto cambiare macchina fotografica per fare le mie foto per il blog e non avevo prestato caso al ridimensionamento!

    RispondiElimina
    Risposte
    1. hehe che poi più la fotocamera è buona e più il problema si pone ;D

      Elimina
  3. Per fortuna questi accorgimenti li sto già adottando ma grazie per i chiarimenti per i vari strumenti.
    Sono contenta che partecipi anche tu al mio giveaway! in bocca al lupo!
    ciao
    Denise

    RispondiElimina
  4. Non ho capito chi è il Sig. Roger, non lo conosco! Per mia fortuna c'è il sig. Picmonkey!

    RispondiElimina
  5. Ciao Silvia, ma quanto sei brava, grazie di tutte le spiegazioni!!
    Buona serata
    Carmen

    RispondiElimina
  6. Grazie, io manco mi sognavo di pormi il problema della riduzione o compressione delle immagini....sei una miniera di informazioni :)

    RispondiElimina
  7. Ma guarda, non ci avevo pensato !!!! grazie per le spegazioni, ho salvato il post tra i preferiti, lo devo studiare bene .... :-)

    RispondiElimina
  8. Ciao Silvia, io di solito ridimensiono le foto con Picasa ma ne carico solo una su blogsot. Se nel post ci sono più foto le lascio ad alta risoluzione e le hosto su Flickr.
    Faccio così da quando ho avuto l'incidente con le foto scomparse dal blog la primavera scorsa.... =)
    Grazie per tutti questi consigli.
    Daniela

    RispondiElimina
  9. Precisissima! Ho la brutta abitudine non usare mai il "salva per web", ma impostare i 72dpi, ridimensionare i pixel e via. Chissà se entro il millesimo post mi ricorderò :D

    RispondiElimina
  10. Molto chiare come indicazioni.
    Io di solito uso Paint Shop Pro ed ho la funzione "Save for the web", me la riduce di molto ma riesco ad ottenere risultati migliori con Photoshop.
    Le dimensioni per il mio Blog sono 600 per le orizzontali e 460 per le verticali ed anch'io rimando ad un link esterno con l'immagine ad alta risoluzione se voglio far vedere la foto con i migliori dettagli ma è un lavoro troppo lungo per cui lo faccio solo in casi eccezionali.
    Ciao
    Norma

    RispondiElimina
  11. Oooooohhhh adesso ho le idee più chiare!!! ^^
    Io ridimensionavo soltanto! e un po' troppo mi sa (arrivavo a 350!!!) ma la storia dei DPI: mai saputa!!!!
    Però adesso che lo so ci sto attenta!!!! Grazie mille :)
    Un bacione

    RispondiElimina
  12. Ciao! io invece ero convinta che salva per web fosse solo per le gif animate!

    RispondiElimina
  13. Io, che normalmente uso ipiccy, di solito salvo le mie immagini con larghezza 1000 px all'80-85%, perché in un webminar promosso da etsy erano i valori consigliati per le foto, poi le carico su flickr e uso il link da 640 px che è la larghezza del mio testo :D!!

    RispondiElimina
  14. Ciao Silvia,
    mi piace passare di qua, imparo sempre qualcosa di nuovo!!!
    grazie
    Sara

    RispondiElimina
  15. Silvia non sai che gioia sia per me non dover più caricare le foto su photobucket!!! Grazieeeee!!! Un sacco di lavoro in meno^^ utilissimo questo post, me lo rileggo meglio per capire bene il fatto del ridimensionamento^^ un abbraccio tesorin

    RispondiElimina
  16. Grazie Silvia, avevo proprio bisogno di queste informazioni!
    Ridimensiono sempre le mie immagini, ma non ho mai fatto caso ai dpi, d'ora in avanti cercherò di fare più attenzione a riguardo.
    Grazie ancora, a presto!

    RispondiElimina
  17. wow..post davvero utile...grazie per la condivisione...cercavo proprio informazioni a riguardo....;)

    RispondiElimina
  18. Silvia, che liberazione!! Grazie per avermi chiarito le idee... ci mettevo un sacco di tempo a caricare le foto prima su photobucket e poi sul blog, così è tutta un altra vita!! Un bacione tesorin

    RispondiElimina
  19. Grazie molto utile. Bravissima blog fantastico.

    RispondiElimina
  20. Mmmm...sinceramente io non ridimensiono, sbagliando... Proverò picmonkey. Grazie del consiglio. Un baciotto e buona serata, cris

    RispondiElimina
  21. Grazie Tine! Sei stata davvero molto utile e chiara!
    Bentrovata
    un saluto
    Barbara

    RispondiElimina

Ti ringrazio per il tuo commento: mi stai dedicando due minuti del tuo tempo e lo apprezzo immensamente!
I commenti vengono modrerati, perciò non sono visibili appena inviati.
Mi riservo il diritto di cancellare messaggi:
• offensivi, diffamatori e/o volgari;
• a sfondo esplicitamente politico;
• pubblicitari;
• che richiedono 'follow 4 follow': seguimi se ti fa piacere, io farò altrettanto!

Related Posts Plugin for WordPress, Blogger...