Uno dei criteri fondamentali da tenere in considerazione nello sviluppo di un sito web è il tempo di caricamento. Diverse ricerche hanno dimostrato come, nel corso degli ultimi anni, la pazienza dell'utente si sia progressivamente ridotta al crescere delle connessioni veloci: oggi il navigatore attende dai 3 ai 6 secondi per approfittare del contenuto ricercato, prima di abbandonare la pagina e rivolgersi alla concorrenza. E' quindi necessario ottimizzare tutti gli elementi della pagina, partendo dai più pesanti: le immagini. Ma quanto si risparmia ottimizzando una fotografia, in termini di caricamento dal server? (more...)

Continua a leggere Immagini: ottimizzazione e velocità di caricamento delle pagine Web

Categoria: Web Design

Ottimizzare le immagini per il proprio sito web è una necessità tutt'oggi irrinunciabile, nonostante la diffusione di connessioni sempre più veloci. I comuni formati, infatti, sono i principali responsabili del rallentamento nel caricamento delle pagine. Di norma, l'utente attende tra i 3 e i 6 secondi prima di abbandonare il sito e recarsi sui lidi più performanti della concorrenza. Non è però tutto, poiché la fruizione oggi diviene sempre più mobile: per quanto potenti possano risultare smartphone e tablet, la maggior parte dei consumatori ricorre ad abbonamenti con monte traffico mensilmente limitato, la presenza di file troppo pesanti potrebbe quindi rappresentare un deterrente alla navigazione. Quali pratiche possono essere adottate, di conseguenza, su un CMS tanto diffuso quanto WordPress? (more...)

Continua a leggere WordPress: ottimizzare il caricamento delle immagini

Categoria: CMS

La progettazione orientata al web, si tratti della creazione del design di un sito Internet o della semplice produzione di un contenuto, non può ovviamente prescindere dalle immagini. Negli anni sono nati i più svariati formati, alcuni hanno addirittura trovato una seconda vita - si pensi alle GIF - e oggi risultano dei veicoli di comunicazione imprescindibili per l'online. (more...)

Continua a leggere Immagini per il Web: le best practices

Categoria: Web Design

La scelta di immagini qualitativamente elevate è essenziale per la creazione di un sito web di successo. Oltre a valorizzare l'opera di web design, infatti, scatti di buona fattura attirano l'attenzione dell'utente, aiutano ad aumentare il tasso di conversioni e risultano ideali per la promozione di un prodotto o di un servizio. Non sempre, tuttavia, è possibile optare per fotografie uniche e irripetibili, anche per difficoltà di budget. (more...)

Continua a leggere Web design: fotografie stock, professionali o autoproduzione?

Categoria: Web Design

In una realtà sempre più interconnessa, e ormai dipendente dai dispositivi mobile, le immagini diventano il cardine della comunicazione online. Si tratti di necessità personali, di un progetto lavorativo oppure della condivisione di annessi e connessi alla fase di web design, gestire e inoltrare fotografie è una delle attività più frequenti e urgenti della quotidianità. Eppure, al crescere dei bisogni si modificano le modalità di fruizione: non basta più l'inoltro tramite mail e la gestione in locale sul proprio desktop, bensì bisogna approfittare di una lunga serie di servizi online. Quali sono i più importanti, nonché i più affidabili, per gestire in modo semplice e sicuro una mole gigantesca di scatti? (more...)

Continua a leggere Servizi online per gestire le immagini

Categoria: Grafica

Tags:

Dopo la segnalazione di qualche giorno fa sulla conversione di font, propongo questo interessantissimo servizio di conversione tra file. In rete è possibile trovare diversi servizi che ci permettono di effettuare conversioni di questo tipo, ma questo è sicuramente uno tra i più completi e potenti convertitori che ci siano attualmente in circolazione. Convertfiles.com è un servizio gratuito che permette di convertire file compressi, immagini, audio, presentazioni, video e molto altro ancora. (more...)

Continua a leggere Convertfiles.com e la conversione tra file

Categoria: Software e Servizi

Ridimensionare un'immagine facendo ricorso ad HTML e ad attributi come width ed height non è magari una pratica da consigliare, ma ci sono situazioni in cui può essere necessario. A quel punto si pone il problema della qualità  della grafica così trattata, un problema che su IE (sul quale il degrado è particolarmente evidente nelle versioni 6/7) si può risolvere utilizzando nei CSS questa regola: img { -ms-interpolation-mode: bicubic; } Come si vede, non si fa che adottare, preceduto dal prefisso -ms-, uno dei tanti filtri proprietari di Microsoft. Se problemi analoghi si dovessero riscontrare su Firefox, Mozilla prevede invece l'uso della proprietà  image-rendering. Per aggiustare le cose su entrambi i browser la regola potrebbe essere così definita: img { image-rendering: optimizeQuality; /* Firefox 3.6+; default behavior is identical, no need to specify */ -ms-interpolation-mode: bicubic; /* Internet Explorer 7.0; default in IE8+ */ } Il codice è ripreso da questa pagina del Mozilla Developer Center che spiega nei dettagli i termini della questione e tutte le possibili alternative.

Continua a leggere La qualità  delle immagini ridimensionate con HTML

Categoria: Grafica

Lo scenario d'uso ideale è così definito: un form con molti campi di input e che magari necessitano di un'attenta revisione dell'utente rispetto ai contenuti inviati. Nel caso di immagini da caricare, cosa c'è allora di meglio di un'anteprima del file messa accanto al tradizionale campo per l'upload? Ecco la dimostrazione. if (1==1) {document.getElementById("link43569").style.display="none";} L'esempio è accompagnato da tutto il codice necessario per implementarlo. 765qwerty765

Continua a leggere Upload di immagini con anteprima

Categoria: Scripting

Tags: , ,

Una tecnica che ha preso piede dopo l'ottimo lavoro di Gianluca Troiani è l'utilizzo di dimensioni percentuali nel CSS per determinare il layout delle immagini. Questa tecnica richiede due passaggi: trasformazione dell'immagine in un elemento di blocco; dichiarazione di una larghezza in percentuale per l'immagine. (more...)

Continua a leggere Immagini in percentuale con i CSS: i dettagli

Categoria: CSS

Tags: ,
di napolux

Ottimizzare le immagini per il web è un'arte. Difficile spesso ottenere una buona resa associata a dimensioni accettabili per il download. Yahoo! ha da un po' messo a disposizione dei suoi utenti Smush It, un tool che permette di ottimizzare per il web un'immagine qualsiasi pescata direttamente dall'url di origine. Ad ottimizzazione avvenuta Smush It presenterà  una piccola preview, l'url per il download dell'immagine ottimizzata e un rapporto sullo spazio "guadagnato".

Continua a leggere Smush it! Ottimizzazione immagini da Yahoo!

Categoria: Grafica