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

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?

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.

@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.

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.

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.

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

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.

@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

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

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

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

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

@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;
}

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?

@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

Le dimensioni che citi non sono eccessive.

Per i FORMATI si consiglia:

1. .gif per pochissimi colori (max 256): scritte, loghi senza sfumature, icone piccole.

2. .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.

Ciao ci sono vari tutorial che puoi seguire. Devi cercare "invecchiamento foto photoshop" su Google. Qui non mi fa postare nessun link.