Download All Images

Ever tried to save all images from a website? Save yourself from carpal tunnel and parsing nightmare and let this extension make one neat package for you.
feature

Background

This is a chrome extension I made because, one day, I wanted to download all emoji images from emojipedia. In this particular case, images load dynamically when user scrolls and images are not rendered until they are scrolled into view in the browser. Also there are about 2000+ images.

Difficult to do manually; perfect task to do using code.

Comparing existing solutions

There are many local web scraping options that work pretty well with server-side rendered pages. But they do not work if the prerequisite is to first render the javascript, which requires at minimum a headless browser. Ideally the image downloading solution should not care about backend tech stack and only be concerned with the rendered page content.

The second alternative was to search for existing solutions that work in browser, to account for the need to render the javascript before starting download. There are several solutions that fit into this category. The main drawbacks with these existing solutions were that they allowed too many options, i.e. it was difficult to “just get me everything”. Another problem was that these solutions did not package the images but fired a download event on every single image. This approach does not scale well and can easily freeze the browser. Also, some solutions attempted to include too many options in their UI, making it difficult to learn how to use the solution and/or sometimes the UIs were just plain broken.

Enter “Download All Images”

Ultimately after enough searching I decided to make a solution to fit my initial requirements. Preferably I also wanted this solution to generalize well across other similar batch download tasks. With this new solution I solved the previously encountered problems in following ways:

Pre-rendering javascript

By deciding to make a chrome extension, javascript will be pre-rendered automatically before image download begins. This means solution can utilize all javascript APIs and manipulate the page as necessary. Also, because extensions run in the browser sandbox, it works with any OS that can run Chrome browser, making it cross-platform from the start.

Simple interface

The interface for this application is a single launch button. The motivation here was to eliminate the navigational and configurational issues that occured with many of the pre-existing solutions. This makes it really easy to learn how to use this solution and reduces duplication of effort since the image collection can be manipulated by the OS after download has occurred.

Package images in .zip file

This approach eliminates the problem of firing too many download events which can freeze the browser. By using a zip file there will be exactly one download event at the end. The drawback with this approach is the memory requirement while download is ongoing.

Indicating progress

The absence of interface combined with packaging files introduces a new problem which is to indicate progress during these operations which may take a long time. Without direct user feedback it would be difficult to know application is doing anything. Therefore the solution was to transform the launch button into a progress indicator while download is ongoing thus providing this necessary feedback to user.


This project is named image zipper, but because that name is not exactly a hot keyword to search, it is better known as “Download all Images”. The latter works better wrt. SEO and helps people to find it. Either name is equally valid.