Vanilla JavaScript: Add Class to Image Links
It seems that for every new web design, I need to add a specific CSS class to linked images. So I can distinguish between regular text links and image links. And then apply styles as desired for each. I’ve tried all sorts of CSS and JavaScript/jQuery tricks over the years, but so far this one is the best.. Continue reading »
Opera and Brave Blocking Legit Images
The Opera and Brave web browsers are blocking many legit images (and likely video and other types of media). Thanks to the Opera settings “Block Ads” and “Block Trackers”, many legitimate (non-ad) images are broken. For Brave it’s the setting, “Block cross-site trackers”. These settings are all enabled by default. Apparently the blocking feature in Opera and Brave is determining (at least in part) if an image should be blocked based on its URL, file name, and possibly factors like […] Continue reading »
New Plugins for WordPress 5.5
Forgotten post! I wrote this article way back for WordPress 5.5 but forgot to publish. Rather than delete I am posting it now. I think the information remains relevant for the most part. Read with a grain of salt :) WordPress 5.5 brings some new features that may help a lot of users. The two biggies: sitemaps and lazy loading images. This rundown post explains a bit about each, and shares some free plugins to help should you need to […] Continue reading »
How to Disable WordPress Automatically Generated Images – Complete Guide
As you may know, WordPress creates numerous copies of all images uploaded via the WP Media Library. These additional images are generated in various sizes, depending on your settings and other factors. This may be totally fine in general, but if you are working with lots of images on your site, the extra files can really eat up your disk space. This can be wasteful, specially if your site does not make use of all the extra images. So to […] Continue reading »
Watch Cyber Attacks Online
Taking a quick break to watch cyber attacks happening in real time. Continue reading »
Disable WordPress Responsive Images
WordPress responsive images are awesome. But some people want to use their own methods to implement. This post explains how to disable WordPress responsive image functionality so that you can use your own methods. It makes things easier when you don’t have to wrestle with what WordPress is doing. Continue reading »
Force Margin/Space Between List and Floated Image
If you’re displaying floated images in your posts, you may notice that margins of lists and other block-level elements seem to “collapse”, as shown in this screenshot from the 2013 redesign: Continue reading »
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 […] Continue reading »
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. Continue reading »
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 […] Continue reading »
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 […] Continue reading »
Pure CSS: Remove Link Properties for Linked Images with Borders
CSS is very powerful. In this tutorial, we look at how to clean up styles on hyperlinks containing images (e.g., JPG, PNG, GIF) using pure CSS techniques. As well as some related tips and tricks to help you get linked images displaying exactly as intended. Continue reading »
Quintessential Screenshot Gallery
One of my goals for the new Perishable Press redesign was to achieve cross-browser, pixel-perfect precision1. 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 […] Continue reading »
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 set 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,” […] Continue reading »
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 […] Continue reading »
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 using PHP. After playing around with several possibilities, I devised the following drop-dead easy technique: Continue reading »
