Badgezilla Icon

Badgezilla

Flex Theme Sections Icon

Flex Theme Sections

Checkout Toolkit App Icon

Checkout Toolbox

Linear Shopping Experiences

Brand-It! Calendar

Previous | Next

Episode 105 - All About Images in Your Shopify Store

Subscribe to the Podcast

The Podcast

Links

Software

    Help the Podcast

    Transcript 

    Hey, Scott Austin here.

    In this episode, I'm going to do an update on episode number 4 of the podcast from 2019.  That episode was on how to use images in your Shopify store.  But Shopify has made many improvements to how they manage images since then.  So let's go over how to use images in your Shopify Store in 2023.

    I first want to start by discussing the importance of images in your Shopify store. I probably don't need to explain to you how powerful images are in quickly communicating a lot of information to your customers. We humans are very visual creatures. In fact, a lot of the things that we call good design on a website are actually in the images, not in the HTML or the CSS of the website. So if you think your store looks low quality or has poor design, the quickest and most effective fix is usually improving the quality of the photos and graphics in your store. Your images are very important in communicating the quality of your products and your brand. So let's look at what you should use for images in your Shopify store.

    We'll start with a little background on image types. Image files fall into these two buckets.

    • The first bucket is raster images. Raster files have pixels or really small dots that make up the picture. If you've ever zoomed in on an image and noticed that it is comprised of a bunch of small squares, that's because it's a raster image. Photos you take on your phone are an example of raster images. The advantage of raster files is they can capture complex details and changes in colors and shadow which a typical photo needs.
    • The second bucket is vector images. Vector files do not use pixels to create the image. Instead, vector files use geometric shapes, things like lines, arcs, rectangles, et cetera. These elements are layered and combined to create the image. The advantages of vector files include:
      • They are easy to edit.
      • The file can be scaled to any size without loss of quality.
      • The file is typically a much smaller file size than a raster image.

    Image File Types

    Now, there are many different image file types. In fact, there are too many to get into here as many of the image editing software apps have their own proprietary file types. Regardless of what file type you start with or what software you use. Here are the file types that you're going to add to your Shopify store:

    1. JPG, which is spelled J-P-G. This is a raster format.
    2. PNG. This is also a raster format.
    3. WEBP.  This is a raster format and a newer standard on the internet that supports many of the features of JPGs and PNGs.
    4. SVG. SVG is a vector format. Every web browser can read and display SVG images.

      Now before we proceed, I want to mention a file type that you should not be using in your store and that is GIFs. GIF is spelled G-I-F. Most people are familiar with GIFs as the format supports short animated sequences like mini-movies. So a lot of the funny animated memes on the Web are GIFs. But you should not use GIFs in your Shopify store as GIFs have a very large file size, which can adversely affect your store's performance. If you need animation or short video, then you should use the HTML5 video format which I covered in another podcast focused on videos, which I'll link to in the show notes.  And if you do upload a GIF, Shopify will automatically convert it into an animated WEBP file.

      So back to images and Shopify. A common question is which image types should you use in your Shopify store? The short answer is that your store should use multiple types.  You'll want to pick the right format for the intended use of the image. Here is some guideance to help you pick the right format.

      SVG Graphics

      SVGs should be used for graphics for things like your store's logo and icons.  You may not be familar with SVGs as Shopify recently added SVG support to the Shopify admin.  SVGs are typically small in file size and present the highest quality image at any image size.  In other words, SVGs do not have pixelation. 

      Pixelation mostly occurs when resizing of a raster image is enlarged to a point where individual pixels can be observed. In other words, pixelation occurs when an image is presented at an image size greater than its original size. This in turn causes the fuzziness or blurry sections in the image.  For example, you may want to display a vendor's logo on your website.  But you may only have a 200 pixel image of their logo.  If your theme displays that image at 400 pixels, the image will look pixelated.  But SVGs do not have this problem.

      SVGs are common.  But not as common as JPGs or PNGs.  So you may have some graphics that would work as SVGs, but instead they came to you as PNGs.  In cases like that, you can just stay with the PNGs.

        JPG Images

        So when should you use JPGs? With very few exceptions, a store's photos should be in the JPG format. This includes banner photos or product photos and images used for navigational purposes. JPGs provide much greater compression of files than PNGs do, so they have a smaller file size. But that compression comes at the cost of quality. Light compression will not drastically impact the quality of a photo, but JPG compression will have a noticeable impact on graphics - like logos.

        When creating a JPG for use in your Shopify store, here are my recommended settings:

        • The resolution should be set to 72 DPI. DPI stands for dots per inch.
        • And the files should be saved at a quality setting of 90. This is like setting it to 10% compression. This saves you some file size on your computer but also gives you an image with no noticeable impact on quality.

        PNG Files

        Now let's shift over to PNG files. PNGs are great for graphics when the original is not available in SVG. These include logos, icons and other site graphics. PNGs have what is called lossless compression. A compressed PNG file has the same quality as the uncompressed file. A feature of PNG that is not available in JPGs is transparency. So PNGs are useful for graphics that are placed over a color background or an image underneath.

        WEBP

        WebP is a modern image format that provides superior lossless and lossy compression for images on the web. WebP is now supported in all common browsers.  WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 30% smaller than comparable JPEG images.

        Lossless WebP supports transparency.

        Lossy, lossless and transparency are all supported in animated WebP images, which can provide reduced sizes compared to GIFs.

        Shopify will many times convert your JGP and PNG images to WebP when rendering your store.

        Storing Images in the Shopify Admin

        Your images will get stored in different places in the Shopify Admin depending on how they will be used.

        1. The first place is in the file library.  The file library is found in the main Shopify admin menu under Content > Files.  You can upload image files directly here.  Also images you add through Theme Customization or the Rich Text Editor will show up in the file library.  You can access these images within Theme Customization, the Rich Text Editor or in metafields.  
        2. Product photos are stored in their own library which you cannot browse.  And when a product is deleted from the Shopify admin, then its product photos are deleted from the library.  Product photos can also be accessed from the Rich Text Editor. 
        3. Collection Featured Images and Article Featured Images are stored in their own libraries and cannot be accessed from elsewhere in the Shopify Admin.

        Now, there are some limits that you need to follow when adding images to your Shopify store.  They are:

        1. The file size must be under 20 megabytes.
        2. The image resolution must be under 20 megapixels.  For a square image, 20 megapixels is a 4,472 pixel by 4,472 pixel image.  So I round down and use 4,000 pixels as the maximum dimension, height or width, on images that I'm uploading.
        3. The image aspect ration must be between 100:1 and 1:100.
        4. The file format must be JPG, PNG, WEBP, HEIC, GIF or SVG.

        Best Practices

        Here are some of the best practices that I follow when managing images in Shopify:

        1. Images don't need to be manually compressed prior to uploading. Always upload the best quality images you can provide.  This is a big change from the past when we spent lots of time optimizing our images for file size before uploading them to Shopify.  But the image optimization in Shopify now takes care of this for us.
        2. Change the image name.  When we take images off the camera or from a stock photo site, they have a filename like img-3692.jpg.  You should change the filename on all of the images that you upload to help optimize them for SEO.  For example, the logo on the JadePuma website is called JadePuma-logo.svg.  If you are selling sprockets, a product photos could be sprocket-front-view.jpg.
        3. Do not use custom color profiles.  An advanced technique that can be used by professional photographers and designers is to create a custom color profile for the image.  But Shopify doesn't support color profiles.  So make sure the pros you are working with are not adding color profiles to your images.
        4. Aspect Ratios.  Shopify and some themes use a feature called Focal Points to allow you to upload one photo and use it in both desktop and mobile use cases.  It crops the image differently for different sized screens.  While this sounds great, I prefer to use a theme which allows you to upload two different photos for things like banners.  One image is for desktop, and the other would be for mobile.  I prefer this as that way I'll know exactly what the image will look like.  The theme that I use for this Flex theme by Out of the Sandbox, which I'll link to in the show notes.

        Image Editing Software

        So now let's talk about some image editing tools. I'll include links in the show notes to each of these.

        Adobe

        Adobe is the king of image editting software.  They have an entire suite of applications that are used by almost all professionals in the industry.  The have over 15 applications for content creation.  The big ones are:

        • Photoshop for editting photos.
        • Illustrator for creating graphics.
        • Premiere Pro for editting videos.

        As the Adobe software is professional grade, it's extremely powerful.  Its also complex and has a steep learning curve.  But there's lot's of tutorials that you can find online.  Adobe's software is available in a monthly subscription that's $55 if you get everything and lower cost if you get one or two apps ala carte. 

        There are also some free, open source applications that you can use for creating and editing your images. They are both pretty powerful and good, free replacements if you are not ready for the Adobe products yet.

        GIMP

        The first one is called GIMP. It's a silly name and stands for GNU Image Manipulation Program. GNU is spelled G-N-U and is an open source acronym. I use GIMP to edit photos. You'll be able to resize, crop, change resolution, and a bunch of everyday operations. This application is much more powerful than that though. I frequently use it to darken or lighten photos to provide better contrast with text when I'm creating background images. And the favorite thing that I've done in GIMP was to a homepage banner image for a client. The image was a stock photo of a person sitting next to their luggage in an airport. The luggage was gray and I used GIMP to turn that luggage to red to match the store's brand. The result was the banner looked less like a stock photo and added to the branding of the site.

        BIMP

        There's also an essential add on to GIMP called BIMP. BIMP stands for Bulk Image Manipulation Plugin. With BIMP, you can batch process photos. So a common use for me is when I receive a new set of product photos, I'll use BIMP edit them all at once with multiple operations like changing the image size, changing the resolution, making the image square, renaming the file, and saving it to a JPG of 90 quality. Do it all at once, set it up one time and run it across 10, a hundred whatever number of photos that you have. This plugin saves me a ton of time and I highly recommend it for you.

        Inkscape

        The second open source image application I use is called Inkscape. Inkscape is for creating and editing vector graphics. Inkscape can import files from a number of different vector formats. It uses the SVG format for files that it creates.  Here's one advanced thing that I frequently do with Inkscape. I often get a JPG or a PNG image from my clients that started its life as a vector graphic. But all the client has now is a low resolution or a low quality raster file. And if I need a larger image size, I can't just scale that JPG or PNG up because it would look like crap because of the pixelation.  So instead I import that file into Inkscape and trace it. So Inkscape can use the raster file to make a vector file, which can then be scaled to any size. Now, in this case, quality in drives quality out, but it works quite well most of the time.

        Both GIMP and Inkscape are complex applications that have a ton of advanced features. So they both have steep learning curves. I have found tons of tutorials for them in blogs and on YouTube. So I'd recommend first going to YouTube and doing a search for what it is that you're trying to do. For example, do a search for "tracing PNG images in Inkscape" and you'll find tutorials on that subject. I just did that search on YouTube and there are hundreds of relevant videos. The top result is a 23-minute video titled "Inkscape tutorial vector image trace" and has over 250,000 views.

        Canva

        The last image editing software I want to discuss is not an application that you download to your computer. It is a cloud-based APP that you access through your web browser. It's called Canva. You can use it to create graphics for your Shopify store to use as banners or ads and promotions on other sites, especially on social platforms. Now, it's not as powerful as the other applications I mentioned. But it is much simpler to use so you won't have to invest as much time in the learning curve. Canva provides a lot of power and tools for free and then charge a small fees for advanced templates.

        Summary

        So that's it for images in your Shopify store. Shopify has made some big improvements over the past few years including:

        • Support for more file types like WebP and SVG.
        • Image optimization services that create and use the smallest file size image needed for each use case.

        These improvements free you up from having to a do a lot pre-processing of images for file size optimization and allows you to focus your energy on other things to grow your business.

        I hope this was useful. Thanks for listening.

        JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.

        Learn More Get Started

        Search