Le immagini PNG molto grandi animano l'ottimizzazione: jquery

Ho 3 immagini PNG trasparenti di grandi dimensioni (7000 px) che si animano da sinistra a destra. Le prestazioni non sono male, ma non grandiose.

Ho bisogno di aiuto per ottimizzare queste immagini in modo da rendere l'animazione jquery liscia.

Ho provato a dividerli tutti in sezioni (quindi i 10 PNG separati per sfondo) che mi hanno aiutato, ma sono comunque silenziosi.

risposte:

Puoi provare, invece di usare jquery "s animate, usando Animazioni CSS3 che dovrebbe comportare animazioni più fluide.

A partire dal Post del blog di Addy Osmani: Animazioni di transizione CSS3 con jQuery Fallbacks:

Il vantaggio delle transizioni è diversoAnimazioni basate su JavaScript, sono accelerati hardware in determinati browser e dispositivi mobili, risultante in un'animazione generale potenzialmente più fluida di quella che si vorrebbe normalmente esperienza.

È meglio averlo solo come un'immagine, quellail tuo browser esegue solo una richiesta http per ottenere l'immagine e anche l'immagine potrebbe essere compressa meglio e sia più leggera che se la separi in 7 pezzi e ne comprima ognuno, perché ci saranno dati ridondanti su di essi.

Per i programmi per ottimizzare i png, invece di incollare i link qui ti darò due domande con alcuni di questi:

• https://stackoverflow.com/questions/1060763/image-optimizer-for-images-used-on-the-web-jpg-gif-and-png
• ottimo ottimizzatore di immagini che può essere utilizzato?

Vedi anche questo articolo interessante sull'ottimizzazione delle immagini e sui migliori approcci.