Skip to content

Smart Image Handling

July 5, 2007

I came across an interesting way to optimize image usage the other day. Take a look at http://www.myhome.com.au/. If you inspect the images with a tool like firebug you’ll notice the whole thing is just a single image.

(Example A)

They just crop the image through clever use of CSS. I’ve actually used this technique before but on a much smaller scale. For some reason it never really occurred to me it makes great sense to do this for all the pictures in the site.

The way to achieve this is relatively simple. You include the image as normal and make sure it has an appropriate surrounding element such as a span or div.

Here’s an example from the site:

  
    
  

The cropped class triggers the overflow to be hidden:

  overflow:hidden;

The image is positioned absolutely with negative left and top offsets.

  left:-722px;
  top:-192px;

Background images can also be positioned using a similar technique although repeating background can cause you to use extra images. Here’s another example from the site:

(Example B)

That image is used for horizontal background repeats. Again it combines multiple backgrounds into one image in a clever way.

Advertisements

From → Technical

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: