Image Slicing and CSS Sprites

Posted on by

Last update: December 29, 2011

It’s often discussed whether or not slicing  images  makes them load faster on the web. In the past images slicing was used to  benefit from human perception that makes it seem like the page is loading faster when small pieces are displayed in sequence.  In reality  load time is increased due to the additional simultaneous requests to the web server. The total file size of sliced images is reduced if each slice is compressed to optimal settings.

Today, the contrary of slicing  is done. Separate graphics are grouped in one large image collection. It’s far easier on the server to serve a single large image than many small ones and it’s faster for a web browser to load such an image.

Problems related to css sprites are :

  • No encapsulation: If you want to change one image, you have to change the sprite
  • Don’t degrade: If the browser don’t support CSS, you are in trouble
  • Memory footprint: When sprites get loaded into the browser, they are stored uncompressed and can take up a huge memory
  • read/maintain/modify your CSS. It can be difficult to remember the exact pixel offsets within the sprite

Here is a list with links to useful webpages about related topics :

Dewplayer : lecteur mp3 en flash

Posted on by

Alsacréations, une agence web à Strasbourg en Alsace, spécialisée dans la conception de sites internet conformes aux standards internationaux W3C, offre depuis plusieurs années un lecteur audio mp3 en Flash par Dew, simple à installer et à utiliser.

Appelé Dewplayer, ce lecteur est distribué sous licence Creative Commons, son utilisation est libre et gratuite même dans un cadre professionnel ou commercial.

Un générateur de code XHTML est disponible sur le site qui va produire un code à copier-coller selon les besoins des usagers. L’utilisation de swfobject est recommandée pour l’intégration du lecteur.

Le pilotage du lecteur par Javascript est possible et il y a de nombreuses options disponibles. J’utilise le lecteur depuis des années avec succès. La version la plus récente est 1.9.6.

CacheViewer add-on for Firefox browser

Posted on by

CacheViewer 0.6

CacheViewer 0.6

CacheViewer 0.6, developed by benki, is a GUI front-end of “about:cache”, an add-on for the Firefox browser.

This plugin allows searching and sorting memory and disk cache files. A very useful tool, I installed it today.

To clear the cache, select Clear Recent History… from the Tools menu in the Firefox browser, select the desired range from the Time range to clear drop-down menu (to clear your entire cache, select Everything), choose what history elements to clear from Details and click clear now.

Gravatar : a Globally Recognized Avatar

Posted on by

last update : 24 August 2010

My Gravatar

My Gravatar

Gravatars are images that follows users from site to site appearing beside their name when they do things like comment or post on a blog. Avatars help identify their posts on blogs and web forums.

I created today my Gravatar using the  picture appearing at the left of this text.

To display the gravatar for Leslie’s Artgallery, the following link can be used:

http://www.gravatar.com/avatar/a679fe148cc868a002e1669b9b788379?s=120

The pixelsize of the displayed square gravatar can is defined by the parameter s.

For SSL connections, the link is the following:

https://secure.gravatar.com/avatar/a679fe148cc868a002e1669b9b788379?s=400

Uploading and hosting public and private videos

Posted on by

last update : october 2010

The following websites allow users to upload and host their videos for public or private views:

  • YouTube (Google) : up to 2 GB in size; up to 15 minutes in length; HD resolution
  • Google video : service has been discontinued
  • Picasa (Google) : up to 1 GB in size; recommended resolution: 640 x 480 pixels; recommended ratio: 4:3; recommended frame rate: 30 frames per second;  videos are converted into a flash format (.FLV) with Standard Quality (320 x 240 pixel) or High Quality (480 x 360 pixels) playback
  • flickr (Yahoo) : up to 150 MB in size; up to 90 seconds in length; HD resolution (720 horizontal lines of resolution in the video); free and pro
  • Vimeo : free and pro ($59.95 a year)
  • LongTail Video (bits on the run) : pro (price calculator)
  • PhotoBucket : up to 500 MB; up to 10 minutes

Reset the auto increment value for a MySQL table

Posted on by

To reset the auto increment value of a MySQL auto incremental primary key to a new value, either higher or lower than what it would otherwise next be, use the following command :

ALTER TABLE mytable AUTO_INCREMENT = xx

Its even more easy to change it in phpMyAdmin. Select mytable, click the “Operations” tab, change the displayed current next auto increment value and then click the “Execute” button.

Tilt-shift Photography : Miniature Fakes

Posted on by

Tilt-Shift miniature faking is a creative technique whereby a photograph of a life-size location or object is manipulated to give an optical illusion of a photograph of a miniature scale model.

Altering the focus of the photography in Photoshop simulates the shallow depth of field normally encountered with macro lenses making the scene seem much smaller than it actually is.

In addition to focus manipulation, the tilt-shift photography effect is improved by increasing color saturation and contrast, to simulate the bright paint often found on scale models.

Most faked tilt-shift photographs are taken from a high angle to further simulate the effect of looking down on a miniature. The technique is particularly effective on buildings, cars, trains and people.

The following websites provide useful informations and tuotials about Tilt-Shift miniature faking :

Some outstanding tilt-shift photos published on flickr under a creative common licence are listed below:

There are currently 142 groups on flickr dealing with tilt-shift. My favorite pools are :

SoundFonts (.sf2)

Posted on by

SoundFont, a registered trademark of E-mu Systems, Inc., is a name that collectively refers to a file format and associated technology to synthesize audio in the context of computer music composition. The exclusive license for re-formatting and managing historical SoundFont content has been acquired by Digital Sound Factory.

A SoundFont file, or SoundFont bank, contains one or more sampled audio waveforms (or samples), which can be re-synthesized at different pitches and dynamic levels. SoundFont banks are related to MIDI devices and can be seamlessly used in place of General MIDI (GM) patches in many computer music sequencers.

The original SoundFont file format was developed in the early 1990s by E-mu Systems and Creative Labs (used in Sound Blaster AWE32). Files in this format conventionally have the file extension of sbk. The SoundFont 2.0 version was released in 1996 and was fully disclosed as a public specification to make it an industry standard. New versions up to 2.4 have been relased in the past years and the new SoundFont files conventionally have the file extension sf2.

There are other sound formats available, e.g. The DownLoadable Sounds (DLS) standardized by the MIDI Manufacturers Association (MMA),  the DLS-Level 2 and the Structured Audio Sample Bank Format (SASBF )standardized by he MPEG standards body in collaboration with MMA and MIT and  proprietary formats developed by Yamaha and other music companies. Nevertheless the sf2-soundfonts became a de-facto standard and are widely used today.

There are a lot of websites available that offer free and commercial sf2 soundfonts :

The following tools are best suited to use SoundFonts :

  • SynthFont : a free midi file player using SoundFonts
  • Viena : a free SoundFont editor
  • FluidSynth : an open source real-time software synthesizer used in several music applications
  • Gervill : a software sound synthesizer for use with the Java Sound API
  • SFPack and SFArk : archivers for SoundFont banks which use different compression techniques

Inline (binary) images, data:URIs and canvas tags

Posted on by

In a typical webpage, images are not embedded in the HTML code, but stored as separate files on the server and requested by individual HTTP GET commands. For different reasons it would be useful to include images in the main web document :

  • to speed up the rendering of the webpage in the browser : 80% of the end-user response time is spent on the front-end by downloading all the components in the page: images, stylesheets, scripts, Flash, etc
  • to minimize HTTP requests and to reduce trafic costs (e.g. when using an Amazon webservices pricing model)
  • to display images created by code (e.g. sparklines)
  • to display images retrieved from a database or from a REST service

In august 1998, L. Masinter from Xerox Corporation published a Request for Comment (RFC 2397) for a Uniform Resource Locator (data:URI) scheme that provides a way to include data in line in web pages as if they were external resources. Although the IETF never formally adopted it as a standard, the HTML 4.01 specification refers to the data URI scheme and data URIs have been implemented in most browsers, but not in Internet Explorer before version 8, which is the major problem of this solution.

An example of a red dot picture embedded in HTML is given hereafter :

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

Data URIs may contain whitespace for readability.

Another way to embed images in HTML code is the new element <canvas> which is  part of HTML5 and allows for dynamic scriptable rendering of bitmap images. A tutorial about the canvas tag is available at the Mozilla developer center. As for the data:uri, the canvas tag is not supported by Internet Explorer. ExplorerCanvas developed by Erik Arvidsson brings the same functionality to Internet Explorer. To use this solution, web developers only need to include a single script tag in their existing web pages.

<head><!--[if IE]><script src="excanvas.js"></script><![endif]--></head>

To get the code working, the following additional javascript is needed :

var el = document.createElement('canvas'); G_vmlCanvasManager.initElement(el);var ctx = el.getContext('2d');

The classic solution to display binary images embedded in HTML code is the following :

<html>
<body>
<img src="myimage.php">
</body>
</html>

The corresponding code for myimage.php is :

<?php
header('Content-type: image/jpeg');
// Create image
$image = imagecreatetruecolor($width,$height);
// pick color for the background
$bgcolor = imagecolorallocate($image, 100, 100, 100);
// fill in the background with the background color
imagefilledrectangle($image, 0, 0, $width, $height, $bgcolor);
// output image to the browser
imagejpeg($image);
// delete the image resource
imagedestroy($image);

Be sure that there is no leading whitespace or blank line before the <?php tag, otherwise the displayed result will be of the form

Garbage

One of the first cross-browser methods for incorporating images into self-contained HTML documents was published by Benn P. Herrera in march 2005.  Two years  ago there was not yet a better method avilable. Today the <canvas> tag and the ExploreCanvas JavaScript seems to be the most promising solution to embed binary images in HTML code.