Elastic Images
I actively promote elastic design, so the next step is elastic images. That is images that are proportional to your layout. So here is a little experiment. Apologies to RSS readers, I have yet to work out how not to send images via RSS. If you are on the site, see how the images adjusted to fill the space, on both the summary page and post page, by either dragging the browser window.
One the left is one of my favourite images I took early in my time as rock and roll photogragher, Tim Underwood of the Rosemary Beads in 1995. The photo on the right, was one of my last, Joe Algeri smashing his fake Rickenbacker in 1999. Between 1995 to 99 I went to a few hundred gigs and took some 15,000 photos using 35mm film and wrote reviews of most of those gigs for Bubblehead
My dark past out of the way, onto elastic design, if you change the size of the page, by either dragging your browser window or changing the font size. The photos remain proportional to the width of the page and font size (though with the use of SIFR you have to refresh the page to get the heading right). This is done by defining the image size in ems. I did that in the style sheet so that not matter which type of page you see the image on in this blog it will always fill the space.
The disadvantage, you are in the hands of browsers in the how the handled the resizing of the images, most do a good job, a few not so good. Plus you need to provide high quality images, for example the two used here are 40kb in size, if they were fixed size you could get away with 12kb images.
November 20th, 2005 at 10:30 am
Hi Nick,
Wandered into here while following links… that’s a cool concept (ie, elastic images).
See you at OSIG
Donna
November 21st, 2005 at 12:10 pm
Nice!
I assume you accomplish this via JavaScript?
November 21st, 2005 at 12:11 pm
Now, that I have read the rest of the post, I can see you do it in CSS (I’ll learn to read one day) :)
November 23rd, 2005 at 3:06 pm
Myles, you were half right, the page resizing when you drag the window is done by javascript: it is done by the dozen lines or so in fontsize.js .
The rest is pure CSS, depending on which type of page your are viewing the images are either on a full width page 37.333em high 28em wide, or on a page with a right hand column 24em high and 18em wide.
November 8th, 2006 at 2:06 am
were is the pictures of rosemary beads
Nick: It is a photo of Tim Underwood, from the now defunct band The Rosemary Beads
March 13th, 2007 at 4:25 pm
[…] Recientemente estuve buscando algún posible javascript que pudiera redimensionar el texto en función del tamaño de la ventana, y bueno encontré algun ejemplo interesante, aunque lo que más me alucinó fue encontrar una página que además de redimensionar el tamaño del texto en función del tamaño de la ventana, además redimensiona también las imágenes. ¡¡ No es alucinante!! Pues en este otro ejemplo podéis verlo. Lo dicho ¡Alucinante! ¡viva el javascript! […]
March 22nd, 2007 at 7:34 pm
[…] http://nickcowie.com/2005/elastic-images/ […]
April 18th, 2007 at 6:40 pm
[…] Para los tamaños de las cajas de texto o los divs y las fuentes existen las unidades relativas pero, ¿y para las imágenes? ¿Las imágenes no pueden cambiar de tamaño? En la página de Nick Cowie he encontrado una forma de hacerlo bastante sencilla, aunque no exenta de desventajas. Se trata de dimensionar la imagen con unidades relativas, como se hace con las capas o fuentes. […]
August 10th, 2007 at 9:01 am
[…] Elastic images should be in multiples of 1.5em. […]
June 26th, 2008 at 5:31 am
2 Words: OUTLINE FONTS! — The NEXT ECHELON in elastic web design.
Fonts defined by equations ELASTICIZE PERFECTLY to all resolutions without need for anti-aliasing (set:off for large # of machines — to my abiding horror.) A bit of FLASH (freely circulating) will snap-in a CHOICE outline font (in copious circulation) while expending only a few kilobytes.
SWF Images = defined by equations = Outline Fonts
Unlocking your perfection:
————————-
Opera has the most advanced extensible rendering engine known to man. Download it. Hit [+] & [-]. See your glory, Sir.
Great Minds Think Alike.
% % PS % %
Make “comments” POP in all browsers: replace with
June 26th, 2008 at 5:35 am
Refinement
————————–
Make comments POP in all browsers:
Replace alt=“alt text” with title=“comment text” — inside tags.
June 26th, 2008 at 5:49 am
Firefox: Hit Control [+] & [-]…
June 26th, 2008 at 5:50 am
Flash to snap-in an Outline Font = Perfection.
June 26th, 2008 at 6:01 am
Thought my other comment was deleted… Apologies for reiteration (above.)
Opera has a “fit to window” width feature — the interesting distinction.
June 26th, 2008 at 6:13 am
:::::About White Backgrounds::::::::::
White is for paper.
On screen, white = staring at a light bulb.
So many other hues, yet, so-little variety.
Respect the eyes — people of the internet — choose a color.
June 26th, 2008 at 6:25 am
Avoiding white is also future-friendly.
OLEDs and other advancing display technologies treat black/white smarter.
On an OLED display: a 1in x 1in image on an all-black background uses only as much battery as a 1in x 1in display (irrespective of the actual screen real-estate.) Darker pixels = lower power consumption, in the future.
June 26th, 2008 at 6:28 am
FLASH is the FUTURE.
June 26th, 2008 at 6:34 am
Why a multiple of 1.5?
An approximation of 1.6180339887 –The Golden Ratio?
June 26th, 2008 at 6:35 am
Perhaps: All images a multiple of 1.6 ?
June 26th, 2008 at 8:45 am
Mogul I am old school 35mm photographer hence the 3:2 ratio.
June 27th, 2008 at 1:59 am
Photos are Surreal. Much Respect for Old School.
I’ll try not to run-away with my comments. I really need my own blog (Sigh).
June 27th, 2008 at 2:21 am
BUBBLEHEAD adj.
A person convinced that there is a real estate bubble and it is about to burst. Eagerly spouts off “wisdom” regarding this real estate bubble to anyone who will listen.
June 27th, 2008 at 2:24 am
Actually, a noun.
Copied From:
http://www.urbandictionary.com/define.php?term=bubblehead
June 27th, 2008 at 8:58 am
RE Mogul, you could do with your own blog or micro-blogging (ie twitter or similar). It is a little difficult to follow your comments around this blog but I will try.
Bubblehead was the name given to a local music website create by Ang Chambers, some 15 years ago. It had some deep sea diver connotations, a lot of the music was centred round the port city of Fremantle.
You will find almost nothing in archive.org or the Pandora web archives on it. It lasted from 1994 to 2000 or so. My reviews of live band and photographs stopped during 1998/9, I just got burnt out from going to 3 gigs a week, processing film, developing photos and writing reviews as well as a full time job. Almost none of my work from 1994 to 99, still exists on the web, it was a long very time ago in web terms.
November 7th, 2008 at 7:07 pm
[…] es interesantes esta propuesta para hacer imágenes elásticas que hace uso de javascript y puede mermar la calidad de la […]
October 1st, 2009 at 10:21 pm
no es una mala opcion, pero juega en contra de nosotros el peso de las imagenes (debe tener el tamaño máximo para q no se pixelee en cualquier momento.
October 1st, 2009 at 10:29 pm
For those whose Spanish is limited like me (I last use it as an 8 year old) the above comment via google translator =
“not a bad option, but we played against the weight of the images (must be the maximum size for q pixel not at any time.“
I have to agree the weight (size in kb) of image is important factor.