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

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, 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

Fifty Favorite Favicons If you have a website, you need a favicon. For those who may not know, favicons are the small, square icons that frequently are associated with websites. Favicons appear in many places, including browser toolbars, bookmarks, tabs, and address bars. Favicons provide immediate visual identification of their represented sites, enabling super-easy navigation for Web users. While surfing bookmarks with fifty tabs open, finding and clicking on icons is far more efficient than reading through piles of link text. Yet, beyond making it easier for people to identify and locate their favorite websites, favicons also play a critical role in site branding and product recognition. Popular browsers such as Firefox, Opera, and Internet Explorer are virtually re-branded when favicon-enabled sites are displayed. For example, observe how willingly modern browsers conform to the image of web designer/developer Jonathan Snook:

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

Some friends and I recently gathered in Portland, Oregon for the 2007 PDX Zine Symposium. Held on the lush campus of Portland State University, this was the seventh annual zine convention, featuring an abundance of tablers, zinesters, and visitors. Although we did not purchase a display table this year, we did represent our graphic zine collective, Dead Letter Art (DLa) by making the rounds, checking out new zines, and sharing issues of DLa. Since the annual Zine Symposium began in 2000, DLa has attended almost every year, learning, networking, and exploring ideas with fellow zinesters. Thus, with a hefty stack of DLa issues in hand, the DLa posse traded zines, collected chunks, and consumed as much information as possible from an endless river of zine literature and DIY propaganda.

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

“Perhaps it’s time for a bizarre diversion…” — Wild Bill recommends these bizarre Flash websites for your personal entertainment, education, and enjoyment:

monoface For a few delightful moments of splendid online fun, prance on over to the hilariously interactive Flash interface currently on display at monoface. Once there, click the "shuffle face" link a few times to get the general idea, and then graduate to plastic surgeon by clicking on the various facial components themselves. Each click mixes androgynous Flash flesh further and further into bizarro land, where smooth blending manifests disturbed visions of hermaphroditic unrest..

heiwa-alpha.co.jp Flexing some incredible Flash muscle, the good citizens over at heiwa-alpha (update 12/2008: site seems to be down..) have produced a Flash site of monolithic proportions. The sheer magnificence of the animated imagery and truly remarkable attention to detail make this surrealistic visual feast one of Wild Bill’s personal favorites. Indeed, for a delightful romp through the collective mind of some truly gifted Flash engineers, crank up the broadband, dust off the Japanese translator, and drop in for a wonderfully bizarre Flash diversion..

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

“Generative artifacts, graffiti archaeology, and interactive chaos, anyone?” — Wild Bill recommends these highly addictive, interactive websites for your personal entertainment, enjoyment, and enrichment:

Gallery of Computation

This site peeled my hat back. I am completely enamoured and will most likely spend vast amounts of time exploring the endless creative potential opened up through this remarkable online experience. The Gallery of Computation takes computer-generated graphical artifacts and algorithmic image processing to a distant universe. Infinite thanks to Jared Tarbell for sharing his inspiring world with us.

Graffiti Archaeology

Here is another fascinating website at which one could spend countless hours surfing and learning. As avid graffiti enthusiasts, we were immediately hooked on this remarkably interactive presentation of society’s most unappreciated art form. Chronologically organized, Graffiti Archaeology is an insightful online documentation revealing localized patterns of urban expression within various graffiti subcultures. As the site says, "Graffiti Archaeology is a project devoted to the study of graffiti-covered walls as they change over time. The core of the project is a time-lapse collage, made of photos of graffiti taken at the same location by many different photographers over a span of several years. Most of the photos are from San Francisco, over a timespan from the late 1990’s to the present."

Splatter

Splatter is a fun interactive Flash application enabling users to splatter virtually vectorized viscous globs of sloppy, splattering lines. Or something. The program follows the user’s cursor coordinates around the screen, leaving a continuous flow of digital "paint", which flows at a rate determined by that of the cursor. Splatter is extreme fun for the common surfer, and perhaps esoterically useful for graphic designers and web developers. Also check out the offline version of Splatter, available for download here.

CanvasPaint

Finally, check out this online emulation of Microsoft’s ubiquitous Paint program. Firefox 2 and Opera 9 users enjoy the option of saving created images to a local hard drive. Other users may create images but not save them. Besides demonstrating some elite programming skills, CanvasPaint is also a very handy tool to have available online. Indeed, online apps such as this are rapidly changing the landscape of software development and deployment. As described by the CanvasPaint site: "[Canvas is] a near pixel-perfect copy of Microsoft Paint in HTML, CSS and JavaScript, using the <canvas> tag as specified by WHATWG and supported by Safari 1.3, Firefox 1.5 and Opera 9."

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

Fast-loading pages reduce errors, conserve bandwidth, and please visitors. One way to decrease loading times and enhance performance involves maximizing image display efficiency. Your mantra for achieving image efficiency should be "reuse, optimize, and preload.". While each of these methods plays an important role, this article will focus on methods for preloading images. Consult your server error logs to identify web pages that may require image help. Note: preloading images does not reduce bandwidth! It only decreases apparent load time, thereby enhancing user experience.

Preloading via the CSS Display Property

This method is a very common method for preloading images via the CSS display: none; directive. To use this method, first add the following code to your CSS rules:

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
   img.preload { display: none; }
/*]]>*/-->
</style>

Then, add the preload class to each image tag that should be preloaded:

<img src="image1.jpg" alt="Image Caption 1" height="33" width="33" class="preload" />
<img src="image2.jpg" alt="Image Caption 2" height="33" width="33" class="preload" />
<img src="image3.jpg" alt="Image Caption 3" height="33" width="33" class="preload" />
<img src="image4.jpg" alt="Image Caption 4" height="33" width="33" class="preload" />

Include the array of preloading image elements to the bottom of the home page, just before the body tag. Placing the images at the bottom of the page requires the browser to load the entire page before preloading any of the images. Finally, simply use the same image path and name when referencing the preloaded images on subsequent pages. The browser will have cached the images and will be able to load them instantly. Remember not to use the preload class for images that are meant to be displayed.

Preloading Tuf with JavaScript

This method uses JavaScript to cache specified images as the document is loaded. Images will then be displayed immediately as they are called. The JavaScript itself degrades peacefully and has no effect on browsers that do not support JavaScript. The script is as follows. Simply replace ../path/to/image-0n.gif with the corresponding path and name of the image to be preloaded. Then, simply call the images as normal (e.g., <img src="../path/to/image-0n.gif" alt="Image Caption" />) wherever they are required.

<script>
<!--//--><![CDATA[//><!--

if (document.images) {

	img1 = new Image();
	img2 = new Image();
	img3 = new Image();

	img1.src = "../path/to/image-01.gif";
	img2.src = "../path/to/image-02.gif";
	img3.src = "../path/to/image-03.gif";

}

//--><!]]>
</script>

You can also wrap this method in a function like so:

function preloader() {
	if (document.images) {

		var img1 = new Image();
		var img2 = new Image();
		var img3 = new Image();

		img1.src = "../path/to/image-01.gif";
		img1.src = "../path/to/image-02.gif";
		img1.src = "../path/to/image-03.gif";
	}
}

Strategic Methods for Improving Gravatar Functionality in WordPress

Gravatars have become a popular way of adding spice to the "comments" page of many WordPress-powered sites. So popular, in fact, that the gravatar server is often overloaded, bogged down with millions of gravatar requests every second. This immense server load effects user pages everywhere, resulting in slow loading times, unresolved server requests, and missing gravatars. Such broken presentations appear unprofessional, tarnish reputations, and may provoke confusion. This article provides essential solutions for an extreme gravatar makeover..

Continue Reading

ertdfgcvb.ch Check out the intriguing Shockwave site at ertdfgcvb.ch.

Star Burst Check out the slick online digital flower maker at zefrank.com.

When all else fails..

Our official location for dumping notable color swatches:

• | #1A1A1A
• | #383838
• | #666677
• | #E1E1E1
• | #F0F0F0
• | #F2F2F2
• | #F3F3F3
• | #FFFFEE
• | #CCDDAA

Here is a nice collection of feed icons. All are in PNG format, and all have transparent backgrounds (Although they may not appear as transparent if you are viewing via Internet Explorer). Download them individually or as a zipped set. In addition to the icons displayed below, the zipped set also includes two 500×500-pixel feed icons, one in standard orange and the other in greyscale. Please save these to your server and kindly refrain from hotlinking. Thank you.

Download the entire collection [ .zip file | ~77KB | 8050 downloads ]

Aside from an occasional gang squirt, Moses Lake, Washington has no graffiti art scene of which to speak. Yes, there are many vast, open walls available for inspired artists to develop into colorful statements of creative expression. However, city officials and general public opinion frown on graffiti art as worthless, wicked vandalism. Granted, the city does offer several commissioned murals, mainly scenic visions of the ordinary rural variety. Unfortunately, those of us craving authentic expressions of genuine creativity must travel elsewhere to enjoy such diverse cultural fruit.

Imported graffiti art, picked fresh daily Or so we thought. Recently we discovered a daily supply of local, fresh graffiti. A short drive out Moses Lake's Wheeler Road reveals a west-coast freight-car loading station. And, as any connoisseur of aerosol art is aware, graffiti artists love to paint on freight cars. Sure enough, a quick drive into the loading area manifests a colorful line of beautifully decorated railcars. To see such dynamic and intense expressions of deliberation and purpose is like opening the window of youth and shooting up a truckload of rainbows. “..an unexpected pleasure — we are honored by your presence..”

Better still, the railcars are there on business, meaning they are constantly showing up, getting loaded, and taking off, thereby making room for the next set of traveling canvases. Every day, there is a fresh selection of imported west-coast graffiti art ripe for the pickinz. And pick I do — at least three times a week, every week, I drive out to the station early in the morning to examine, admire, and capture the daily gallery. For several weeks now, my collection of high-resolution digital photographs of west-coast graffiti has been growing.

Soon, the collection will be available at perishable.biz, which will feature artwork, digital photos, video chunks, audio turdz, and now, imported graffiti art. Why two Perishable websites? While perishablepress.com focuses on written material, code, and other text, perishable.biz presents creativity as expressed via aural, visual, and digital media. "You gotta keep 'em separated."

Indeed, this segregation of Perishable content enables us to consolidate an online resource (perishablepress.com) for news and information concerning everything associated with all of our creative endeavors. Further, an informational repository such as perishablepress.com enables us to focus entirely on artistic and other creative content at our other sites, such as perishable.biz, deadletterart.com, and artspacemagazine.com.

LiTha-Paint Quality web-based vector drawing in effect. Check out LiTha-Paint, a promising new online vector drawing tool. The software is currently in alpha, yet is already full-featured and easy to use. LiTha-Paint steps beyond the paltry selection of Flash/VML/SVG online drawing tools, providing versatility and universality via HTML and JavaScript. Perhaps all this Web 2.0 business is worthwhile after all..

Update: Unfortunately, LiTha-Paint crashed due to lack of funds (welcome to the club). However, this particular post has now served its purpose by providing insight (via the comments section) into the wonderful world of mikons.com, a very inspiring online vector graphic site that enables users to create visual symbols and share them with a growing network of other vector artists. In their own words:

Welcome to Mikons.com, a new form of self-expression that connects people through visual symbols (personal tags). Our mission is to give you a fun and easy way to create these symbols that tell your story, let you decide how you want to share them, and use them to connect with people anywhere in the world.

Update [ January 10th, 2007 ]: Well, apparently LiTha-Paint is back in action and looking better than ever. Apparently, they found a way to make it happen — good for them! With any luck, this will be the last time I have to edit this post ;)

Ever imagine your website represented as a cluster graph? Well prepare your DOM and check out Sala’s Websites as Graphs project. Each map represents a single website page, each dot represents a different tag, and each color represents a different set of tags. Here is the graphical representation for Perishable Press:

Perishable Press DOM Graph

Modernista!

File under: Inspiration, Creativity, Graphics, and Flash: Modernista!

Electric Sheep

Paying homage to Philip K. Dick’s novel Do Androids Dream of Electric Sheep? via collective screensaver morphology: electricsheep.org.

Plus, be sure to experience this moving ASCII rendition of the “bullet-dodging” scene from The Matrix: ASCII Matrix Scene (I wish this idiot would quit changing the URL!).