Preloading images is a great way to improve the user experience. When images are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for photo galleries and other image-heavy sites where you want to deliver the goods as quickly and seamlessly as possible. Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to enhance the performance and usability of your site.

Method 1: Preloading with CSS and JavaScript

There are many ways to preload images, including methods that rely on CSS, JavaScript, and various combinations thereof. As one of my favorite topics here at Perishable Press, I have covered image preloading numerous times:

Continue Reading

A great way to improve the performance of your site is to optimize the size of your images. Smaller image sizes require less bandwidth, disk space and load time, and ultimately improve visitor experience. In this article, I share my effective 5-minute technique for optimizing PNG images. This is a two-step, lossless optimization process that removes as much extraneous data as possible without sacrificing any image quality whatsoever. It’s fast, free, and highly effective.

Continue Reading

I have written previously on the fine art of preloading images without JavaScript using only CSS. These caching techniques have evolved in terms of effectiveness and accuracy, but may be improved further to allow for greater cross-browser functionality. In this post, I share a “CSS-only” preloading method that works better under a broader set of conditions.

Previous image-preloading techniques target all browsers, devices, and media types. Unfortunately, certain browsers do not load images that are hidden directly (via the <img> element) or indirectly (e.g., via the parent <div> element) using either display:none; or visibility:hidden;. Further problematic is the potential unintentional display of images on pages when presented via specifically designed print stylesheet.

Continue Reading

In this ultimate guide to swfIR, you will learn how to use swfIR to replace your ordinary images with richer, stylized graphics. swfIR enables efficient, practical and scalable application of drop-shadows, rounded corners, and even image rotation to any number of specified images throughout your site. From concept and application to examples and recipes, this guide covers everything you need for successful swfIR implementation.

The Challenge..

There are many ways to enhance the visual presentation of your images. Popular visual effects include rounded corners, drop shadows, and image rotation. To achieve these effects, designers often use either CSS, direct image manipulation, or some combination thereof. CSS may possess limited ability to round image borders in certain browsers, but for drop shadows and image rotation, designers must either modify each image individually, or rely upon convoluted techniques employing additional graphics and CSS to get the job done. This may be suitable for a single header graphic, but for any significant number of images, hand-editing each one in Photoshop with the desired visual effect is neither efficient, practical, nor scalable.

Continue Reading

There are many ways to style images with CSS. You can add borders:

img {
	border: thin solid black
	}

..padding and margins:

img {
	border: thin solid black
	padding: 3px;
	margins: 3px;
	}

..and even background graphics:

Continue Reading

One of my goals for the new Perishable Press redesign was to achieve cross-browser, pixel-perfect precision [ ¹ ]. Of course, due to many variables (platform, operating system, browser, extensions, fonts, etc.), it is virtually impossible to achieve complete 100% perfection, but I am certainly interested in examining the design on as many different configurations as possible. Thus, last week after launching the new design, I made an open call for screenshots. Graciously, many of you responded with some great screenshots. Thanks to you, I was able to see Perishable Press “in the wild” on many operating systems and browsers to which I simply don’t have access. Sure, I could have just went to browsershots.com or some similar service, but as Rick Beckman correctly pointed out, it is much more fun to get everyone involved in the process. So without further ado, here is the Perishable Press Quintessential Screenshot Gallery:

Continue Reading

Responding to my first attempt at preloading images without JavaScript, CSS-Guru David Bowman graces his audience with a most enlightening triage of comments.

Apparently, the image-preloading technique explained in the article is “major overkill” and “totally ridiculous.” Of course, I will be the first to admit that I am no expert in CSS, but I do enjoy sharing my discoveries and watching as people improve upon them. My first attempt at preloading images without JavaScript may indeed be “pretty crappy,” but it certainly works.

Fortunately, several weeks prior to Mr. Bowman’s dazzling performance, insightful reader Duarte helps the community by sharing a far more elegant solution using display: none;. Here is an example of its implementation:

Continue Reading

Lately I have noticed several sites that display those unsightly dotted outlines on high-profile link elements. Typically, these link outlines plague various header elements such as banner images, navigational links, and other key features. This behavior frequently haunts highly graphical site designs and is often associated with various image replacement methods that position the original anchor text offscreen, generally far beyond the left edge of the browser window. When visible, such presentations display a ghastly, four-sided dotted border that wraps the linked element and then continues to stretch to the left-hand side of the browser window. Here are a few examples of live websites demonstrating this distracting behavior ¹ (btw, no offense meant to any of these sites — they are all great — they just happen to provide good examples!):

Continue Reading

Recently, while restoring my collection of Perishable Press themes, I needed a fast, effective way to randomize a series of images. After playing around with several likely candidates, I finally devised the following drop-dead easy technique:

<img src="http://domain.tld/path/random/image_<?php $random = rand(1,n); echo $random; ?>.png" alt="[ Random Image ]" height="50" width="50" />

This single line of code facilitates the random display of n number of images (image_1.png, image_2.png, image_3.png, etc.) located in the target directory (http://domain.tld/path/random/). For those of you that understand how this works, great! That’s pretty much the entire purpose of this article. However, for those that would appreciate some further explanation, let’s examine this technique in a little more detail (you have been warned!)..

Step 1: Prepare your images

Prepare any number of images of the same file type (e.g., .png, .jpg, .gif, etc.) and name them numerically. You can name your images just about anything you like, so long as the only difference between each name is a single numerical digit. Further, ensure that the numerical digits begin with zero and proceed in order to the total number of images in the set. For example, assuming you have three .png images, any of the following name sequences is perfectly acceptable:

Continue Reading

After reading my previous article on preloading images without JavaScript ¹, Nanda pointed out that adding extra markup to preload images is not the best approach, especially where Web Standards are concerned. Mobile devices, for example, may experience problems when dealing with the following preloading technique:

/* ADD THIS TO CSS */
div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

<!-- ADD THIS TO XHTML -->
<div id="preloaded-images">
   <img src="http://perishablepress.com/image-01.png" width="1" height="1" alt="Image 01" />
   <img src="http://perishablepress.com/image-02.png" width="1" height="1" alt="Image 02" />
   <img src="http://perishablepress.com/image-03.png" width="1" height="1" alt="Image 03" />
</div>

Thus, as Nanda suggests, it is better to preload images using only CSS. Using the CSS background property, we can preload images via existing <div>s, <span>s, or other elements in the (X)HTML markup.

Let’s say you have three images (e.g., image_01.png, image_02.png, and image_03.png) that you would like to preload using this method. First, examine your markup for three identifiable <div>s (or other elements) that may be used as CSS hooks for the preloaded images. For example, looking at the source code of the current page, I would choose the following three divisions:

Continue Reading

Believe it or not, one of my most popular posts here at Perishable Press is an article I wrote about a counterfeit Slifer Yu-Gi-Oh! card. Since its publication, I have received some very interesting information regarding the apparently extensive market for fake Yu-Gi-Oh! cards. Recently, reader Deana wrote to share her experience with an eBay purchase of a “very good counterfeit” Slifer card on eBay.

As a savvy Yu-Gi-Oh! collector, Deana has purchased “some really great cards” on eBay. For example, she once scored an authentic, 70-dollar DDS-001 Blue-Eyes White Dragon card for about 35 bucks. She says that obtaining legitimate high-value cards through eBay is “really and truly a luck of the draw.” Even worse, many eBay shoppers may have purchased counterfeit Yu-Gi-Oh! cards without even realizing it. As Deana explains, the subtle differences between “real” and “fake” cards are not “something you would notice unless you are a collector.”

Continue Reading

In this article, my goal is to help you optimize WordPress by replacing a few common plugins with their correspondingly effective code equivalents. As we all know, WordPress can be a very resource-hungry piece of software, especially when running a million extraneous plugins. Often, many common plugins are designed to perform relatively simple tasks, such as redirect a feed, display a random image, or return a database value. For those of us comfortable with editing PHP and htaccess code, there is no need to bloat WordPress with additional plugins for the sake of a few routine tasks. For each of the “pure code” alternatives presented below, we are able to drop an unnecessary plugin without editing the WordPress core. In fact, all of the plugin replacements presented here affect only theme files, thereby keeping WordPress updates nice and easy. Well, okay, one or two methods require editing your root htaccess file, but we are all okay with that, right?

Continue Reading

In this article, I discuss how to get the most out of your site’s images by optimizing them for both people and search engines..

For many sites, images play an important role in the communication process. If used correctly, images have the power to make your articles come alive with clarity and vibrancy. Some visitors may merely notice the image and continue reading, while others will want to know more about your images and dig deeper. While checking out your images, inquisitive guests will explore any clues available to them: alt tags, title tags, and captions, for example. Likewise, when classifying, categorizing, and ranking your site’s images, search engines such as Google employ complex algorithms that evaluate many different image-related aspects in their calculations. Focusing on the details related to image optimization helps both search engines and live visitors to maximize the usefulness of your images. In this article, I present a healthy collection of image-optimization strategies designed to help you get the most from your images.

Continue Reading

[ Detail of 88teeth’s revamped “Manoid” ] Longtime friend and fellow-DLa member ThaneC recently has updated his personal/portfolio site, eightyeightteeth.com. ThaneC’s site has been completely redesigned and reorganized, featuring easy navigation and generous presentation of core content. Every page is overflowing with creative juice — thumbnail galleries of artistic works, digital photos, and custom wallpapers are a pleasure to browse. Full-size versions of each creative piece “pop-up” upon command. ThaneC’s unpretentious wit and artistic sincerity furnish each page with insightful commentary and inside information concerning each delicious offering. Designed according to the principles of modern web design, ThaneC’s site now employs the efficiency and flexibility of HTML and CSS, rounded out with a touch of unobtrusive JavaScript to make it all sweet.

Continue Reading

Pardon this post! I am posting this information online for personal references purposes. I may need to revisit this code at some point in the future, and if I post it here I will always know where to find it (trust me, it would disappear into the abyss if I tried storing it offline). So, although it is intended solely for myself, feel free to extract and use anything you like, as long as commented attribution remains. What we have here are two different methods for including a slideshow on a web page. The first method employs the techniques discussed in this article, while the second method skips the Flash and employs only the JavaScript portion of the slideshow. Here is some additional help with embedding Flash content, including slideshows, and JavaScript techniques.

Continue Reading

Clean, easy, effective. You don’t need no stinking JavaScript to preload your images. Nope. Try some tasty CSS and (X)HTML instead! Here’s how.. (only two steps!)

Step 1 — Place this in your CSS file:

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

Step 2 — Place this at the bottom of your (X)HTML document:

<div id="preloaded-images">
   <img src="http://perishablepress.com/image-01.png" width="1" height="1" alt="" />
   <img src="http://perishablepress.com/image-02.png" width="1" height="1" alt="" />
   <img src="http://perishablepress.com/image-03.png" width="1" height="1" alt="" />
</div>

..and that’s a wrap! All images are preloaded and ready for calling as you please. Completely valid, standards-compliant image preloading via CSS and (X)HTML!!

In our previous article, we explain the process of allowing Feedburner to access your hotlink-protected images. The article details the entire process, which covers the basics of hotlink protection and involves adding several lines of code to your htaccess file. In this article, we skip the detailed explanations and present only the main points. The discussion is very similar for both Feedburner and Google Reader, and may be extrapolated to serve virtually any purpose.

If you are using htaccess to protect your images from hotlinking and have yet to check your feeds in Google Reader, you may be in for a little surprise. Unless you explicitly permit Google Reader access, your htaccess rules may be inadvertently preventing subscribers from viewing the images in your feeds. The same is true for Google Reader Mobile, which is probably far more popular than you may realize.

Continue Reading

Recently, we installed and configured the excellent WordPress Feedburner plugin by the venerable Steve Smith ¹. The plugin basically redirects our various WordPress-powered content feeds to Feedburner, which then delivers them to subscribers. This method enables us to take advantage of Feedburner’s excellent statistical tools. Further, all of the action happens silently, beneath the surface, and without the subscriber even realizing it.

After a few weeks running the plugin with great success, we began hearing reports of broken and missing images messing up our feeds. After some investigating, we realized that our tried-and-true anti-hotlinking htaccess rules were doing their job a little too well — blocking everyone outside our domain from accessing our image content — including Feedburner.

Continue Reading

Ditch Witch, I think I love you.. On my never-ending quest for fresh graphical chunks, many a ridiculous warning sticker have caught my eye. Upon encountering such gems, I immediately slip into stealth mode and plan for attack. Once the stage is set and the time is prime, I move in for the kill — another ripe chunk cold plucked from the vine. Of course, only the nonsensical, pointless, redundant or otherwise ridiculous labels are snatched from existence — anything even legitimately informative requires a more compassionate approach..

Continue Reading

In our previous article, Alternate JavaScript Slideshow for SlideshowPro, we present an elaborate method for providing alternate content specifically for SlideshowPro. Although the method points toward a more generalized adaptation, its overall functional implementation remains focused on the presentation of slideshows.

This article explores the generalization of the previously defined method for providing alternate JavaScript content when Flash support is not detected. Using skyzyx.com’s excellent Flash-detection script, Flash Detect 3, we will outline a general approach for supporting the following browser configurations:

Browser supports the required version of Flash

Excellent. This is the ideal situation. Your Flash-based content will be displayed as intended.

Browser supports Flash, but has not upgraded to the required version

Okay. In this situation, you could serve either JavaScript content or retro-Flash content (i.e., Flash content that requires a lesser version of Flash). Detection is also provided for virtually any version of Flash, enabling delivery of multiple movie alternatives.

Browser does not support Flash, but does support JavaScript

Not bad. Non-Flash browsers will receive alternate JavaScript content. User’s won’t know what they’re missing.

Browser does not support JavaScript, but does support Flash

For Flash content that does not require JavaScript to function, the browser will display the Flash content as intended, assuming sufficient Flash version. When the version of Flash is insufficient, non-Flash users will see either retro-Flash content, animated gif content, or static image content, depending on your preference.

Browser supports neither JavaScript nor Flash

Worst case. Even so, all hope is not lost. In this situation, visitors will see either animated gif content, or static image content.

Continue Reading

For the unenlightened, SlideshowPro (SP) is a Flash-based slideshow-authoring system that delivers full-featured, high-end, Flash-based slideshows. Websites featuring SP slideshows present content in sophisticated fashion, inspiring users with elegant captions, beautiful transitions, and intuitive navigation.

However, many visitors are unable to experience SP slideshows because they lack the requisite Flash support. SlideshowPro-based slideshows currently require Flash 7 or better to function. And, although Flash 7 is quite common, it is far from ubiquitous. In the "worst-case" scenario, Flash-challenged visitors will see a broken webpage or missing content. Unfortunately, the typical "best-case" scenario is not much better, as non-Flash users typically will see a single, static image, which is generally served via something similar to:

<object classid="clsid...">
 <param name="movie..." />
 <embed src="http://domain.tld/..." />
 ...
 <img src="http://domain.tld/path/to/alt/image.jpg" alt="alternate image served for non-Flash browsers" />
 ...
</object>

Continue Reading

One of our favorite command-line screensavers, DAZZLE is a two-dimensional kaleidoscopic program featuring a timeless display of perpetually evolving psychedelic viewscapes. Users may interactively manipulate over thirty image-creation algorithms, or set the program to automatically generate hours of dynamically morphing displays of colorful patterns and geometrically complex graphics.

Continue Reading

This quick tutorial explains how to add images to both Atom and RSS feeds. Although both formats allow for image-inclusion, feed-reader support for image-display is currently quite limited. Hopefully, that will change in the near future..

Images for Atom Feeds

Images included within Atom feeds must have a ratio of either 1:1 or 2:1. There are no other restrictions as to file type or size. Use the <icon> XML element for URL’s targeting 1:1 images. Otherwise, use the <logo> XML element for URL’s targeting 2:1 images. Either element should be placed in the <feed> element:

<feed>
   <icon>http://domain.tld/path/icon.ico</icon>
   <logo>http://domain.tld/path/logo.gif</logo>
</feed>

Continue Reading

We are continually on the prowl for fresh chunks — whether it’s business or pleasure, day or night, scanning the immediate environment for tasty visual gems is a constant delight. Perhaps you find yourself lulling over tacky magazines at the dentist’s office, when suddenly — out of the corner of your eye — you notice it: a small triangular decal attached to the side of the waiting-room television warning people about something with an absolutely ridiculous icon to reinforce its message. Unlike the typical media fodder enslaving the likes of "People" and "Time", the TV warning chunk shows true character — slightly worn and abstract with a sense of authenticity and timelessness. Casually, you rise from your waiting seat and meander over to the TV, as if you may be thinking about changing the channel or something. As your eyes intently examine the coveted nugget, you realize that it is definitely a "must-have" to add to your collection. A quick scan around the room to verify that nobody (surprise) is paying attention, and it’s time to strike! With a single, fluid motion, you silently reach around the side of the TV and peel off the delicious morsel…

Continue Reading

Recently, my son traded three common Yu-Gi-Oh cards for the coveted Slifer god card. He was very excited, thinking he worked the deal of a lifetime. Indeed, Slifer cards sell for around $35.00 apiece, depending on the dealer. Nonetheless, trading three worthless cards for a Slifer god card seemed like a phenomenal deal..

What we discovered next nearly dropped us to the floor — the Slifer card was a counterfeit! Within moments of checking it out, Mom immediately recognized the unusual coloring, odd syntax, and heavy gloss on the card. Upon closer examination, many errors were discovered — spelling mistakes, missing graphics, and misaligned text — all pointing to one inescapable reality: an illegitimate Slifer card!

Amazed by the idea that someone would actually produce a fake Slifer card, I quickly confiscated the card and began scrutinizing the details. After studying the card, carefully comparing it to other Yu-Gi-Oh cards and several legitimate Slifer cards (via dealer sites, etc.), the extremely poor quality of the counterfeit became laughably obvious. This is sad for at least two reasons. First, it is sad that there are scumbags who steal from children. Second, it is sad that a counterfeiter would perform such an absolutely pathetic rendition of the very popular Slifer Yu-Gi-Oh god card.

Nonetheless, discovering and studying the counterfeit card provided such a thrill that we thought others might benefit from a critical online analysis. Hopefully, this article will serve as a reference for others to compare against in order to avoid the purchase or trade of other fake Yu-Gi-Oh cards. If nothing else, we hope that you will enjoy a hearty laugh upon discovering the amateur nature of this particular counterfeit.

Authentic Slifer Card

Counterfeit Slifer Card

Click here for a close-up, side-by-side comparison of the authentic vs. counterfeit Slifer cards.

Summary of the obvious errors on the fake Slifer card:

• [a] Card title is in lowercase text; "sky dragon" is not capitalized
• [b] The text, "GOD", has replaced the original symbol and text
• [c] Incorrect number of stars: ten stars on the real card, eleven on the fake.
• [d] Missing serial number below the image of Slifer, on the right-hand side
• [e] "[DIBINE .BEAST]" is misspelled, contains a period, and is typographically incorrect
• [f] Description contains numerous errors in spelling, grammar, punctuation, and typography
• [g] Misaligned text for "ATK" and "DEF" characters
• [h] Missing japanese characters in the lower-left corner of the card
• [i] Missing copyright and japanese name in lower-right corner of card
• [j] Missing reflective authenticity decal in lower-right corner of card
• [k] Image resolution/quality is poor — out of focus, grainy, pixelated
• [l] Overall coloring of the card is too pale, or otherwise inaccurate
• [m] Placement of the description text is misaligned, too low
• [n] The card itself is overly glossy — way too much gloss

Flaws present on the back of the card

• The brand name, "KONAMI" and registered symbol (R) missing from upper-left corner ( apparently, authentic god cards display neither brand name nor registered symbol on the back of the card. )
• Trademark signature (TM) missing from Yu-Gi-Oh logo in lower-right corner ( apparently, authentic god cards do not display a trademark signature on the back of the card. )
• Front of card lacks proper card gloss — surface similar to paper
• Colorization is too pale, or otherwise inaccurate

We hope this article is helpful to someone. If you have other examples of counterfeit Yu-Gi-Oh cards, we would love to hear about them. Update: new article posted highlighting Deana’s experience with a counterfeit Slifer card she had purchased on eBay (Originally posted on: 03/05/2008).