Skip to main content

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

Strumenti di ottimizzazione

Leave a Reply

Cosa rallenta il tuo sito web?