How To Upload An Image Online

Uploading images

This folio was printed on May 11, 2022. For the current version, visit https://help.shopify.com/en/manual/online-shop/images/theme-images.

Y'all can employ many dissimilar kinds of images on your online shop, including your company logo, production images, slideshows, banners, and blog posts images. Shopify'southward Imagery service manages your images, ensuring the best possible image format is displayed at the appropriate identify in your online store.

Upload images

There are two different places where you tin upload images for your online store:

Upload images on the Files folio

Yous can upload images on the Files folio of your Shopify admin. This is useful considering yous can access these images while editing any of your themes. To learn more than, encounter Uploading files to your website.

Upload images in the theme editor

You can add together images to your theme in the theme editor.

Steps:

From your Shopify admin, go to Online Store > Themes.
Find the theme that you desire to edit, and and then click Customize.

From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Observe the theme that yous desire to edit, and and then tap Customize.
Tap Edit.

From the Shopify app, tap Store.
In the Sales channels section, tap Online Shop.
Tap Manage themes.
Find the theme that you lot want to edit, then tap Customize.
Tap Edit.

Employ the dropdown menu to select the template yous desire to edit.
From the theme editor sidebar, click the section or block that yous want to add an image to.
Click Select Image, and so practice one of the following:
- To upload an prototype from your calculator, click Upload.
- To use a costless stock prototype from Burst, click Explore free images.
Click an paradigm to see a preview of the image in your theme. After yous find an paradigm that you want to apply, click Select.
Click Salve.

Add an epitome by using metafields

If you accept metafields prepare for your images, then you can utilize the dynamic source picker to add an image. For more data nigh metafields and supported image formats, refer to Metafield content types and values.

You tin create paradigm banners with the following elements:

one or two images
text
an activeness button

On desktop computers, imprint images are displayed side past side. Because this format isn't suited for mobile devices, you can stack your image imprint pictures by selecting the Stack images on mobile option in the Prototype imprint theme settings. For more information on epitome banners and slideshows, refer to Best practices for slideshow and prototype banners.

Image formats

Shopify supports the post-obit paradigm formats:

JPEG or JPG
Progressive JPEG
PNG
GIF
HEIC
WebP

When to use JPEG images

JPEG images are platonic for photography and other all the same images with complex colors. The JPEG format has a palette with millions of colors. JPEG too has lossy compression, which can assistance to keep folio loading times fast without a noticeable loss in image quality.

Use the JPEG format for the following kinds of images:

products
banners or slideshows
pages and web log posts

When to utilise PNG images

PNG images are ideal for graphics and icons with flat colors and without gradients. The PNG format is likewise able to support transparency.

Utilize the PNG format for the following kinds of images:

logos
icons
borders and trims

Automated image compression and format option

To keep load times fast, Shopify automatically compresses images when they're displayed on your online shop. Compressing an epitome means reducing the file size to allow for faster page loading.

Additionally, Shopify automatically determines the best possible file format to use when delivering your images. For case, when nosotros detect that a buyers web browser supports modern image formats such as WebP, Shopify will deliver your image in those formats.

Upload limits

Image uploads to Shopify have restrictions in terms of both megapixels and file size (measured in megabytes). Megapixels are used to bespeak how many millions of pixels make up an paradigm. Megabytes are used to indicate how many millions of bytes of retentivity or disk space an image takes upwardly.

Images uploaded to Shopify tin't exceed either of the following limits:

20 megapixels
20 megabytes

To detect your image's megapixels, you can use the following equation: (pixel width x pixel elevation)/1,000,000. For example, an prototype with a resolution of 4900x6930 would be 33.9 megapixels based on the equation: (4900x6930)/ane,000,000 = 33.9 MP.

Color profiles

When you view an image on your online shop, the colors in the image might look dissimilar from those in the original that you uploaded to Shopify. This tin can occur when an image has a colour contour, which is a set of data stored in a file with a .ICC or .ICM extension. Color profiles are often embedded into images to help standardize the fashion that the colors appear on dissimilar devices. When images are displayed on your online store, their color profiles are removed.

Color profiles are removed for a few reasons:

Non all devices are able to read .ICC or .ICM colour profiles, so keeping them intact tin can upshot in inconsistencies in image colors across devices.
When an uploaded image doesn't include a color profile, sRGB (the about common colour profile used to brandish images on the web) is assumed by the web browser. This ensures that your images await the same beyond all major spider web browsers and devices.
Color profiles can take up big amounts of disk space, which can upshot in heavy loading times.

Remove the color profile from an image

You can remove the color profile from your image by saving it without the colour profile before you upload information technology to Shopify. This process varies depending on your image editing program.

Remove a colour profile using Adobe Illustrator or Adobe Photoshop

To remove a color profile using Adobe Illustrator or Adobe Photoshop:

Click Edit > Assign Contour.
Select Don't Color Manage This Certificate.
Click OK.

Remove a colour contour using Adobe InDesign

To remove a color profile using Adobe InDesign:

Click Edit > Assign Profile.
For RGB Contour and CMYK Contour, select Discard (Apply Electric current Working Space).
Click OK.

For more detailed information, yous tin view the Adobe documentation on color profiles.

Many Shopify themes characteristic large images or slideshows that scale to the superlative of your browser or adapt to your screen size.

If y'all use ane of these themes or have a large slideshow or background paradigm, then it's important to understand what types of images will look all-time.

Because large images tin't fit on all devices, Shopify sometimes displays simply part of the image depending on the device you lot're using. If your image slideshow contains a lot of large images, and so you might find that parts of the images aren't visible.

Recommendations

To make sure that your images work well with your theme, here are some things to keep in listen:

Some themes have an paradigm position setting that you tin employ to specify which part of an image is the focal point. If your theme doesn't accept such a setting, then make certain that the focal point of each prototype is in the center. When your images are cropped on some screens, the focal bespeak is visible, while areas around information technology are hidden.
Images that you apply for slideshows or backgrounds shouldn't accept text in them. If the text is a part of the prototype itself, then information technology might get moved around, cropped, or adjusted based on your theme. Use the theme editor to add text and links to your slideshows.
For images that you use in slideshows or as backgrounds, choose simple images so that any overlying text is like shooting fish in a barrel to read.