Archivio tag: png

Di PNG, JPEG e compromessi

mercoledì 28 aprile 2010 - 14:50

di Cesare Lamanna

Nei giorni scorsi, quando Google ha annunciato che la velocità  di caricamento delle pagine è ufficialmente un fattore che influisce sul PageRank, in molti hanno fatto notare un paradosso: l'intervento di Big G arriva in un momento in cui la tendenza prevalente va nella direzione opposta a quella sintetizzabile nel binomio leggerezza/velocità . Data per scontata la disponibilità  di connessioni veloci e banda larga o larghissima, molti sembrano aver di fatto dimenticato certe pratiche come quella dell'ottimizzazione della grafica, per esempio.

Così Jeffrey Zeldman:

Invece di immagini JPEG di media qualità  con i loro dettagli meno importanti spazzati via

Continua a leggere Di PNG, JPEG e compromessi

Tags:, , , ,

Categoria: png | Permalink | Commenta

Ottimizzazione estrema di immagini PNG

lunedì 21 settembre 2009 - 8:27

di Cesare Lamanna

Vi giro da questo post sul blog di SitePoint la segnalazione di PunyPNG, un tool online per la compressione e l’ottimizzazione di immagini in formato PNG, JPEG e GIF.

Particolarmente adatto al formato PNG, PunyPNG implementa le tecniche di compressione a suo tempo presentate da Sergey Chikuyonok in un articolo di Smashing Magazine.

Se pensate che valga sempre la pena risparmiare una manciata di kb, può essere un’ottima alternativa ad altri strumenti tradizionalmente usati per queste operazioni di compressione sulle immagini PNG.…

Continua a leggere Ottimizzazione estrema di immagini PNG

Tags:,

Categoria: png | Permalink | Commenta

PNG su IE6 con Unit PNG Fix

giovedì 23 luglio 2009 - 8:18

di Cesare Lamanna

Tra le soluzioni disponibili per poter sfruttare anche su IE6 i vantaggi del formato PNG, va segnalata anche la Unit PNG Fix rilasciata da Unite Interactive.

Lo script è leggerissimo (poco più di 1kb) e proprio in questi giorni è stata rilasciata l’ultima versione con due importanti novità : intanto, ora il fix viene applicato alle immagini prima del caricamento della pagina, cosa che evita eventuali problemi di flickering; inoltre, usando una semplice classe CSS sulle immagini che desideriamo, è possibile applicare lo script in modo selettivo. Si può cioè scegliere con questo meccanismo se applicarlo a tutte le PNG …

Continua a leggere PNG su IE6 con Unit PNG Fix

Tags:,

Categoria: png | Permalink | Commenta

DD_belatedPNG

venerdì 12 dicembre 2008 - 9:18

di Riccardo Degni

Dopo lo script DD_roundies visto nel
posto DD_roundies: un’altra soluzione per arrotondare gli angoli, andiamo ora ad analizzare un’altra soluzione dello stesso autore. Si tratta di DD_belatedPNG.

Permette di “alleviare” l’ormai famoso problema presentato da Internet Explorer 6 per quanto riguarda la gestione delle immagini in formato .png. Lo script non utilizza il filtro MSIE AlphaImageLoader e dovrebbe dunque funzionare con successo se usata con le proprietà  CSS background-repeat e background-position, oltre al normale attributo background.

DD_belatedPNG è rilasciato sotto licenza MIT ed è documentato, scaricabile e visibile in azione dirrettamente nell’home page.…

Continua a leggere DD_belatedPNG

Tags:,

Categoria: png | Permalink | Commenta

Sull’uso delle PNG

giovedì 8 maggio 2008 - 8:20

di Riccardo Degni

La grande potenza del formato .png è data dal supporto della trasparenza, un fatto che permette di creare immagini per il web che si adattano perfettamente a qualsiasi sfondo: che sia formato da gradienti o colori sparsi, che venga modificato tramite Javascript o meno, il risultato è sempre perfetto.

Le immagini png sono infatti la scelta più diffusa per quanto riguarda le rifinuture delle finestre modali, i loghi adattivi, gli sfondi trasparenti e cosi via.

Purtroppo, c’è un ostacolo alquanto fastidioso che frena per certi versi l’adozione di questo formato: il suo nome è Internet Explorer 6. Quest’ultimo infatti, …

Continua a leggere Sull’uso delle PNG

Tags:,

Categoria: png | Permalink | Commenta

Sperimentazioni con il background

martedì 4 marzo 2008 - 9:10

di Alessandro Fulciniti

Le PNG semitrasparenti sono da sempre uno strumento potente per ottenere
effetti grafici accattivanti e altrimenti impossibili. Ecco due tutorial
molto ben fatti sul loro uso creativo.

In Doing strange things to CSS Backgrounds su Sitepoint viene mostrato come agendo sulla background-position sia possibile ottenere differenti velocità  di scorrimento orizzontali degli sfondi (qui l’esempio).

Nel recente How to recreate SilverbackÂ’s Parallax
su Vitamin viene spiegato come ottenere un effetto tridimensionale come quello di Silverback grazie a tre sfondi PNG e poche regole CSS. Per notare l’effetto, anche in questo caso vi basta stringere o allargare la finestra del browser.…

Continua a leggere Sperimentazioni con il background

Tags:, , ,

Categoria: png | Permalink | Commenta

Firefox 3 e le Animated PNG

lunedì 28 gennaio 2008 - 10:36

di Riccardo Degni

Come annunciato tempo fa anche su Edit, la versione numero 3 del browser di casa Mozilla avrà  il supporto per un nuovo tipo di formato grafico: le Animated PNG (APNG). Si tratta di una versione “evoluta” del formato PNG che supporta, appunto, la possibilità  delle animazioni.

Per lanciare al meglio il nuovo formato, è nato ora un sito ad hoc: animatedpng.com. Oltre a link e risorse offre la possibilità  di creare online sequenze di PNG animate con APNG Assembler (le immagini che compongono i vari frame dell’animazione vanno inserite in un file zip da uploadare). Non mancano gli esempi …

Continua a leggere Firefox 3 e le Animated PNG

Tags:, ,

Categoria: png | Permalink | Commenta

Effetto gradiente con i CSS e immagini PNG

lunedì 21 gennaio 2008 - 7:32

di Cesare Lamanna

Non so se è una tecnica completamente nuova. Fatto sta che è davvero semplice da implementare, l’ho capita persino io :P.

CSS Gradient Text Effect è pensata soprattutto per titoli e intestazioni, consente di creare facilmente un effetto gradiente sul testo usando i CSS, una piccola PNG trasparente e un pizzico di creatività . Il breve tutorial spiega anche come raggiungere la compatibilità  con IE6, browser notoriamente privo del supporto per questo particolare tipo di immagini. Dal momento che nel markup è necessario ricorrere ad uno span vuoto, c’è pure la soluzione per i puristi del markup semantico: è infatti …

Continua a leggere Effetto gradiente con i CSS e immagini PNG

Tags:, , ,

Categoria: png | Permalink | Commenta

Bookmark di Novembre

lunedì 3 dicembre 2007 - 7:41

di Alessandro Fulciniti

Ci sono davvero moltissime segnalazioni che per mancanza di tempo o
spazio non passano qui sul blog. Alla maniera di Smashing Magazine,
vorrei introdurre un appuntamento mensile dei bookmark, così da proporvi
le segnalazioni interessanti del mese appena passato che non hanno ancora trovato
un ritaglio nei vari post del blog.

Dei molti bookmark che ho raccolto a novembre vi presento i 20 che
maggiormente meritano una segnalazione: dal markup ai CSS, dal web design
all’ispirazione… Ecco la lista:

Continua a leggere Bookmark di Novembre

Tags:, , , , , , , , , , , , , ,

Categoria: png | Permalink | Commenta

Creare PNG animate con Firefox 3

mercoledì 29 agosto 2007 - 10:07

di Cesare Lamanna

Tra le novità  in arrivo con Firefox 3, c’è anche il supporto ad un nuovo formato grafico che potrebbe finalmente sostituire le GIF animate: APNG (Animated PNG). I vantaggi sono gli stessi che offre PNG rispetto a GIF, a partire dal supporto per la trasparenza parziale dei pixel.

Un bel post apparso su Mozilla Labs è l’ideale punto di partenza per saperne di più e per gustarsi dal vivo qualche esempio (bisogna installare l’ultima alpha release di Firefox 3).

Ma non è tutto. L’autore del post (Justin Dolske) ci regala anche APNG Edit extension, un’estensione in grado di …

Continua a leggere Creare PNG animate con Firefox 3

Tags:, ,

Categoria: png | Permalink | Commenta