The Image Library [Zipify Pages]

Learn all about the Image Library feature and how it helps improve page load speed!

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago

Overview

The built-in Image Library for Zipify Pages contains all of your uploaded Images and GIF files so that you can easily use them in your pages and blog posts.

This functionality allows you to upload Images/GIFs and then easily re-use them on your Landing Pages, Product Pages and Blog Posts from the library without needing to upload them again later. To use it in a page/blog post just click on an Image element within a section and select your image or GIF from the Library!Β 

It also includes a built-in integration with the Unsplash image library, the internet’s source of freely-usable images powered by creators everywhere. Unsplash images are available in the Page Builder only, when adding a new image to a section there:

Working with Settings > Image Library

By navigating to the Settings > Image Library section of the app, you're able to do the following there:

  • Upload new Images/GIFs from your computer or via URL

  • Create Categories of Images/GIFs

  • Manage existing Images/GIFs

If you already have existing images added to your Image Library through the page builder, then you will see them listed there under the "All Images" category:

Using the Filtering options, you can filter by:

  • Recently Added

  • Recently Used

  • Most Used

πŸ“ For "Used", we consider the Usage in the app, no matter whether it is a published page, blog article, template, etc or not.

Upload new Image/GIF files from your computer or via URL

The Image Library supports the following file types only:

  • JPG / JPEG

  • PNG

  • WebP

  • GIF

The MAX file size supported for Images is 5 Mb and for GIFs is 15 Mb

πŸ“ Larger image/gif file sizes may decrease page load speed. It's recommended to use light-weight images when possible.

Upload from your Computer:

Click the "Upload" button and then select the file(s) from your computer. Up to 50 images can be uploaded at a time. To select multiple images from a folder on your computer, either left-click and drag your cursor to select the images or hold the Ctrl key on Windows (Cmd on Mac) and left-click on each image separately.

Once your image file(s) have been selected, click the "Open" button to initiate the upload process.

Upload from a URL:

Click the "Upload by URL" button. Paste in the image URL link and click the "Import" button:

Create a new Category

You can create new Image Categories for organizational purposes! The number of new categories you can create is unlimited.

There are 2 ways to create a new Image Category:

  • Using Existing Images already added to the library

  • Making a new Category from scratch

πŸ“ Images can also be added to existing categories as well if you have any.

New Category from existing images in the Library

Select the image(s) you want added to a New/Existing Category

  • Click the "Select All" link to select all images at once

  • Click the "Deselect All" link to deselect all images at once

  • Multiple different images can be selected by clicking on them

  • To select a Range of images, click on the first image, hold the Shift key on your keyboard and then click on the last image

Once your image(s) have been selected, click the "Add to Category" button.

  • Select "Create New Category" from the dropdown to create a new category

  • If you already have a Category created that you want to add images to, select the Category Name from the dropdown instead

  • If it's a new Category, enter in the name into the "Category Name" field

  • Click the Confirm button

Depending on the action chosen, the new Category will be created or the selected images will be added to an existing category:

πŸ“ Image(s) from one category can be added to other categories as copies well.

By clicking on the "More Actions" menu, the following options are available for the Category:

  • Rename

  • Delete Category

πŸ“ If "Delete Category" is chosen, only the Category itself will be deleted. Images from the Category will still be available in the Image Library.

New Category from scratch

Click into the "Categories" section and then click the "New Category" button:

Enter the new Category Name and then click the "Create" button:

Your new Image Category will be created. From there, you can either:

  • Upload new images to the category or you can

  • Add existing images from the Library

...by clicking on the corresponding button:

Deleting Images from the Library and/or Categories

When you delete an image(s) from the Image Library, it still remains stored in our database so they can be served up on any published pages where you might still be using them.

When deleting an image(s) from a Category, you have the following 2 options available:

  • Remove Permanently β†’ delete both from the Categorie(s) (including other categories where this image is present) and from the Library

  • Delete from Category β†’ delete only from the particular Category

Flow Diagram of Deletion process:

Exceptions

The following images are not added to the Image Library:

  • Default images from the Templates

  • Product images from Shopify

  • Favicon image from the Settings > General tab

  • Open Graph image in the publish/update page dropdown

Uploading and Changing Images in the Page Builder

To upload an image to the Image Library through the page builder, click on an Image element within a page section and then click either the "Upload by URL" or "Upload" button from the Image Library popup:

The image library supports the following image types only:

  • JPG / JPEG

  • PNG

  • WebP

  • GIF

The MAX file size supported for Images is 5 Mb and for GIFs is 15 Mb

πŸ“ Larger image/gif file sizes may decrease page load speed. It's recommended to use light-weight images when possible.

The fastest way to add multiple images to the Image Library is by navigating to Settings > Image Library and uploading from there, where multiple-image upload is supported (up to 50 images at a time).

Additional Notes and Features

  • The original image size and dimensions are stored when added to your Library. This means that you will always work with the unaltered image when selecting it from Library for use in a page/blog post.
    ​

  • This also allows Zipify Pages to create a set of optimized images (in different resolutions) in the back-end and automagically use the most optimal one for each screen resolution, which is key to better page load speed.Β 
    ​

  • Images added to your pages from the Library also employ a Lazy Loading coding technique which defers the loading of off-screen images resulting in improved page load speed.

Did this answer your question?