New book on WordPress Theme Development: WordPress Themes In Depth
images
Tag Archive

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 […] Read more »

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 (via the <img /> element) or indirectly (e.g., via the parent <div></div> element) using either display:none; or visibility:hidden;. Further problematic is the potential […] 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 images. Popular visual effects include rounded corners, drop shadows, and image rotation. To achieve these effects, designers often use either CSS, direct image […] 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 screenshots. Thanks to you, I was able to see Perishable Press “in the wild” on many operating systems and browsers to which I […] 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 be “pretty crappy,” but it certainly works. Fortunately, several weeks prior to Mr. Bowman’s dazzling performance, insightful reader Duarte helps the community by […] 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 border that wraps the linked element and then continues to stretch to the left-hand side of the browser window. Here are a few […] 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 of you that understand how this works, great! That’s pretty much the entire purpose of this article. However, for those that would appreciate […] 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″ 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, […] 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” 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 […] 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 htaccess code, there is no need to bloat WordPress with additional plugins for the sake of a few routine tasks. For each of […] 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 checking out your images, inquisitive guests will explore any clues available to them: alt tags, title tags, and captions, for example. Likewise, when […] 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 page with insightful commentary and inside information concerning each delicious offering. Designed according to the principles of modern web design, ThaneC’s site now […] Read more »

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 […] Read more »

Latest Tweets USP Pro v1.9 now available, many great new features: plugin-planet.com/usp-pro-vers… #wordpress #plugin