Finalmente una domanda interessante...
- conviene caricare sempre la stessa e fare il resize con codice html cosicché carico la stessa immagine una sola
volta e quindi il peso di tutte le immagini uguali è pari a quello di un'immagine sola (ovvero i 15k nell'esempio)
oppure mi carica 4 volte l'immagine e quindi il tutto pesa 15*4=60k?
In questo modo viene scaricata l'immagine solo una volta, fai 15k.
Però se vuoi ragionare nell'ottica di ottimizzare la velocità del sito / l'uso delle risorse devi metterti nei panni del visitatore.
Immagina una lista di prodotti, per esempio 10: il visitatore vede una panoramica dei prodotti e dall'anteprima dell'immagine si fa un'idea. Probabilmente ne andrà a visualizzare 2-3, magari 4.
Ora se tu nel listato dei prodotti inserisci 10 immagini in piena qualità, gli hai fatto scaricare inutilmente 6-8 immagini di grande formato (fai tu il calcolo).
- in quest'ultimo caso mi converrebbe diminuire la dimensione (e quindi il peso) di quelle più piccole e faccio
caricare 4 immagini "diverse" (solo per dimensione)?
Sicuramente ti conviene creare immagini di anteprima leggere e immagini più grandi per i dettagli.
Tieni anche conto che nella ipotetica pagina con i dettagli, se inserisci anche l'immagine in formato piccolo già caricata alla pagina precedente, quella non deve essere ricaricata perchè - come nel primo caso - è nella cache del browser.
PS. per le immagini più grandi ti consiglio di utilizzare la modalità jpeg progressiva.