{"id":110,"date":"2008-08-18T12:04:56","date_gmt":"2008-08-18T10:04:56","guid":{"rendered":"http:\/\/www.boscarol.com\/blog\/?p=110"},"modified":"2009-02-16T22:51:13","modified_gmt":"2009-02-16T20:51:13","slug":"creare-un-jpeg-per-il-web","status":"publish","type":"post","link":"http:\/\/www.boscarol.com\/blog\/?p=110","title":{"rendered":"Creare un JPEG per il web con Photoshop CS3"},"content":{"rendered":"

Considerati tutti i limiti dei browser attuali e il fatto che i monitor hanno gamut diversi (anche molto diversi se sono monitor LCD) e al monitor pu\u00f2 essere o non essere assegnato un profilo colore ICC, qual \u00e8 il miglior modo per creare una immagine JPEG da visualizzare su web?<\/p>\n

I migliori browser supportano (cio\u00e8 riconoscono) un profilo colore ICC incorporato in un file JPEG, quindi \u00e8 opportuno incorporare il profilo nel file. I browser che non lo supportano, dovrebbero (secondo W3C) considerare il JPEG come sRGB. \u00c8 per\u00f2 comune, per esempio nel campo fotografico, utilizzare profili diversi per le proprie immagini.\u00a0<\/p>\n

\u00a0<\/p>\n

Creare un nuova immagine per il web<\/strong><\/p>\n

Per creare una nuova immagine in Photoshop CS3, si usa come al solito il comando File > New e si sceglie lo spazio colore, come nello screen shot<\/em> qui sotto. Poi clic su OK.<\/p>\n

\"\"<\/p>\n

A questo punto si disegna l’immagine\u00a0e alla fine si d\u00e0 il comando File > Save for Web and Devices. Si prosegue come indicato qui sotto in “Ottimizzare per il web”.<\/p>\n

\u00a0<\/p>\n

Salvare una fotografia per il web<\/strong><\/p>\n

Se invece di una nuova immagine dobbiamo preparare una fotografia per una pagina web, il principio \u00e8 lo stesso: dobbiamo avere una fotografia RGB con profilo ICC incorporato.\u00a0I passi sono questi.<\/p>\n

Si apre la fotografia in Photoshop e si controlla se c’\u00e8 un profilo incorporato. In caso affermativo l’immagine \u00e8 gi\u00e0 pronta per essere inserita in una pagina web. Dare\u00a0il comando File > Save for Web and Devices e proseguire come indicato qui sotto in “Ottimizzare per il web”.<\/p>\n

Se infine la fotografia non ha un profilo incorporato assegnare il profilo corretto e dare\u00a0il comando File > Save for Web and Devices.\u00a0<\/p>\n

\u00a0<\/p>\n

Opzioni di ottimizzazione per il web<\/strong><\/p>\n

Con il comando File > Save for Web and Devices si\u00a0apre la finestra relativa,\u00a0come nello screen shot<\/em> qui sotto.\u00a0Come formato scegliere JPEG con le opzioni di compressione e qualit\u00e0 preferite.<\/p>\n

\"\"<\/p>\n

In questa finestra ci sono tre men\u00f9 popup: un primo<\/strong> men\u00f9 \u00a0in alto (a sinistra di Save), un secondo<\/strong> un po’ pi\u00f9 in basso a destra (\u00e8 quello aperto qui sopra) e un terzo (ancora un po’ pi\u00f9 in basso). Quest’ultimo non \u00e8 interessante per il colore.<\/p>\n

Il secondo men\u00f9 (quello aperto) consente di far fare a Photoshop una conversione di colore a sRGB (Convert to sRGB<\/em>). Se la nostra immagine \u00e8 gi\u00e0 in sRGB, questo comando non fa nulla, altrimenti converte l’immagine in sRGB. \u00a0<\/p>\n

La casella ICC Profile<\/em>, se attivata, indica a Photoshop di produrre un JPEG con profilo incorporato<\/span>. Se non \u00e8 attivata il JPEG non avr\u00e0 un profilo incorporato.<\/p>\n

Il primo men\u00f9 (quello pi\u00f9 in alto) riguarda la resa dell’immagine nella finestra stessa Save for web<\/em> e non influisce sulla resa dell’immagine nel browser. Serve per simulare come verr\u00e0 l’immagine quando sar\u00e0 su web.<\/p>\n

In questo men\u00f9 si pu\u00f2 scegliere tra quattro opzioni<\/p>\n

    \n
  1. Uncompensated Color;<\/li>\n
  2. Standard Windows Color;<\/li>\n
  3. Standard Macintosh Color;<\/li>\n
  4. Use Document Color Profile.<\/li>\n<\/ol>\n

    Sulla immagine originale<\/span>\u00a0(la prima in alto a sinistra) queste impostazioni non dipendono dall’impostazione Convert to sRGB<\/em> e hanno rispettivamente questo effetto:<\/p>\n

      \n
    1. i numeri RGB sono mandati al monitor senza essere modificati (cio\u00e8 non viene fatta compensazione monitor);<\/li>\n
    2. all’immagine viene assegnato sRGB e viene fatta la compensazione a monitor;<\/li>\n
    3. all’immagine viene assegnato Apple RGB e viene fatta la compensazione a monitor;<\/li>\n
    4. all’immagine viene assegnato il profilo incorporato nell’immagine stessa e viene fatta la compensazione monitor.<\/li>\n<\/ol>\n

      Sulle immagini cosiddette “ottimizzate”<\/span>\u00a0(se sono JPEG) queste impostazioni\u00a0sono specifiche per ogni immagine: per esempio, se sono visualizzati \u00a0tre “ottimizzati”, ognuno di questi si pu\u00f2 impostare diversamente. Inoltre queste impostazioni\u00a0dipendono<\/span> dall’impostazione Convert to sRGB<\/em>: se \u00e8 attivato\u00a0viene preventivamente fatta la conversione a sRGB<\/span>, altrimenti non viene fatta<\/span>; successivamente le quattro opzioni hanno questi effetti:<\/p>\n

      \n
        \n
      1. i numeri RGB sono mandati al monitor senza essere modificati: questo permette di simulare un browser che non onora i profili su un monitor come quello che stiamo usando (stesso gamma, bianco, primari);<\/li>\n
      2. ai numeri RGB viene assegnato un gamma 2.2 al posto di quello originale: questo permette di simulare un browser che non onora i profili su un monitor con gamma 2.2;<\/li>\n
      3. ai numeri RGB viene assegnato un gamma 1.8 al posto di quello originale: questo permette di simulare un browser che non onora i profili su un monitor con gamma 1.8;<\/li>\n
      4. all’immagine viene assegnato il suo profilo (oppure lo spazio di lavoro in Photoshop, se l’immagine non ha un profilo assegnato): ha senso solo se Convert to sRGB<\/em> non entra in azione (quindi o \u00e8 disattivato o l’immagine \u00e8 gi\u00e0 sRGB) e in tal caso permette di simulare un browser che onora i profili incorporati in JPEG (come Safari e Firefox).<\/li>\n<\/ol>\n<\/div>\n

        Tutto ci\u00f2 \u00e8 abbastanza complesso e reso anche pi\u00f9 frustrante dalla scarsa documentazione di Adobe. Vediamo in pratica quali sono le migliori impostazioni da usare per evitare inutili complicazioni.<\/p>\n

        \u00a0<\/p>\n

        Workflow consigliato<\/strong><\/p>\n

        Partiamo sempre da Photoshop con una immagine\u00a0con profilo <\/span>assegnato<\/span> esplicitamente<\/span><\/span>.<\/p>\n

        La casella ICC profile<\/em> va sempre \u00a0attivata<\/span>, cos\u00ec il profilo viene incorporato nel JPEG.<\/p>\n

        Se l’immagine \u00e8 sRGB con profilo assegnato esplicitamente (in realt\u00e0 potrebbe anche non essere assegnato ma impostato come spazio di lavoro in Photoshop), la conversione a sRGB del secondo men\u00f9 non fa nulla dunque \u00e8 irrilevante attivare o non attivare la conversione a sRGB.<\/p>\n

        Se l’immagine \u00e8 in qualche altro profilo l’attivazione fa la conversione a sRGB.\u00a0Questa scelta dipende dal profilo finale che intendiamo incorporare nella nostra immagine. Chi vuole essere prudente, attiva la conversione a sRGB (e l’immagine viene convertita in sRGB). I pi\u00f9 avventurosi non la attivano e l’immagine rimane nel suo profilo originale (per esempio Adobe RGB).<\/p>\n

        L’altro men\u00f9, quello pi\u00f9 in alto, si imposta diversamente per l’originale e per ogni singola “ottimizzata”.<\/p>\n

        Per l’originale ha senso impostarlo su Use Document Color Profile<\/em>. In questo modo vedo l’originale esattamente come \u00e8 (cio\u00e8 come lo vedo in Photoshop, con la compensazione monitor).<\/p>\n

        Sulle immagini ottimizzate, l’impostazione dipende da cosa voglio simulare. Per simulare un browser che<\/p>\n

          \n
        • onora i profili incorporati, va impostata su Use Document Color Profile<\/em>;\u00a0<\/li>\n
        • non onora i profili\u00a0\n
            \n
          • su monitor a gamma 2.2, va impostato su Standard Windows Color<\/em>;\u00a0<\/li>\n
          • su monitor a gamma 1.8, va impostato su Standard Macintosh Color;<\/em><\/li>\n
          • su monitor come il nostro va impostato Uncompensated Color<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

            Qui sotto, Convert to sRGB<\/em> non \u00e8 attivato, dunque l’immagine rimane nel suo profilo che \u00e8 ProPhoto. I preview sono:<\/p>\n

            – in alto a sinistra l’originale in ProPhoto; in alto a destra la simulazione Uncompensated Color<\/em>;<\/p>\n

            – in basso a sinistra la simulazione Standard Macintosh Color<\/em>; in basso a destra Use Document Color Profile<\/em>.<\/p>\n

            \"\"<\/p>\n

            A questo punto possiamo salvare l’immagine in un file, che sar\u00e0 un file JPEG con una immagine RGB con profilo ICC incorporato.<\/p>\n

            Ancora un paio di cose. Pi\u00f9 la qualit\u00e0 del JPEG \u00e8 bassa (cio\u00e8 maggiore \u00e8 la compressione) meno accurata sar\u00e0 la eventuale conversione di colore. Poi, quando si agisce nel secondo men\u00f9 e la finestra \u00e8 in 4-up<\/em>, cio\u00e8 come nell’immagine in cima a questa pagina, bisogna dare il comando Repopulate Views<\/em> per applicare a tutti gli ottimizzati le impostazioni.<\/p>\n

            —<\/p>\n

            Nella prossima pagina (clic qui sotto a destra) si pu\u00f2 controllare se il nostro browser supporta i profili ICC nei JPEG (a patto che ci siano, naturalmente).<\/p>\n","protected":false},"excerpt":{"rendered":"

            Considerati tutti i limiti dei browser attuali e il fatto che i monitor hanno gamut diversi (anche molto diversi se sono monitor LCD) e al monitor pu\u00f2 essere o non essere assegnato un profilo colore ICC, qual \u00e8 il miglior modo per creare una immagine JPEG da visualizzare su web? I migliori browser supportano (cio\u00e8 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[3],"tags":[13,12,6],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/pjoVH-1M","jetpack_sharing_enabled":true,"jetpack_likes_enabled":false,"_links":{"self":[{"href":"http:\/\/www.boscarol.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/110"}],"collection":[{"href":"http:\/\/www.boscarol.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.boscarol.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.boscarol.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.boscarol.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=110"}],"version-history":[{"count":30,"href":"http:\/\/www.boscarol.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/110\/revisions"}],"predecessor-version":[{"id":159,"href":"http:\/\/www.boscarol.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/110\/revisions\/159"}],"wp:attachment":[{"href":"http:\/\/www.boscarol.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.boscarol.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=110"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.boscarol.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}