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.