The Image Element - FAQs

 

This article will cover the most common questions about the Image element.

Recommended Formats for Image element

GemPages supports JPEG, PNG, and GIF formats, which are compatible with all the browsers. GemPages serves images in WebP format as well, but only within supported browsers. For more information, kindly check out this article.

 

JPEG format can minimize image size without losing too much quality. Therefore, it is recommended for product images, banners, or blog posts. PNG format supports transparency, making it ideal for logos, icons, borders, and trims. You can use GIF format for images that contain animations. 

How can I upload an image that is greater than 3 MB in size?


In order to maintain the snappy rendering speed of GemPages Editor, uploaded images are limited to a 3 MB file size. However, you can still add heavy images by embedding them onto your page.


Step 1: Go to Shopify Admin > Settings > Files



Step 2: Click on the “Upload Files” button at the top right corner and upload your image. If you have not uploaded any files before, the button will also appear in the middle of the screen.

 


Step 3: Next, locate the Link section and click on the chain icon to copy the source link of your image. 

 


Step 4: Go to the GemPages Dashboard and select the page that needs editing.

 

Step 5: In the Editor, drag the Image element onto your page and enter its Settings tab

 


Step 5: Paste the copied link into the Image Src field and wait for the Editor to load.

 

 

How can I resize images?

 

First of all, you can always resize your image using the Image element’s parameters under the Settings tab.

 


That said, you can also reduce the size of your large image by dropping it inside a Row element.

 

Step 1: Drag out and place a Row element right underneath or above the Image element.

 

Step 2: Drag the Image element and drop it inside the Row.

 


Result:

You can see in this picture below that the image has been shrunk to nicely fit inside the row.

For further adjustments, use the Row's Dimensions (Width) section, which can be edited by pixels (px) or percentage (%).

 

 

How to compress your image?

GemPages also compresses your images for faster loading speed. As compression can result in a change in image quality, you also have the freedom to select its level by adding /quality/value after the image link. For a better understanding of the values for image compression, check out the table below.

 

 

Let’s say you would like to upload an image reduced 80% file size. Kindly replace the value in /quality/value with “lighter” in your uploaded image link. The image link should look like this:


https://ucarecdn.com/da87639c-280b-4fbf-8e41-015e754efd22/-/format/jpg/-/preview/3000x3000/-/quality/lighter/

 

For the other image properties, you can check out this link for more details.

And there you have it! To learn the full function of the Image element, please visit this article, and if you have any questions along the way, our GemPages Support Team is here to help.

Contact us via email or live chat.


Was this helpful?