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.

Tim Underwood of the Rosemary Beads 1995Joe Algeri  guitar smashing 1999

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.

27 Responses to “Elastic Images”

  1. Riz Says:

    Hi Nick,

    Wandered into here while following links… that’s a cool concept (ie, elastic images).

    See you at OSIG

    Donna

  2. Myles Eftos Says:

    Nice!

    I assume you accomplish this via JavaScript?

  3. Myles Eftos Says:

    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) :)

  4. nick Says:

    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.

  5. Anonymous Says:

    were is the pictures of rosemary beads

    Nick: It is a photo of Tim Underwood, from the now defunct band The Rosemary Beads

  6. El Blog de Emulate » Blog Archive » Imagenes elásticas Says:

    […] 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! […]

  7. the hosting & marketing online blog » Imagenes elasticas Says:

    […] http://nickcowie.com/2005/elastic-images/ […]

  8. malberto.es » Imágenes Líquidas: Says:

    […] 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. […]

  9. Nick Cowie » Blueprint a CSS framework Says:

    […] Elastic images should be in multiples of 1.5em. […]

  10. RE Mogul Says:

    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

  11. RE Mogul Says:

    Refinement
    ————————–

    Make comments POP in all browsers:
    Replace alt=”alt text” with title=”comment text” — inside tags.

  12. RE Mogul Says:

    Firefox: Hit Control [+] & [-]…

  13. RE Mogul Says:

    Flash to snap-in an Outline Font = Perfection.

  14. RE Mogul Says:

    Thought my other comment was deleted… Apologies for reiteration (above.)

    Opera has a “fit to window” width feature — the interesting distinction.

  15. RE Mogul Says:

    :::::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.

  16. RE Mogul Says:

    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.

  17. RE Mogul Says:

    FLASH is the FUTURE.

  18. RE Mogul Says:

    Why a multiple of 1.5?

    An approximation of 1.6180339887 –The Golden Ratio?

  19. RE Mogul Says:

    Perhaps: All images a multiple of 1.6 ?

  20. Nick Says:

    Mogul I am old school 35mm photographer hence the 3:2 ratio.

  21. RE Mogul Says:

    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).

  22. RE Mogul Says:

    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.

  23. RE Mogul Says:

    Actually, a noun.

    Copied From:

    http://www.urbandictionary.com/define.php?term=bubblehead

  24. Nick Says:

    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.

  25. Tutorial de cómo y porqué hacer layouts web líquidos o elásticos | ..: Cristian Eslava | Diseño Gráfico / Web | Maquetación | Formación :.. Says:

    […] es interesantes esta propuesta para hacer imágenes elásticas que hace uso de javascript y puede mermar la calidad de la […]

  26. moi Says:

    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.

  27. Nick Says:

    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.

Google