• User Attivo

    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 😉


  • User Attivo

    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?


  • ModSenior

    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.


  • User Attivo

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


  • User Attivo

    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.


  • Super User

    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.


  • User Attivo

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


  • User Attivo

    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.


  • Super User

    @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

  • ModSenior

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


  • ModSenior

    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


  • ModSenior

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


  • ModSenior

    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


  • Super User

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

  • ModSenior

    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?


  • Super User

    @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


  • User

    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.


  • User

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