Tackling image management
Every .1 second your page takes to load you lose 1% in sales.
The story is usually the same – a website has lots of images and thumbnails of specific dimensions and then the design has been changed. The new design calls for different image sizes and leaves a developer in a predicament figuring out the best way to tackle this. Here is where the bad shortcut seems most appealing: just leave the original images as is and change the CSS width and height. It seems like the attractive solution, right? Well, on modern browsers there might not be a notable difference but in regards to bandwidth the story is quite different. Yes, you saved precious time by only changing the CSS, but at the expense of wasting your users precious time to download images that are larger than needed.
This trade off is one that will only hurt you in the end. Studies from Amazon show that every .1 second your page takes to load you lose 1% in sales. The aim here is to deliver images at the exact dimensions the browser should be displaying them, helping the page to load at most optimized speed possible and prevent users from abandoning your site due to an unnecessarily long loading time.
What we’ve witnessed at SwiftPic is an overwhelming amount of developers avoiding this bad shortcut by resizing each image and thumbnail in multiple sizes. Traditionally, this would be the honorable way of ensuring your content is being delivered to your users as fast as possible. Even at a small scale, this task is can be manageable but still very costly when it comes to the time needed to resize every image. Chances are that different versions of images appear on different areas of the site, and not to mention optimizing for mobile devices, which leaves you with another series of required dimensions to resize for. The fact of the matter is this huge time investment of resizing images will be a complete waste when the graphic design of website changes yet again.
At SwiftPic, we want to save you time and money by taking ownership of your image management and resizing them the right way. It’s just as effortless as the fool’s shortcut we wont over earlier, but instead of changing dimensions on your CSS you will use SwiftPic’s library to call the resize action and specify your desired dimensions. We fetch your master image, resize it into as many different versions as you need, and deliver through our lightning fast CDN. Now, the next time your graphic design changes just update your code with new dimensions and you’re done!