{"id":435,"date":"2011-05-18T20:08:10","date_gmt":"2011-05-18T20:08:10","guid":{"rendered":"http:\/\/wiki2.professionearchitetto.it\/ottimizzare-le-immagini-per-il-web\/"},"modified":"2014-03-11T11:55:00","modified_gmt":"2014-03-11T10:55:00","slug":"ottimizzare-le-immagini-per-il-web","status":"publish","type":"post","link":"https:\/\/www.professionearchitetto.it\/wiki\/ottimizzare-le-immagini-per-il-web\/","title":{"rendered":"Ottimizzare le immagini per il web"},"content":{"rendered":"

Se vogliamo farci conoscere sul web dobbiamo imparare a conoscere a fondo quali sono gli strumenti che si usano per la pubblicazione di testi ed immagini, quali sono le risorse che ci permettono di pubblicare, di comunicare al meglio i nostri progetti.<\/p>\r\n

Riguardo ai testi ci sarebbe molto da dire. Ogni medium ha le proprie regole, e ci\u00f2 che vale per la carta stampata non vale per la TV e certamente non vale per il web. Per ora rimandiamo soltanto a una delle risorse storiche sull’argomento, una lettura piacevole e utile che consigliamo a tutti: il mestiere di scrivere.com<\/a>.<\/p>\r\n

Concentriamoci invece sulle immagini.<\/p>\r\n

Come vedremo, esistono molte risorse gratuite dove pubblicare le nostre immagini sul web. Non le considerate un sistema per conservare le foto di famiglia, o non solo quello. Se le usiamo con intelligenza e metodo, ci possono aiutare nella pratica quotidiana e possono servire a farci pubblicit\u00e0. Ecco un paio di casi.<\/p>\r\n

Quando ci chiedono di inviare o lasciare un portfolio lavori, NON lasciamo disegni in giro, NON inviamo immagini ad alta risoluzione. Invitiamo il nostro interlocutore a visitare la pagina dove avremo pubblicato le foto dei nostri progetti. Belle, efficaci, ma non riutilizzabili.<\/p>\r\n

Se un cliente ci chiede l’ultima versione del progetto, non mandiamogli il rendering, ma spediamogli il link alla pagina del suo progetto, dove avremo pubblicato l’ultima ipotesi. Dar\u00e0 senz’altro un occhiata anche alle altre realizzazioni, e ci saremo fatti pubblicit\u00e0.<\/p>\r\n

Trucchi e suggerimenti per ottimizzare le immagini per il web.<\/span><\/h2>\r\n

Una delle regole d’oro del web \u00e8 quella di non far aspettare troppo il lettore. Una pagina “lenta” \u00e8 una pagina che non verr\u00e0 mai letta da nessuno. Nella maggioranza dei casi la colpa \u00e8 delle immagini non ottimizzate per il web<\/strong>.<\/p>\r\n

Anni di consuetudine alla stampa su carta ci hanno abituato a produrre immagini alla qualit\u00e0 massima, o forse a non curarci troppo della dimensione in byte dei file che produciamo. Bulimia dello spazio disco. Schede grafiche sempre pi\u00f9 performanti, capienza degli hard disk in Terabyte, fotocamere da trilioni di megapixel. Scordatevi tutto questo.<\/p>\r\n

Sul web la parola d’ordine \u00e8 ottimizzare<\/strong>, e il motivo \u00e8 semplice: la velocit\u00e0 di trasmissione <\/strong>della vostra immagine \u00e8 proporzionale alla sua dimensione <\/strong>in byte<\/a>. E con la qualit\u00e0 delle nostre Reti dati non c’\u00e8 molto da scialare.<\/p>\r\n

Quanti dpi …?<\/span><\/h2>\r\n

Sul web non esistono i dpi (dots per inch = punti per pollice). \u00c8 una convenzione che serve per tradurre i pixel in pollici. Una immagine larga 3000 pixel stampata a 300 dpi verr\u00e0 grande 10″ = 25.4 centimetri.<\/p>\r\n

Sul web le immagini vanno su un video, quindi NON si stampano, e quindi i dpi non contano. Contano solo i pixel<\/strong>.<\/p>\r\n

\"image-optimize-1.jpg\"<\/p>\r\n

… e allora, quanti pixel?<\/span><\/h2>\r\n

Dipende dai monitor. La risoluzione pi\u00f9 comune dei monitor oggi in uso \u00e8 il 1280×800 <\/strong>pixel, seguono il 1024×768, il 1280×1024, il 1440×900. Queste 4 risoluzioni costituiscono l’80% del totale<\/strong>.<\/p>\r\n

Questo vuol dire che, oggi, quando pensiamo a una immagine destinata al web, non ha senso salvarla pi\u00f9 grande di 1024\/1280 pixel di larghezza e 800\/900 di altezza<\/strong>. Sempre che la si voglia guardare a tutto schermo. Altrimenti \u00e8 anche meno e dipende da quanti pixel \u00e8 larga la pagina che andr\u00e0 ad ospitare quell’immagine<\/a>.<\/p>\r\n

Immagini pi\u00f9 grandi vengono comunque adattate (male) alla risoluzione massima dei monitor, e richiedono un tempo pi\u00f9 lungo (e inutile) di caricamento.<\/p>\r\n

Peso vs. Qualit\u00e0<\/span><\/h2>\r\n

Esiste un altro parametro da considerare, forse il pi\u00f9 importante, ed \u00e8 la qualit\u00e0 dell’immagine<\/strong>. Un’immagine destinata al web va salvata utilizzando procedure o software appositamente concepiti per ottimizzare quell’immagine per il web, che sfruttano dei particolari algoritmi di compressione<\/strong>.<\/p>\r\n

Si tratta di trovare il giusto compromesso fra una dimensione in byte accettabile, il “peso” dell’immagine, e la qualit\u00e0 ottimale del risultato. Esistono dei software che permettono di simulare il risultato finale per consentirci di valutare l’eventuale decadimento dell’immagine. Mediamente hanno tutti lo stesso funzionamento: a sinistra l’immagine allo stato iniziale, mentre a destra quella ottimizzata. Analogamente viene visualizzato il peso dell’immagine prima e dopo la cura.<\/p>\r\n

\"image-optimize-2.jpg\"<\/p>\r\n

software ad-hoc<\/span><\/h2>\r\n

Esistono dei software fatti apposta per ottimizzare le imagini per il web. Il pi\u00f9 diffuso fra gli architetti \u00e8 senz’altro Photoshop, o meglio l’opzione “Salva per il web” del menu file, e c’\u00e8 anche Adobe Fireworks. Ma esistono anche delle ottime alternative gratuite<\/strong>, come RIOT – Radical Image Optimization Tool<\/a><\/strong>, un piccolo software davvero completo, che si pu\u00f2 mettere su una penna USB senza installazione, e altrettanto pratico da usare: si apre il programma, si trascina il file sul riquadro di sinistra, si fanno le prove necessarie e si salva il risultato.<\/p>\r\n

Da notare un particolare della pulsantiera di RIOT.<\/p>\r\n

\"image-optimize3.gif.png\"<\/p>\r\n

A differenza del resto del mondo, le uniche 3 opzioni di salvataggio possibili per il web sono il JPEG<\/strong>, il GIF <\/strong>e il PNG<\/strong>. Il JPEG \u00e8 il formato pi\u00f9 indicato per le foto<\/strong> o per la grafica con tinte sfumate<\/strong>. Gli altri due (GIF e PNG) per la grafica con tinte piatte<\/strong>, o disegni al tratto<\/strong>. Ma non fidatevi ciecamente di questa indicazione generica: fate delle prove.<\/p>\r\n

Le immagini, i motori di ricerca, e come denominare i file<\/span><\/h2>\r\n

Last but not least, riteniamo sia dovuto un cenno al come le nostre immagini vengono reperite sul web<\/strong>. Se il nostro obiettivo \u00e8 “farci conoscere sul web”, non possiamo tralasciare il discorso dei motori di ricerca, o meglio di come Google tenta di interpretare il contenuto delle immagini.<\/p>\r\n

Un motore di ricerca, NON \u00e8 in grado di interpretare un’immagine<\/strong>, almeno non nel senso che intendiamo comunemente. E figuriamoci un’animazione Flash o un video, ma questo \u00e8 un altro discorso.<\/p>\r\n

Memorizza per\u00f2 qualsiasi testo venga associato a quell’immagine. Tiene conto delle parole che sono nella stessa pagina di quella foto, ipotizzando che un testo scritto immediatamente possa essere una didascalia. Ma sono ipotesi. Di certo il nome del file di quell’immagine significa pi\u00f9 di tutto il resto<\/strong>.<\/p>\r\n

“Le parole sono importanti<\/strong>“, e sul web anche i nomi dei file possono essere di grande aiuto. Evitiamo quindi di chiamare quei file “foto 1.jpg” o “vista dal basso.png”. Molto pi\u00f9 utile: “Milano-Piazza-Duomo-Planimetria-Generale.jpg”<\/strong>. Google vi ringrazier\u00e0 mostrando la vostra immagine prima di altre pi\u00f9 anonime.<\/p>\r\n

Se il nostro obiettivo \u00e8 di raggiungere un pubblico internazionale usiamo l’inglese.<\/p>\r\n

Un’ultima accortezza. NON usate spazi o simboli o caratteri accentati nei nomi dei file<\/strong>. Solo lettere non accentate, numeri e trattini. Ancora per qualche anno.<\/p>\r\n

Dove pubblicare le nostre immagini sul web<\/span><\/h2>\r\n

C’\u00e8 l’imbarazzo della scelta. Si tratta di risorse assolutamente gratuite e visitate da tutto il mondo del web. Siamo certi di scordarne tantissimi, ce ne scusiamo.<\/p>\r\n

Flickr<\/a> <\/strong>– in assoluto ad oggi il pi\u00f9 diffuso sito web di condivisione di fotografie<\/strong>. , Ranking Google altissimo, quindi una grande popolarit\u00e0 per le nostre immagini. Ciascun album fotografico pu\u00f2 corrispondere a un lavoro, un progetto, una tesi di laurea.\u00a0 C’\u00e8 modo di aggiungere testi, didascalie, commenti, link.<\/p>\r\n

Imageshack<\/a><\/strong> – come Rapidshare per i file, Ishack \u00e8 il sistema pi\u00f9 veloce <\/strong>per condividere un’immagine. Non ci sono registrazioni da fare. Si carica il file e si ottiene un indirizzo web da utilizzare su una mail o su una pagina web.<\/p>\r\n

Issuu<\/strong><\/a> – \u00e8 il sistema meno ortodosso, ma forse il pi\u00f9 accattivante<\/strong>. Le vostre foto diventano una rivista da sfogliare<\/strong>. Posso caricare direttamente dei PDF<\/strong>.<\/p>\r\n

Wikipedia<\/strong><\/a> – e perch\u00e9 no? Se i contenuti che vogliamo diffondere rispettano le linee guida<\/a> e la wikiquette<\/a>, perch\u00e9 non dovremmo ambire a vederle pubblicate sulla pi\u00f9 grande enciclopedia del mondo<\/strong>?<\/p>\r\n

Facebook<\/strong><\/a> – finch\u00e9 \u00e8 di moda<\/strong>, perch\u00e9 non sfruttarlo? Anche se non durer\u00e0 a lungo (le ultime parole famose…\u00a0\ud83d\ude42<\/p>\r\n

<\/p>","protected":false},"excerpt":{"rendered":"

Se vogliamo farci conoscere sul web dobbiamo imparare a conoscere a fondo quali sono gli strumenti che si usano per la pubblicazione di testi ed immagini, quali sono le risorse che ci permettono di pubblicare, di comunicare al meglio i nostri progetti. Riguardo ai testi ci sarebbe molto da dire. Ogni medium ha le proprie […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45],"tags":[38,25],"class_list":{"0":"post-435","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-lezioni-web","7":"tag-scrivere-per-il-web","8":"tag-software-grafica"},"views":26603,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.professionearchitetto.it\/wiki\/wp-json\/wp\/v2\/posts\/435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.professionearchitetto.it\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.professionearchitetto.it\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.professionearchitetto.it\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.professionearchitetto.it\/wiki\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":0,"href":"https:\/\/www.professionearchitetto.it\/wiki\/wp-json\/wp\/v2\/posts\/435\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.professionearchitetto.it\/wiki\/wp-json\/wp\/v2\/media?parent=435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.professionearchitetto.it\/wiki\/wp-json\/wp\/v2\/categories?post=435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.professionearchitetto.it\/wiki\/wp-json\/wp\/v2\/tags?post=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}