Peso di immagini

owen

Peso di immagini

Ciao a tutti, sto facendo un sito che vorrei fosse il + veloce e accessibili possibile, quindi sto limitando al max l'uso di immagini. In tutto sono circa 101 kb di immagini (alcune caricate da database) + testo... secondo voi è troppo pesante è può rallentare il caricamento della pagina o neanche si nota?? e ci sono dei formati di immagini migliori di altri? grazie!

Sito:
in costruzione

Obiettivi del sito:
che sia veloce al caricamento per una migliore consultazione

Argomento o settore da studiare:
Grafica

Descrizione di particolari problematiche o di specifiche richieste:
peso di immagini

gemedj89

Non è proprio eccessivo , dipende poi quante sono e di che dimensioni .
Per quanto riguarda i formati a seconda della foto ( 256 colori) a volte conviene usare iò gif o png8 .

develup

Secondo me, 100kb scarsi di immagini sono anche troppo pochi
Nel web vengono tralasciati spesso i testi e vengono notate quasi solo ed esclusivamente le immagini.
Capisco che vuoi creare un sito veloce, e sono del tuo stesso parere considerati gli standard di Google, ma se vuoi fare qualcosa di utile protesti implementare una navigazione in ajax ( che non deve ricaricare tutta la pagina), minimizzare i file js e css, e lasciare anche qualche bella immagine di buona se non ottima qualità agli utenti del sito.
Ricorda che anche l'occhio vuole la sua parte!!

Lorenzo

lucabartoli

esistono altri sistemi per rendere veloce il caricamento di un sito, rispetto al rinunciare alle immagini.
Sto realizzando un sito in questo momento di cui la homepage ha uno slideshow abbastanza grande e diverse immagini nel css e pesa in totale 168.2kB

Installa firefox e aggiungi i plugin firebug, yslow e pagespeed e segui i consigli... non avrai bisogno di rinunciare alle immagini

owen

Installa firefox e aggiungi i plugin firebug, yslow e pagespeed e segui i consigli... non avrai bisogno di rinunciare alle immagini
ehm scusa l'ignoranza... ma a cosa serve scaricare dei plugin per il mio browser se gli utenti che visiteranno il sito non avranno quei plugin?

marcocarrieri

Credo si riferisca al fatto che attraverso i consigli di tale plugin, vedi page speed puoi salvare eventuali immagini gia compattate, vedere dove velocizzare il caricamento ecc...

Dopo ognuno vedra il sito con il proprio browser naturalmente.

lucabartoli

@marcocarrieri said:

Credo si riferisca al fatto che attraverso i consigli di tale plugin, vedi page speed puoi salvare eventuali immagini gia compattate, vedere dove velocizzare il caricamento ecc...

Dopo ognuno vedra il sito con il proprio browser naturalmente.

Grazie Marco, oggi non ho fatto in tempo a rispondere...

Comunque si, mi riferivo proprio al fatto che quei plugins forniscono informazioni importantissime per velocizzare il sito (fanno un'ottima analisi e offrono soluzioni e risorse) e forniscono anche delle scorciatoie per avere subito a disposizione css e javascript compressi, immagini ridotte all'osso senza perdita, ecc.

microcipcip

e ci sono dei formati di immagini migliori di altri?
Ogni volta che devi salvare un immagine devi essere consapevole delle differenze che esistono tra gif, jpeg e PNG. Scegliendo il formato giusto e giocando sulle impostazioni di compressione puoi ottenere dei risultati sorprendenti.

Se utilizzi i programmi Adobe per salvare le immagini, ti consiglio di provare a salvare i file con Fireworks anzichè con Photoshop perchè ti permette di diminuire ulteriormente le dimensioni.

E per finire, 100kb sono assolutamente trascurabili e non influenzano affatto sulle prestazioni del sito.

ayrton2001

100 KByte non sono troppi. Punterei maggiormente su un sistema di caching delle immagini, utilizzando le immagini che riterrei utili per gli utenti a prescindere dal peso complessivo.

owen

scusa la poca competenza ma cos'è un sistema di caching delle immagini?

franmat

Ciao, oltre alle valide segnalazioni, ti consiglio se usi photoshop il comando "salva per web" (Ctrl+shift+Alt+s) nella schermata che ti comparirà avrai la pienissima padronanza del peso e di conseguenza nitidezza dell'immagine che stai salvando.

ayrton2001

@owen said:

scusa la poca competenza ma cos'è un sistema di caching delle immagini?
In poche parole è un sistema che memorizza i dati in locale in modo da non dover rifare il download.
Si puo usare anche con css e js.
In pratica un utente entra nel tuo sito, senza un sistema di caching per ogni pagina che apre del tuo sito riscarica immagini, css, js, etc...
Invece se forzi il caching delle immagini l'utente scaricherà l'immagine una sola volta.
Vantaggi:

maggiore velocità
minore banda utilizzata

marcocarrieri

E il tutto si attiva come? Via Php? ASP?
Cambia vero se uno ha un host cone IIS o Apache.

vnotarfrancesco

Lato server se usi Apache puoi usare questi comandi da inserire nel file .htaccess.

<FilesMatch "\.(jpg|jpeg|png|gif|css|js)$">
Header set Cache-Control "max-age=37739520, public"
</FilesMatch>

Con IIS non lo so.

Un'altra tecnica, molto più potente perché permette di mettere in cache non solo le risorse come immagini e script è quella di usare le tecniche di WebStorage (definizione Google) dove puoi salvare parti della pagina, dati di sessione, anche creare record di un database.

Valerio Notarfrancesco

marcocarrieri

Purtroppo io ho un mix... anche per colpa mia...
Php su IIS6...
Volevo aumetarmi il punteggio di page speed...

vnotarfrancesco

Sicuramente si potrà fare anche con IIS, vediamo se qualcuno lo sa. Nel frattempo puoi usare le tecniche di webstorage che sono lato client.

Valerio Notarfrancesco
[URL=http://www.giorgiotave.it/forum/gt-world/101972-forum-gt-disponibile-alle-versioni-per-telefoni-cellulari.html]Postato via Mobile

ayrton2001

@marcocarrieri said:

E il tutto si attiva come? Via Php? ASP?
Cambia vero se uno ha un host cone IIS o Apache.

Anche tramite php. Se cerchi ne trovi diversi di script. Ti copio il primo che ho trovato (non testato):


$fn = 'images/my_image.png'; // path
$headers = getHeaders();
header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($fn)).'  GMT', true, 200);
header('Content-Length: '.filesize($fn));
$expires = 60*60*24*30; // 1 month
header("Pragma: public");
header("Cache-Control: public, maxage=".$expires);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . '  GMT');
header('Content-Type: image/png');
print file_get_contents($fn);

function getHeaders()	{
    $headers = array();
    foreach ($_SERVER as $k => $v){
        if (substr($k, 0, 5) == "HTTP_"){
            $k = str_replace('_', ' ', substr($k, 5));
            $k = str_replace(' ', '-', ucwords(strtolower($k)));
            $headers[$k] = $v;
        }
    }	
    return $headers;
}

marcocarrieri

Ma devo indicare per ogni immagine questa riga?
$fn = 'images/my_image.png'; // path
print file_get_contents($fn);

Non si puoi fare qualcosa di dinamico? Per tutte le immagini qualsiasi estensione esse siano?

ayrton2001

@marcocarrieri said:

Ma devo indicare per ogni immagine questa riga?
$fn = 'images/my_image.png'; // path
print file_get_contents($fn);

Non si puoi fare qualcosa di dinamico? Per tutte le immagini qualsiasi estensione esse siano?

Soluzione veloce:
nell'HTML anzichè inserire /images/my_image.png puoi inserire /myimage.php?img=immaginedarichiamare

Soluzione elegante:
con .htaccess fai puntare tutte le immagini al file /myimage.php

studioemozionale

Le dimensioni che citi non sono eccessive.

Per i FORMATI si consiglia:

.gif per pochissimi colori (max 256): scritte, loghi senza sfumature, icone piccole.
.png: ottimo anche per molti colori e supporta le trasparenze (se lo ritagli e lo applichi si vede solo l'immagine senza rettangolo intorno come nelle gif o jpg).

2.jpg: ottime per le fotografia e sfumature di colore. con photoshop è possibile comprimere vedendo subito il livello di "posterizzazione". in un sito che ho creato per un fotografo per esempio ogni foto ho dovuto calibrarla a mano per ottenere il massimo della qualità e della compressione.