Articles tagged as “images”

Here is a list of all articles tagged as “images”. If you enjoy the high-quality content that I provide here at Perishable Press, you may want to subscribe to our main content feed to stay current.

3 Ways to Preload Images with CSS, JavaScript, or Ajax

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

5-Minute PNG Image Optimization

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. Step 1: Optimize with OptiPNG or Pngcrush For the first (and most important) step in our image-optimization process, we want to run our PNG images through a command-line optimizer like ...

Better Image Caching with CSS

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 Ultimate Guide to swfIR Image Replacement

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

Pure CSS: Remove Link Properties for Linked Images with Borders

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: img { background: url(images/grunge.png) repeat 0 0; border: thin solid black padding: 3px; margins: 3px; } You can also use images as links to other images: If so, you will probably want to style your links: a:link, a:visited { border-bottom: 1px solid red; text-decoration: underline; color: red; } a:hover, a:active { border-bottom: 3px solid red; text-decoration: none; color: maroon; } But wait! By styling your text links you are also styling your image links, leaving them with unwanted bottom-borders and text-underlines. Assuming we want to fix this, a quick search on the ...

Perishable Press Quintessential Screenshot Gallery

One of my goals for the new Perishable Press redesign was to achieve cross-browser, pixel-perfect precision [ 1 ]. 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 ...

A Way to Preload Images without JavaScript that is SO Much Better

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

Sharpen Your Site by Removing Unwanted Link Border Outlines

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 1 (btw, no offense ...

Drop-Dead Easy Random Images via PHP

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

Pure CSS: Better Image Preloading without JavaScript

After reading my previous article on preloading images without JavaScript 1, 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; } ...

Fake Slifer Yu-Gi-Oh! Cards on Ebay

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

Optimize WordPress: Pure Code Alternatives for 7 Unnecessary Plugins

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

Focus on the Details: Optimizing Images for Humans and Machines

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

88Teeth Site Redesign

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

Slideshow Code for Dead Letter Art

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

CSS Throwdown: Preload Images without JavaScript

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: ..and that’s ...

Allow Google Reader Access to Hotlink-Protected Images

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

Allow Feedburner Access to Hotlink-Protected Images

Recently, we installed and configured the excellent WordPress Feedburner plugin by the venerable Steve Smith 1. 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 ...

Digging the Ditch Witch

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

Flash-Detection Triple-Threat

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

Alternate JavaScript Slideshow for SlideshowPro

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

Dazzle, Marvel and Wonder

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. ...the best kaleidoscope program we’ve seen yet. The beautiful use of colors, enhanced even further by the use of fading in and out, is, for want of a better word, awesome. -- PsL News (713-524-6394) The DAZZLE screensaver features a wide variety of custom configuration options, and includes complete documentation1 covering every aspect of the program. Best of all, DAZZLE requires a mere ...

Feed your Image via Atom or RSS

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 XML element for URL’s targeting 1:1 images. Otherwise, use the XML element for URL’s targeting 2:1 images. Either element should be placed in the element: http://domain.tld/path/icon.ico http://domain.tld/path/logo.gif Images for RSS Feeds RSS supports images with a maximum width of 144px and ...

Chunks 101: Introduction to Chunkology

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

Counterfeit Slifer Yu-Gi-Oh Card

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