Article •
Optimising images and videos
Table of contents
Images and videos are large files, and lots of them on a page may make your online store slower to load than usual. Optimise images and videos to make the load time of your online store as short as possible.
Images affected by an aspect ratio setting
Many sections available in Emporium include an aspect ratio setting, which is used to display an image in a selected aspect ratio regardless of its original dimensions. For best results, from both a visual and page speed perspective, keep the original dimensions of the uploaded image as close to the selected aspect ratio as possible.
Images displayed at a fixed size
In Emporium, there are 4 locations where images are displayed at a fixed size:
- Your main logo, used in the header of all pages on your online store (except the password and gift card pages).
- The logo used on the password page.
- The logo used on the gift card page.
- Endorser images, in testimonials.
For best results across all devices, follow the advice below.
Logo
With Emporium, you can choose the width at which your logo is displayed on your online store.
For best results across all devices, the original width of your logo should be 3 times the width you choose. For example, if you choose a width of 180px in Emporium, then upload a logo that is 540px wide.
In the following example, the settings that affect your main logo are used, but similar steps apply to the settings that affect the logo used on the password and gift card pages.
- From your Shopify admin, go to Online Store → Themes.
- Next to Emporium, click Customize.
- Click the Header section.
- Under the LOGO heading, under Image, click Select image.
- Select the image to display, or upload a new image, and click Select.
- Under the LOGO heading, under Width, adjust the range slider.
Endorser images
Under each testimonial, you can show the image of the person who gave the testimonial. Endorser images are always displayed at 72 × 72px.
For best results across all devices, upload an image that is 216 × 216px in dimensions.
- From your Shopify admin, go to Online Store → Themes.
- Next to Emporium, click Customize.
- Under a Testimonials section, click a Testimonial block.
- Under Image, click Select image.
- Select the image to display, or upload a new image, and click Select.
Background videos
Available in the Media banner section, background videos are an excellent way to show off your brand. However, videos are very large files and should be used sparingly to avoid slowing down your online store.
Match the selected aspect ratio
For best results, from both a visual and page speed perspective, keep the original aspect ratio of the uploaded video as close to the selected aspect ratio as possible.
Keep videos short
Typically, the longer a video, the larger its file size. Keep videos short to maintain a small file size and improve page load times.
Remove audio
If you’re able to do so, then remove the audio from a video file before uploading it to Shopify. Background videos on your online store are always muted, so removing the audio will reduce a video’s file size without affecting its quality.
Only background videos are muted. Interactive videos, such as those used in product media or the Video section, have sound.
Upload a video to the Media banner section
In the following example, the settings that affect the display on mobile are used, but the same steps apply to the settings that affect the display on desktop.
- From your Shopify admin, go to Online Store → Themes.
- Next to Emporium, click Customize.
- Click a Media banner section.
- Under the MEDIA (MOBILE) heading, under Type, select the Video option.
- Under the MEDIA (MOBILE) heading, under Video, click Select video.
- Select the video to display, or upload a new video, and click Done.
- Under the MEDIA (MOBILE) heading, under Aspect ratio, select an option.
Videos added to the Media banner section must be uploaded to Shopify from the Files page in your Shopify admin.
Related articles