Working with images

Supported Image Formats

PageCloud supports direct uploads of many image formats:

• Jpeg - Good quality to file-size balance. 
• PNG - Best for smaller objects and when background transparency is needed.
• SVG -  Vector Graphic.

Image file size

The file size of your image will have an impact on the speed of your page. PageCloud does not have a file size limit. We provide tools and guidance to give you and your site's visitors the best experience.

• Pagecloud optimizes images on upload to give you an optimal image size and quality based on the display size of the image on a page. Learn how to disable image optimization
• We recommend exported larger images to smaller web friendly sizes before uploading. If you are not familiar with exporting to a specific size, you can use an external service such as TinyPNG.
• Images on the web are generally be under 1MB in file size each. Webpages are generally under 10MB in total size. This provides a good viewing experience for your site visitors, especially on mobile devices.

Upload an image to your page - Drag and drop

1. On your computer, find the image you would like to add to the PageCloud Editor.
2. Click and drag the image from your computer directly onto your PageCloud page.
3. Your image will upload directly onto the page.
4. Click Save to save the page.

Upload an image to your page - Image tab

1. While editing a page, open the left Sidebar. 
2. Select the "Images" tab.
3. Click "Upload Image". 
4. Locate and select the image you would like to upload to your page. 
5. The image will upload and be placed directly onto the page.
6. Click Save to save the page.

View images already added to your site

1. While editing a page, open the left Sidebar. 
2. Select the "Images" tab.
3. Under the "Site" tab you will find all images that have been added to your site. 
4. Click and drag an image to add it to your page. 
5. Click Save to save the page.

Purchase premium stock images 

When you need an image of something that is not economical to capture yourself, you can purchase a stock image instead. PageCloud offers premium stock images for sale through our partnership with ShutterStock. 

1. While editing a page, open the left Sidebar. 
2. Select the "Images" tab, then Select "Premium".
3. Use the search box to search through ShutterStock's collection of images. 
4. Drag an image onto your site to include a preview of the image. 
5. To purchase the image, click "Save" to open up the purchasing window. 
6. Agree to the Image Usage Guidelines and click the "Purchase" to finalize the sale.
7. Click "Save" and "View Live" to see your beautiful new images. 

Add an Image Gallery to your page

There are a number of image galleries that can be used to display your images as a single organized collection on your page.

1. While editing a page, open the left Sidebar. 
2. Select the "Images" tab, then select the "Galleries" tab. Select an Image Gallery Type:  
   • Grid - All Images appear cropped to the same size.
   • Masonry - Images appear stacked in columns of varying heights.
   • Justified - Images appear displayed in even rows with varying widths.
   • Tile - Focus on a single image with rest of images displaying as thumbnails. 
   • Slider - Single image displays at a time with navigation controls. (More info here)
3. Drag any Image Gallery layout onto the page. 
4. Click "Add image" to begin adding images to the gallery. 
5. Click "Save" and "View Live" to see your beautiful new slider image gallery.

Change image display options

You can change image display options to adjust how the image is represented on the page. 

1. Select an image.
2. Head to the "image" tab within the Editing Menu.
3. Select Display Options, then choose an Image display option:
   • Standard (default) - Best format for SEO. Use Crop tool to change the image ratio.
   • Expand to fit - Becomes a background image and will expand to fill the object.
   • Shrink to fit- Becomes a background image and will shrink within the object. 
4. Click Save to save the changes.

Image zoom effect ( Ken Burns effect )

You can set an image to slowly zoom in or out as the page loads or the images comes into view. 

1. Select an image.
2. Head to the "image" tab within the Editing Menu.
3. Select Image zoom effect. 
4. Adjust the image zoom effect settings for your desired results. 
   • Apply zoom when - Set to either "Images scrolls into view" or "Page loads"
   • Direction - Set to either "Zoom out" or "Zoom in"
5. Click Save to save the changes.
6. View live to see the image zoom effect in action.

Image parallax effect

This will keep the specific image's perspective fixed in place as the rest of the page scrolls past. 

1. Select an image.
2. Head to the "image" tab within the Editing Menu.
3. Select Display Options, then choose an Image display option that supports parallax effect:
   • Expand to fit - Becomes a background image and will expand to fill the object.
   • Shrink to fit- Becomes a background image and will shrink within the object.
4. Scroll down within the Display Options tab to find parallax effect. 
5. Toggle the parallax effect on or off.
6. Click Save to save the changes.
7. View live to see the parallax effect in action.