Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: images

High Performance SVGs image/svg+xml

I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the team how to decrease the file size on the SVGs while preserving the appearance and functionality, finally getting the load time to under 2 seconds. The bounce rate dropped dramatically and conversion was restored.

Some handy tips on optimising SVGs for performance. I’ve been trusting Inkscape for my SVG production needs, but after reading this, I might take a closer look at the files it creates.

Editing Images in CSS: Filters image/svg+xml

Consider a situation where you have to have high-contrast, blurred or brighter versions of particular images on your website. Prior to CSS filters, your only options were either to upload different versions of these images or manipulate the images with JavaScript.

Unless you want to manipulate the pixels in the original image, CSS filters provide an easy way out. Let’s begin this tutorial with a brief discussion of all available filters.

A nice guide to using CSS filters on images. See demo for testing browser compatibility.

Hiding an Image’s Pixel Border with CSS box-shadow

This is an edge case: I’m working on a WooCommerce project where I’m importing tens of thousands of product images from a supplier. The problem is, all the images have a 1 pixel black border and they look terrible when they’re displayed on the site. I have no idea why the supplier thought this was a good idea, but there you go.

To workaround the issue, I decided to attempt to hide the image border using the CSS3 box-shadow property. First, I wrapped the img element inside a div element. I then applied an inset box-shadow property to the div element, before adjusting the z-index of the img element to make it sit below the div. See the demo below.

See the Pen Hiding an Image’s Pixel Border with CSS by Philip Newborough (@corenominal) on CodePen.