Image Usage: 2 Ways to stay Big and Beautiful

Many people showcase beautiful images on their websites (maybe you do too). Be it big wallpapers or high resolution photos, the viewer is taken aback by its beauty AND its loading time.

There are many ways for webmasters to deal with this issue and several are listed here, excluding image compression. After all, it’s big and beautiful not small and pixelated.

Interlaced

Interlacing an image requires that it is in GIF (Graphics Interchange Format) format. Many of you have probably seen these types of images which load a blurry image first and then slowly renders the full image. Because interlaced GIFs loads in four “stages”, the visitor can decide whether the load time is worth his or her time after the initial stage loads. A bonus is that some visitors find the effect visually appealing.

To create an interlaced GIF, simply take your image and convert it to GIF format. Be sure to select the “Interlaced” option of whatever image editing software you are using. Note that interlacing should only be used on large images. Because interlacing adds a small amount of file size to the image, it isn’t recommendable to interlace small images.

Thumbnails/Stand Alone Downloads

The simplest way to keep the download time from driving away your visitors is to show a smaller version of the image on the page that shows your portfolio, wallpapers, or products and create a link to the full sized image upon clicking.

For those more technically inclined, you can make a larger version pop out on mouseover like Ebay does. There are also many websites that create an overlay that loads the full sized image over the webpage upon clicking. However, if you have no clue as to how to create these effects, I’d recommend that you don’t try as it will take a long time to figure out and plus, regular thumbnails work just fine. Make sure not to simply do an image swap on mouseover/rollover as this could distort your layout if you’re throwing a huge image in the middle of your 1024*768 or 800*600 resolution compatible layout.