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 [...] • Read more »
Perishable Press
WordPress, Web Design, Code & Tutorials
- Viewing page 1 of 3
- ← View older posts
- Visit the Archives
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. • Read more »
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 [...] • Read more »
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 [...] • Read more »
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: • Read more »
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 [...] • Read more »
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 [...] • Read more »
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 [...] • Read more »
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: <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 [...] • Read more »
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; } <!– ADD THIS TO XHTML –> <div id=”preloaded-images”> <img src=”http://perishablepress.com/image-01.png” width=”1″ [...] • Read more »
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” [...] • Read more »
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 [...] • Read more »
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 [...] • Read more »
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 [...] • Read more »