GemPages support 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.
GemPages' limit for each uploaded image is 3 megabytes (MB). If your image file is larger than 3MB, you are advised to upload it to Shopify Admin by following the steps below.
Step 1: From your Shopify Admin, navigate to Settings > Files.
Step 2: Click on “Upload file” to upload your image.
Step 3: Hit the icon to have the image link copied.
Step 4: From the GemPages dashboard, open your preferred template to edit. Drag and drop an Image element to your desired position.
Step 5: Next, you can paste the image link in the Image Src box under the Settings tab to show the image on GemPages.
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.
|normal||The default setting is suitable for most cases.|
|better||≈125% file size compared to normal.
|best||≈170% file size. Use this value when you need a high-resolution image regardless of the file size.|
|lighter||≈80% file size. Suitable for relatively large images without significant loss in quality.|
|lightest||≈50% file size. Use this value for retina resolutions when you don’t have to worry about the quality of each pixel.|
|smart||The system will automatically select the optimal file size while preserving image quality.|
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: