Che significa – ottimizzare le immagini per il web?
Parliamo di modifiche con i file media, riduzione di dimensioni dell’immagine per adattarla alle SERP. Per quale motivo lo dobbiamo fare?
- Velocità di caricamento della pagina
- Miglioramento del punteggio SEO
- Riduzione di utilizzo dello spazio sul server
Nome e formati immagine
Iniziamo dal nome, quando un immagine viene inserita, le SERP come Google, non possono guardare le immagini però leggono il nome, indicare un nume che più si avvicina al argomento trattato, sicuramente si rivelerà una strategia vincente.Formato dell’immagine – è un altro fattore molto importante
- Per le icone si utilizza il vettoriale, quindi sicuramente file di tipo SVG
- Il formato JPG è sicuramente la soluzione più adatta perché pesa di meno rispetto agli altri formati immagine
- Se vuoi uno sfondo trasparente – usa PNG ma sappi che peserà di più rispetto a JPG
Ottimizzazione lato codice
Dimensioni esatte, si sicuramente se stai utilizzando un CMS, l’immagine caricata viene automaticamente adattata a tutti dispositivi web, ma è sempre meglio caricare l’immagine con la dimensione esatta del blocco in cui andrà inserita.
Non ci scordiamo di utilizzare gli attributi “height” e “width”, utilizzando questi attributi agevoliamo il browser alla lettura delle immagini e quindi velocizziamo il caricamento della pagina.
Inoltre l’attributo “alt” aiuterà a dimostrare cosa si trova nell’immagine, invece “title” il titolo.
Ottimizzazione g-zip
Sicuramente aiuterà l’abilitazione della funzione g-zip sul tuo sito web per facilitare il caricamento delle pagine web. Si fa dal file .htaccess. Qui ti lascio l”abilitazione g-zip per WordPress.
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
Micro Markup
Nel caso in cui tu stia utilizzando un blog o fai degli annunci via social, é importante utilizzare le micro markup, ti permettono di inserire l’immagine nelle preview con la qualità originale dell’immagine.
Qui possiamo selezionare Open Graph Protocol e Schema.org
