Show HN: Extract.pics – A tool to view and download images from websites | Hacker News Reader

Show HN: Extract.pics – A tool to view and download images from websites

extract.pics

64 pointspabue19 comments

Extract.pics is a small side project and the result of a few inconveniences. In the past months I have been working on the redesign of two news websites, so I needed a lot of images while creating the cencepts/mockups. I encountered a few problems, that I wanted to solve with this project:

- I didn't want to download just a few images and reuse them everywhere. That makes the design feel a lot less "real" and a lot less interesting. I'm also to lazy to download lots of images manually.

- Some of the images were set with background-image in CSS, what makes it more tedious to find and actually download them.

Yes, all the images used on a site are visible in the browser dev-tools. But you don't really have a preview or an easy way of finding the image you want. And you still need to download them all individually.

It might be good to know that extract.pics executes javascript and scrolls down for a few seconds before extracting all the images.

Hopefully this is useful for someone else out there.

Seems to work really well.

For those unaware, Firefox has a built-in way to do this which will work even on sites where you need to be logged in.

If you right click on the page and choose "Page Info", there's a Media tab. It can be sorted by the Size column. It includes video and audio files as well.

Thanks, nice to hear.

Wow, didn't know about this feature in firefox. I was thinking about adding support for audio and video as well, but I'm not sure if there is really a need for that.

I've been needing something to do this (easily) for more than a year.. nice to see this tool make it simple and easy. I popped in a url and it quickly showed 75 pics, I clicked select all and download - then got nothing (after a quick spin circle).

(using firefox, did disable ublock origin, still no download) -

Love getting the visual of the 75 pics with the basic details on size! Would love some extra info with a click perhaps showing the url it came from. (currently wondering if the 75 pics at 210x158 are just the thumbnails and I actually need a scraper to traverse further to get the bigger size for the next web site..

I've been considering some of the scraping tools out there.. but not sure I want to spend the time learning something only to have it not work the way I need.. see this particular site has a weird (hosting?) issue - where pics will 404 on some albums.. then if you go back and reload the page manually some minutes later - they appear - then you can click to download..

So I really need something to show me urls of pics that were in the html code but 404 - so I can go back and get them.

Thanks for the feedback!

I will look into the download issue. But i think it might be caused by the actual size you want to extract the images from. Currently the whole download may fail if one image fails to download.

Adding an option to show the actual source of the image, might be a good idea. I will look into this.

About the 404 issue: Currently every image that fails to load in the browser or is smaller than one pixel automatically gets removed. I will add an option later to disable this behaviour.

I'm impressed it seems to grabbed all of the images on a very JS heavy site with a carousel I just tried it on. Nice work.

One tiny UX thing to consider, instead of validating the string is a url, just try to load the site and if it fails, error then. I typed in a valid url without the "http://" part and the validation complained. You need to handle the "wait this isn't a valid site" case anyway, might as well kill two birds with one stone.

Thank you!

Nice catch. I just removed the url validation, so using urls without the http:// part will work now.

How about creating an API that geenrates a list of image urls?

Interesting idea. Do you have an idea when this could be useful?

Does the download and extract happen on the client side?

No, the extraction is done with puppeteer and chromium on the server. When someone downloads an image it's first downloaded to the server and then returned to the client, since it's not possible to download something via Javascript from another domain directly.

Thanks. When will video be on the way?

I might show videos in the near future. Not sure about the download yet since this would consume a lot more bandwidth.

this looks great! tech stack pls

Thanks!

Frontend: Vue.js, Buefy and Tailwind.css

Backend/Api: Laravel

Scraper: Puppeteer with puppeteer-cluster to enable concurrency and using a proxy to prevent getting blocked

Nice work! This is awesome.

Thank you!

Awesome, well done

Thanks!

Reply on news.ycombinator.com