Exporting Images from Asset Panel

Community resources General
1

Hi Webflow Experts!

I have been handed a project from another person and I am wondering if there is a way to export images you want from the asset panel? I would like to edit some of them but can’t seem to find a way to access them.

Is it even possible to export from the asset panel?

2

They’re on the web so… any way to save an image is the good way.

Click on the arrow to open the asset into its own tab
Then ⌘+S in the tab to save locally

image
image297×515 23.1 KB

1 Like
3

Hi,

Im in the same boat - bought a new template to migrate/embed pages into my main site. those pages come with 306 icons that I need to migrate across.

So is that it?

Right click & download 306 times :exploding_head:

Really?

Now Im no developer but I seriously love Webflow once I got my head round it. Still am and its been fun all the way with plenty of aha moments.

So Im really scratching my head on this one as its a WT* moment

Why no ability to download my own assets/media files from the assets panel should I want to so?

And I really want to do so!

2 Likes
4

Ditto. There is no export of Images. There is no export of Blog Categories (vs. Blog Posts). This means if you run a blog site, you must manually download all images, and you must manually re-code/recreate your tags on all categories, because there is no mapping tool. You can export Categories, e.g., but that doesn’t mean that template creators cared to have mapping into the template to change to their template…

5

Hm, but if you want to export the images you do so by going to your assets manager.

An advanced “solution” what I see is this other solution stacket what’s have been posted on this forum. You can export the images all at once if this is your concern . Here is one blog post about it. CMS Collection images EXPORT - #2 by PixelGeek

6

Thanks for this @SoulFire will look into

My issue remains - no native download of all media assets is major shortcoming

1 Like
8

I have this same issue for a different use case. On the WebP Conversion Tool page it says explicitly to download from the Asset Panel: “Important: When you convert existing assets to WebP, the original asset files will be replaced by the WebP asset. If you want to keep the original image file…download them from the Asset panel before converting.” I want to convert to WebP but can’t take the time to manually download 100 assets individually. Why is there not a “select all” and “download” option?

9

This would be super useful for mass downloading old images from sites I made a while back where I didn’t properly compress images. :sleepy: Oh well. Manual download and compress it is, until they add this feature.

10

Do you have licence to use those images?

11

Define “properly compress images.”

12

For anyone who is desperate on this, it is possible to download all of the images using a series of manual hacks, though I’ve only needed to do it a few times for clients.

My current best process for this involves using Chrome Dev Tools, and ChatGPT+ with Code Interpreter to make the data extraction trivial.

Here’s a tutorial on how to do it.

13

I understand that the topic has been solved, however if anyone else stumbles upon this problem and needs a simpler/alternative solution, here is a code snippet.

This code snippet needs to be:

  • Pasted in the console on the live website
  • Used only on the images you have the rights to use

Steps:

  • Scroll to the bottom of the page you are currently on.
  • Open up the console (F12 or Ctrl+Shift+I)
  • Go to the console tab.
  • Paste the code and press “Enter”.

How it works:

  1. It first loads the JSZip library into the website.
  2. It selects all the image (<img>) elements on the page and checks their src attributes for PNG, JPG, or JPEG file extensions.
  3. It fetches each image asset and zips them together using the JSZip library.
  4. Finally, it triggers the download of the ZIP file containing all the images.
(async () => {
  // Load JSZip library for zipping files
  const jszipScript = document.createElement('script');
  jszipScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js';
  document.body.appendChild(jszipScript);

  // Wait for JSZip to load
  await new Promise(resolve => {
    jszipScript.onload = resolve;
  });

  const zip = new JSZip();
  const imgFolder = zip.folder('images');
  
  const imageExtensions = ['png', 'jpg', 'jpeg'];
  const images = document.querySelectorAll('img');
  
  const fetchImageAsBlob = (url) => {
    return fetch(url)
      .then(response => response.blob())
      .then(blob => ({
        blob,
        filename: url.split('/').pop()
      }));
  };

  const imagePromises = [];

  images.forEach(img => {
    const src = img.src;
    const extension = src.split('.').pop().toLowerCase();
    
    if (imageExtensions.includes(extension)) {
      imagePromises.push(fetchImageAsBlob(src));
    }
  });

  const blobs = await Promise.all(imagePromises);

  blobs.forEach(({ blob, filename }) => {
    imgFolder.file(filename, blob);
  });

  // Generate the ZIP file
  const zipBlob = await zip.generateAsync({ type: 'blob' });
  
  // Create a temporary download link and trigger the download
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(zipBlob);
  downloadLink.download = 'images.zip';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  
  // Clean up
  downloadLink.remove();
})();
2 Likes