Images Optimization (not only) for Web Developers

Images Optimization (not only) for Web Developers
Google DevFest Bari 2022
3-4 Dicembre 2022

Transcript

1. Francesco Giorgio © 2022 IMAGES OPTIMIZATION (not only) FOR WEB DEVELOPERS
2. Francesco Giorgio © 2022 FRANCESCO GIORGIO Full Stack Web Developer Digital Manager francesco@giorgio.dev
3. Francesco Giorgio © 2022 FRANCESCO GIORGIO Full Stack Web Developer Digital Manager francesco@giorgio.dev
4. Francesco Giorgio © 2022 18 Luglio 1992 “Les Horribles Cernettes“ (Silvano De Gennaro)
5. Francesco Giorgio © 2022 IMMAGINI AI RAGGI X Tipologie, caratteristiche … e qualcosa in più 01.
6. Francesco Giorgio © 2022 VETTORIALE vs RASTER Gli elementi grafici che la costituiscono sono un insieme di primitive geometriche IMMAGINE VETTORIALE Griglia di punti detti pixel ognuno dei quali è caratterizzato da una posizione e un colore IMMAGINE RASTER
7. Francesco Giorgio © 2022 VETTORIALE vs RASTER
8. Francesco Giorgio © 2022 VETTORIALE vs RASTER
9. Francesco Giorgio © 2022 CARATTERISTICHE: • Insieme di punti fissi, linee e curve • Scalabile all’infinito • Dimensioni del file ridotte (dipende!) • Può essere rappresentata tramite codice UTILIZZI: Elementi grafici come loghi, icone, simboli o disegni tecnici. In ogni caso grafiche rappresentabili facilmente da figure geometriche semplici o complesse. IMMAGINE VETTORIALE VETTORIALE vs RASTER
10. Francesco Giorgio © 2022 CARATTERISTICHE: • Griglia di pixel • NON scalabile in modo ottimale • Dimensioni del file maggiori e proporzionali • Quasi sempre rappresentata come file binario UTILIZZI: Immagini non caratterizzate da forme geometriche precise, come fotografie o immagini contenenti diverse miscele di colore. IMMAGINE RASTER VETTORIALE vs RASTER
11. Francesco Giorgio © 2022 Dimensioni maggiori = Numero di pixel maggiore = Peso del file maggiore = Maggiore nitidezza dell’immagine DIMENSIONI
12. Francesco Giorgio © 2022 METODO COLORE ALTRI PRINCIPALI METODI: Lab, HSB, SCALA DI GRIGIO
13. Francesco Giorgio © 2022 RGB Metodo di colore additivo perché somma differenti percentuali, quindi luminosità, dei colori rosso, verde e blu METODO COLORE
14. Francesco Giorgio © 2022 CMYK Metodo di colore sottrattivo, i colori si ottengono togliendo intensità ai colori primari METODO COLORE
15. Francesco Giorgio © 2022 METODO COLORE CMYK Metodo di colore sottrattivo, i colori si ottengono togliendo intensità ai colori primari
16. Francesco Giorgio © 2022 PROFONDITÁ IN BIT
17. Francesco Giorgio © 2022 PROFILO COLORE Modello che determina come i valori numerici dei colori devono essere rappresentati dal dispositivo (es. monitor, stampante).
18. Francesco Giorgio © 2022 sRGB (sRGB IEC61966-2.1) Adobe RGB ProPhoto RGB FOGRA 27 PROFILO COLORE
19. Francesco Giorgio © 2022 COMPRESSIONE LOSSY LOSSLESS Il peso del file viene ridotto sacrificando informazioni all’interno dell’immagine, che ne risulta compromessa in maniera più o meno evidente Il peso viene ridotto ma le informazioni e la qualità generale dell’immagine non vengono compromesse
20. Francesco Giorgio © 2022 Compressione (lossy) di un comune file JPEG COMPRESSIONE
21. Francesco Giorgio © 2022 Progressive JPEG Baseline JPEG BASELINE vs PROGRESSIVE
22. Francesco Giorgio © 2022 DATI EXIF e PROPRIETARI • Rapporto focale • Tempo di esposizione • ISO • Rotazione immagine • Data/ora • Bilanciamento del bianco • Thumbnail • Lunghezza focale • Flash • Obiettivo • Tipo di fotocamera • Software utilizzato • Dati GPS • Dati proprietari
23. Francesco Giorgio © 2022 FORMATO VETTORIALE RASTER
24. Francesco Giorgio © 2022 • WEBP - sviluppato da Google nel 2010, specifico per il web • AVIF - un formato moderno (2019) con una compressione migliore rispetto ai formati JPEG e WEBP, supporta spazi colore multipli. • JPEG XL - diretto concorrente del formato AVIF, ma con maggiori funzionalità. Ambisce a diventare il formato di riferimento per il futuro. • HEIF/HEIC - standard creato dal Moving Picture Experts Group (MPEG) per la memorizzazione di immagini e sequenze di immagini FORMATI MODERNI
25. Francesco Giorgio © 2022 QUESTIONE DI PESO? Ottimizziamo le nostre foto fino all’ultimo kilo(byte) 02.
26. Francesco Giorgio © 2022 IL FORMATO GIUSTO GIF ≈ 70 kB JPEG ≈ 180 kB PNG ≈ 210 kB WEBP ≈ 23 kB SVG ≈ 728 kB
27. Francesco Giorgio © 2022 SVG ≈ 728 kB IL FORMATO GIUSTO
28. Francesco Giorgio © 2022 GIF ≈ 10 kB JPEG ≈ 47 kB PNG ≈ 55 kB WEBP ≈ 6 kB SVG ≈ 4 kB IL FORMATO CORRETTO
29. Francesco Giorgio © 2022 RIDUZIONE DELLE DIMENSIONI 1920x1080 px ≈ 2.5 MB 800x600 px ≈ 1.7 MB 400x300 px ≈ 900 kB
30. Francesco Giorgio © 2022 ADATTAMENTO PROFONDITÁ IN BIT ≈ 1.2 MB 262K colori 281T colori 16,8M colori ≈ 2.1 MB ≈ 1.5 MB 6 bit 8 bit 16 bit
31. Francesco Giorgio © 2022 RIMOZIONE PROFILO COLORE “Non avrai altro profilo all’infuori di me” sRGB !!!
32. Francesco Giorgio © 2022 RIMOZIONE DATI EXIF e PROPRIETARI Risparmio ≈ 100 kB (variabile) Vale effettivamente la pena? Altri metadati: • Anteprima/Miniatura • Caricamento progressivo EXIF Tool: https://exiftool.org/
33. Francesco Giorgio © 2022 Originale 800 kB Qualità 90% 300 kB Qualità 60% 120 kB COMPRIMIAMO IL GIUSTO
34. Francesco Giorgio © 2022 COMPRESSIONE < 15% ovvero QUALITÁ > 85% COMPRIMIAMO IL GIUSTO Meglio ancora se disponibile una compressione lossless
35. Francesco Giorgio © 2022 NON DARE DA MANGIARE AL BROWSER 03. Siamo sviluppatori => lavoriamo sul codice!
36. Francesco Giorgio © 2022 Il 62% del peso di una pagina web è rappresentato da immagini 62% 22 Ogni pagina web contiene in media 22 immagini caricate come risorse esterne QUALCHE DATO ALLA MANO https://httparchive.org/
37. Francesco Giorgio © 2022 https://whatismyviewport.com/ DISPLAY SIZE E VIEWPORT SIZE
38. Francesco Giorgio © 2022 PIXEL FISICI e PIXEL CSS: DPR Pixel Fisici pixel gestiti a livello hardware Pixel CSS (o Pixel Logici) pixel riconosciuti a livello software come unità di misura DPR (Device Pixel Ratio) rapporto tra pixel fisici e pixel CSS.
39. Francesco Giorgio © 2022 A COSA ANDIAMO INCONTRO DISPOSITIVI DIVERSI Desktop, Tablet, Mobile ORIENTAMENTO DELLO SCHERMO Orizzontale, Verticale RESPONSIVE Viewport size variabile DPR Retina Display
40. Francesco Giorgio © 2022 UN TEST VELOCE • Utilizzo di formati immagine moderni • Dimensionamento corretto • Utilizzo del lazy loading • Aspect ratio • …
41. Francesco Giorgio © 2022 <img>
42. Francesco Giorgio © 2022 <picture>
43. Francesco Giorgio © 2022 WEBP e ALTRI FORMATI
44. Francesco Giorgio © 2022 RESOLUTION SWITCHING
45. Francesco Giorgio © 2022 RESOLUTION SWITCHING
46. Francesco Giorgio © 2022 RESOLUTION SWITCHING
47. Francesco Giorgio © 2022 ART DIRECTION
48. Francesco Giorgio © 2022 • Supportato nativamente dai browser moderni • Soglie variabili a seconda del tipo di immagine e della connettività • Il 24% delle pagine web su internet utilizza già questa funzionalità LAZY LOADING
49. Francesco Giorgio © 2022 LAZY LOADING
50. Francesco Giorgio © 2022 E PER IL CSS? IMAGE-SET
51. Francesco Giorgio © 2022 E PER IL CSS? IMAGE-SET
52. Francesco Giorgio © 2022 E PER IL CSS? IMAGE-SET
53. Francesco Giorgio © 2022 04. Tutto bello e interessante (forse). Ma a che serve? DIAMO UN SENSO
54. Francesco Giorgio © 2022 #1: LOGO • Rappresentabile con forme geometriche e curve • Numero di colori ridotto • Sfumature semplici o assenti • Piccole dimensioni • Singola occorrenza su ogni pagina del sito
55. Francesco Giorgio © 2022 • File vettoriale di tipo SVG • Nessun problema lato responsive • Sfrutto la cache per il caricamento su ogni pagina del sito #1: LOGO
56. Francesco Giorgio © 2022 #2: ICONA O SIMBOLO • Rappresentabile con forme geometriche e curve • Numero di colori ridotto • Sfumature semplici o assenti • Piccole dimensioni • Singola occorrenza su una sola pagina del sito
57. Francesco Giorgio © 2022 • File vettoriale di tipo SVG • Nessun problema lato responsive • Sfrutto la cache? #2: ICONA O SIMBOLO
58. Francesco Giorgio © 2022 #2: ICONA O SIMBOLO
59. Francesco Giorgio © 2022 DATA URI Permette di inserire il contenuto di un SVG anche molto grande (migliaia di caratteri) in poco spazio, convertendolo in Base64 #2: ICONA O SIMBOLO
60. Francesco Giorgio © 2022 #3: IMMAGINE DI PICCOLE DIMENSIONI • Immagine raster • Piccole dimensioni (350x350px) • Non necessita di Resolution Switching • Nessun dettaglio richiesto
61. Francesco Giorgio © 2022 #3: IMMAGINE DI PICCOLE DIMENSIONI
62. Francesco Giorgio © 2022 JPEG 113 kB JPEG Ottimizzato 40 kB WEBP 33 kB AVIF 29 kB #3: IMMAGINE DI PICCOLE DIMENSIONI
63. Francesco Giorgio © 2022 #4: IMMAGINE SFONDO INTERO • Immagine raster • Grandi dimensioni (1920x1080px) • Resolution Switching • Art Direction
64. Francesco Giorgio © 2022 #4: IMMAGINE SFONDO INTERO
65. Francesco Giorgio © 2022 PNG 1920x1080px 1.8 MB PNG Ottimizzato 1920x1080px 1.6 MB WEBP 1920x1080px 900 kB 1200w => 510 kB 600w => 190 kB AVIF 1920x1080px 420 kB 1200w => 210 kB 600w => 67 kB #4: IMMAGINE SFONDO INTERO
66. Francesco Giorgio © 2022 #5: GALLERIA FOTOGRAFICA • Immagini raster • Medie dimensioni • Molte immagini su singola pagina • Resolution Switching • Art Direction non necessario
67. Francesco Giorgio © 2022 #5: GALLERIA FOTOGRAFICA
68. Francesco Giorgio © 2022 JPEG 16 MB totali 10 secondi JPEG Ottimizzati 9 MB totali 7 secondi con lazy loading 2.5 secondi WEBP (lazy) 5 MB totali 1.9 secondi 1200w 2.7MB 1.4s 600w 1.9MB 1.1s AVIF (lazy) 3.7 MB totali 1 secondo 1200w 2MB 1.2s 600w 900kB 900ms #5: GALLERIA FOTOGRAFICA
69. Francesco Giorgio © 2022 05. Rendiamo tutto facile … come schioccare due dita au·to·ma·tì·ṣmo
70. Francesco Giorgio © 2022 SERVIZI ONLINE: IMGIX • Amazon S3, Google Cloud Storage, Microsoft Azure e qualsiasi risorsa accessibile via URL • Gestisce, ottimizza e distribuisce immagini online automaticamente • Servizio a pagamento (con free plan) • Molteplici funzionalità: ▪ Crop ▪ Compressione ▪ Formati diversi ▪ CDN
71. Francesco Giorgio © 2022 PARAMETRI: q=85 auto=format,compress cs=strip w=400 h=300 dpr=1 fit=crop SERVIZI ONLINE: IMGIX
72. Francesco Giorgio © 2022 SERVIZI ONLINE: IMGIX
73. Francesco Giorgio © 2022 ALTRI SERVIZI ONLINE
74. Francesco Giorgio © 2022 IMAGEMAGICK • Tool di riferimento per la creazione, modifica , ottimizzazione e conversione di immagini • Free e Open Source • Supporta oltre 200 formati di immagine • Multi-thread • Linux, Windows, Mac Os X, iOS, Android • C, C++, GO, Java, Js/Ts, .NET, PHP, Python, R, Rust, Ruby, WebAssembly, ecc
75. Francesco Giorgio © 2022 IMAGEMAGICK
76. Francesco Giorgio © 2022 RISORSE • https://web.dev/fast/#optimize-your-images • https://web.dev/responsive-images/#images_in_markup • https://imagemagick.org/ • https://caniuse.com/ • https://exiftool.org/ • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture • https://developers.google.com/speed/webp
77. Francesco Giorgio © 2022 GRAZIE! francesco@giorgio.dev FRANCESCO GIORGIO