Media plays a crucial role in enhancing the visual appeal and effectiveness of your website. Proper use of images, videos, and other media types can engage visitors, convey information more effectively, and create a more dynamic user experience.
-
Any file (text, image, video, or audio) uploaded to the system is publicly available. No personal and/or confidential information should be uploaded. To remove the file completely, delete the file from the Media Manager.
-
Images, Icons, Audio Clips, and Files: up to 15,000 images, audio clips, and files combined per site. Additional files may result in an error message. Each file should be no larger than 50MB.
-
Videos: up to 100 per site. Additional files may result in an error message. Each file should be no larger than 200MB. Larger files may result in an error message or not complete uploading. If additional videos are needed, YouTube or Vimeo may be possible options.
-
Spaces within file names are not supported. Files are able to uploaded that have spaces, though could result in unexpected behavior with the file.
-
Files and their names may be cached for a while. If a file is deleted, it will likely remain available for some time. This includes the file name, which means you may encounter the error "Name already exists" when attempting to use the name of a recently deleted file.
-
Due to caching, it is not recommended to upload a file with the same name as a recently deleted file, as the deleted file may continue to appear for some time.
-
SVG file type: SVGs are image files that contain HTML code, meaning when you add an SVG icon to your site you are also adding lines of code. Multiple complex SVGs can add thousands of lines of code and cause your site to load slowly. If you need to use multiple SVG icons on the same page, we recommend turning some of them into regular images (.png, .jpeg, etc) to avoid loading or functionality issues.
-
Files of any type cannot be uploaded to a domain's root folder.
-
File metadata (including EXIF data) is not supported and will be removed upon upload.
Aspect ratio is the relationship between the width and height of media and represents the numerical value of its shape (typically, the aspect ratio is most important in images and videos). The size of the media doesn’t necessarily change its aspect ratio. For example, both 1280x720px and 3840x2160px have the same aspect ratio of 16:9.
If a media file's aspect ratio is significantly different than the shape of the section or element it will be used in, it may appear to be cut off. Depending on the widget or element, changing the file's aspect ratio may be the best way to fix it. For images, the built in Image Editor can be used to change the aspect ration by cropping it. If a video needs to be edited, it would need to be done with an outside tool.
Note
-
File size limit is 50MB per image.
-
Image files contribute to the 15,000 limit file.
The following image file types are supported:
png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp
The editor optimizes images on demand, tailoring them to the device being used and the visible size on the site.
Note that the size of the uploaded image is never increased, and only images displayed on the site smaller than the original are optimized. For example, if you upload an image with a 2000px width but it’s used in an area requiring only 1920px, the image will be optimized to 1920px. However, if you upload an image with a 100px width, it won’t be optimized and may appear pixelated if displayed in a larger area.
While the editor can optimize images of any size, it’s recommended to upload images close to the maximum size they will appear on the site. For instance, if the image will be a thumbnail with a width of 160px, consider uploading an image with a maximum width of around 200px.
In addition to optimization, all images on the site are served in the WebP format. This format allows for smaller file sizes while preserving image quality, contributing to faster site performance without sacrificing visual clarity.
Note
E-Store's image optimization works only on JPG and PNG images. If you are uploading a TIFF, GIF, or other image formats, E-Store might not be able to optimize it.
Aspect ratio is the ratio of an image's width and height attribute and is essentially associated with the shape of the image. A 16:9 aspect ratio can be a 16x9 px image, or a 1600x900 px image. It is basically any image resolution that has the ratio of 16:9.
Visualizing the two most common aspect ratios:
The resolution of an image refers to the amount of detail an image holds, specifically the number of pixels that make up the image and is essentially the detail and clarity of the image.
While images are optimized on your site, it does not actually resize the design of images on your site. If you use an image on the desktop that has an aspect ratio of 16:9, it will look perfect on the desktop since a desktop device is wide. A mobile device, however, is much smaller, and so a 16:9 aspect ratio will sometimes look small.
To compensate, you can either use the hide on device feature to create specific versions for those devices or you can resize the image's dimensions in the design area of the widget. Changes to size are device independent for most elements.
The recommended aspect ration is dependent on where it will be used and how you would like it displayed.
If an image will be used in a landscape orientation, an example recommended ratio could be 16:9 since this would indicate it will be wider than it is tall. It would be the opposite for portrait, 9:16.
For size recommendations, in general it is best to keep the image width the same as or slightly larger than what the optimized size will be. For example, if the image will be used in an image widget on desktop, the recommended max width is 1920px or only slightly larger. Larger images require more optimization, which can affect image quality. If optimization is turned off, larger images won't suffer in quality but will slow down the site due to their size.
Common Ratios and Sizes
When an image will be spanning the width of the site:
-
Common aspect ratios for desktop: 16:9, 3:4
-
Common resolution sizes (px) for desktop: 1600x900, 1280x720, 1280x960
Mobile devices often have the opposite aspect ratio compared to desktop devices. You may have to use the hide on device feature to display mobile sliders correctly.
The aspect ratio and size of a widget's image can vary based on the widget's size, location, and settings. While there are general guidelines, there are no fixed standards.
Gallery widgets and widgets that offer gallery layouts
These widgets include the following:
-
Photo Gallery
-
Product Gallery
-
Media Slider
-
E-Store page widgets
The aspect ratio of images in these widgets should reflect how you want it to display.
-
For example, square style galleries should have 1:1 ratio of images.
-
Tall image style galleries should have longer height ratios, like 2:5, or 200px by 500px.
-
The image ratios should be the same for design consistency. Leave some padding in the image to use the hover effect so that your images do not get cut off.
-
Common resolution sizes (px): Any resolution, but when possible not larger than 1500px for page speed.
All the available layouts come with set aspect ratios that won't change, though the layout options with uniform images sizes have the option in the design settings to change the height. When the height is changed for these layouts, the aspect ratios will change based on the size of the widget.
The set aspect ratios for the mosaic layouts (the options with the images having varying sizes) will vary depending on the layout as well as the number of columns set in the design settings.
While the widget on the category page offers a variety to select from, the image on the product page has an aspect ratio of 1:1.
To see the available options for the widget on the category page:
-
In the side panel, click Store.
-
Click Store Pages.
-
Click Category Page (if the store does not have categories set up, the page will be grayed out and not available to be edited).
-
Right click on the widget displaying the categories and select Edit Design.
-
Click Products.
-
Click the thumbnail under Layout to see available layout options.
-
To see the available aspect ratios, scroll down in the Products section to the Image aspect ratio option.
By default most element's aspect ratio will override the image's aspect ratio, resulting in parts of the image being cut off. However, some elements include a setting that allows the full image to be displayed without being cropped.
|
Original Image |
Image in widget with overriding aspect ratio |
|---|---|
|
Aspect ratio is 3:2 |
Example possible aspect ratio could be 3:1 (just the part of the image that isn't covered by the white boxes) |
When using the Cover option in the element's design settings, the element's aspect ratio will override the image's aspect ratio. If the aspect ratios do not match, parts of the image will be cut off.
Additionally, some elements, such as rows and sections, adjust to the device's screen size. As a result, the element's aspect ratio will change based on the size of the screen currently viewing the site.
One technique to prevent the image from being cutoff is to use the Full Image option in the element's design settings. Please note that not all elements will have this option.
For more information on backgrounds, see Element Backgrounds.
The total area of an image cannot exceed 3,145,728 pixels. It is unlikely any of your images will be over this limit, but you can quickly check by multiplying the pixel width by the height.
Each file should be no larger than 50MB. Larger files may result in an error message or not complete uploading.
Uploading an image bigger than the limit could result in the following errors:
-
Images fail to upload.
-
Images upload, but thumbnails in the image picker do not display.
-
Images do not load in the editor.
-
Images do not load on the live site.
It is recommended you use SVG format for logo images, as SVG files are not optimized in the same way as other image files, so even if the logo you upload is small in size, you will not lose quality.
Note
SVGs are image files that contain HTML code, meaning when you add an SVG icon to your site you are also adding lines of code.
Size Guidelines
The range for the width of the logo when incorporated into the header or footer is between 250px - 400px. Typically, the height is not a concern and will be determined by the logo's aspect ratio.
Uploading the biggest resolution for your site guarantees that your site's images are high resolution for your clients and customers. However, keep in mind that large images also have a drastic effect on your page speed. Since high-resolution images are scaled down, users do not normally notice the difference in resolution. It is better to upload images that are as large as how they are intended to be used. For example, if you have a picture that is 300px by 300px on your site, you do not want to upload it as a 4000px by 4000px image.
To optimize image sizes for your site:
-
Only upload images as large as they are intended to be used (for example, if the image is going to appear as 300px by 300px on the site, do not upload it as a 4000px by 4000px image).
-
The maximum image size cannot exceed 3,145,728 pixels.
-
Be aware of aspect ratios, as 16:9 images look great on desktop but appear too small on mobile. In this case:
-
Use the Hide on Device feature to create specific versions of the image for each device.
-
Resize the image dimensions (aspect ratio) to fit - size changes are device independent.
-
The total area of an image cannot exceed 3,145,728 pixels. It is unlikely any of your images will be over this limit, but you can quickly check by multiplying the pixel width by the height.
Note
-
For information and guidelines for site icons, see Site SEO Settings.
-
Icon files contribute to the 15,000 limit file.
The file type, SVG, is the only supported file type for this tab.
-
Common aspect ratios: Generally 1:1, but any aspect ratio will work.
-
Common resolution sizes (px): 200x200, 80x80 or any resolution. SVGs can be any resolution.
Warning
SVGs are image files that contain HTML code, meaning when you add an SVG icon to your site you are also adding lines of code. Multiple complex SVGs can add thousands of lines of code and cause your site to load slowly or potentially break. If you need to use multiple SVG icons on the same page, we recommend turning some of them into regular images (.png, .jpeg, etc) to avoid loading or functionality issues.
Videos can be hosted in the site's files by uploading them to the media manager or by recording directly using your computer's camera and microphone. Additionally, videos from YouTube, Vimeo, or Dailymotion can be added to specific parts of the site using the video widget or as a background for elements that support video. These external videos will only be available in the location where they are added and will not be available in the editor.
Note
Up to 100 videos can be uploaded per site. Additional files may result in an error message. Each file should be no larger than 200MB. Larger files may result in an error message or not complete uploading. If additional videos are needed, YouTube or Vimeo may be possible options.
-
Videos can take time and bandwidth to load, and can distract users from important links or text on your page, so use videos sparingly.
-
YouTube videos are not supported on mobile as they do not auto-play on iOS devices.
-
iPhones with a battery on low power mode will not auto-play videos on a site, and instead will show a play button.
-
Background videos will not play sound.
-
When adding a Dailymotion video that is part of a playlist, make sure to only add the direct link to the video (and omit the playlist parameter, which looks something like this:?playlist=x1x2f3). If your video’s URL has this parameter, just remove it. For example:
https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2would behttps://www.dailymotion.com/video/x60ktex
There could be a number of causes for why a video won't upload. Here are some techniques to try and troubleshoot:
-
Check the file size to ensure it is below 200mb.
-
Review the current videos uploaded to ensure there are less 100.
-
Try uploading a different video.
-
If another video uploads, it likely is related to the video's file. Creating a new file from the original source may fix it.
-
If another video does not upload, it may be related to something local to your computer, for instance page speed or browser related. If it's local to your computer, some techniques to try could be:
-
Clearing browser cache
-
Trying a different browser
-
Trying a different network
-
Restarting your computer
-
-
Note
Audio files contribute to the 15,000 limit file.
Audio can be hosted in the site's files by uploading them to the media manager or by recording directly using your computer's microphone. Additionally, audio from SoundCloud or Mixcloud can be added to specific parts of the site using the audio widget. External audio will only be available in the location where it is added and will not be available in the editor.
For details on how to incorporate audio into a site, see Audio Widget.
Note
-
Files in the file tab of the media manager contribute to the 15,000 limit file.
-
You cannot upload files to your root folder.
The file tab in the media manager supports nearly any file type. Files uploaded here can be linked to using the link picker but cannot be directly used in any widget. For example, an image uploaded to this tab will not be available for use with any image widget.
File names can remain cached for a while. If a file with the same name was recently deleted, it is likely still cached, and you will need to use a different name.
A file with the same name may have recently been deleted. File names can remain cached for a while. The file would need to be renamed.
To rename a file, open the Media Manager, select the file and click Rename. If using a library or picker, toggle on the Manage option for the library or picker.
This is likely due to an existing file with the same name or a recently deleted one. File names can remain cached for a while, so renaming the file may be the best option if you encounter this issue.
To rename a file, open the Media Manager, select the file and click Rename. If using a library or picker, toggle on the Manage option for the library or picker.