The Podcast
Links
Software
Shopify Apps
Tutorials
Help the Podcast
Transcript
Thanks for joining me. I'm your host, Scott Austin. In this episode, we're going to go deep on images for your Shopify store. We'll discuss image formats and the tools that you can use to create and edit your images.
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 we should use for images in our 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:
- That 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 output and then add to your Shopify store:
- The first is JPG, which is spelled J-P-G. This is a raster format.
- The second PNG. This is also a raster format.
- And the third is SVG. SVG is a vector format. Every web browser can read and display SVG images. That said the support of the SVG format across Shopify, it's themes and apps is inconsistent. So for this discussion, we'll assume you won't be loading SVGs into your store and we'll focus only on JPGs and PNGs.
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 HTML5 video formats which I'll cover in a future podcast focused on videos.
So back to images and Shopify. A common question is should I use a JPG or a PNG in my Shopify store? The short answer is that your store should use both. The simple rule to follow is that JPGs are for photos while PNGs are for graphics. But nothing is as simple as the simple rule, so I'll go into some more detail here.
There are two things to consider when choosing which format to use.
- The first is file size. Smaller file sizes help make faster stores.
- The second is features. The formats provide different features. The two main features we'll be discussing are quality and transparency. Transparency is when the image allows for no color in some areas and instead allows the store's background color or another image underneath to show through.
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 75. This is kind of like setting it to 25% compression. It's a good trade off setting for keeping enough quality in the photo that it looks good while also compressing it enough to have a manageable file size.
PNG Images
Now let's shift over to PNG files. PNGs are great for graphics. 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 is not available in JPGs is transparency. So PNGs are useful for graphics that are placed over a color background or an image underneath. The graphics that don't contain solid colors, but instead have gradients or textures, the jpeg format may provide a significantly smaller file size for similar final quality. For these graphics, it's best to evaluate both formats and then make a decision on which one's best to use in your store.
Comparing the Formats
Next, we'll compare the file sizes from the two different formats for different types of images. In the show notes, I'll include a link to the page with the images I'm describing.
The first type of image to compare is a graphic. That is an image that started out as a vector and typically contains solid colors. Most logos would be considered graphics. Now if we save a graphic as a PNG and as a JPG, we get similar file sizes. In the example I posted, both files are about 50 kilobytes. The PNG file will usually have cleaner lines and can have transparency. So the PNG is usually the better choice for solid color graphics. And it's the only choice if you need transparency.
And the second type of image to compare is a photo. The photo I created is 1,024 pixels by 1,024 pixels. So it's fairly large sized. Both versions look to have similar quality. The JPG is a 150 kilobytes in size. The PNG file is 1500 kilobytes in size. So the PNG file is 10 times larger than the JPG file. And that's a typical difference in file size between the two formats, which is why you shouldn't be using PNGs for photos.
So the quick summary of all that is to only use PNGs for solid color graphics and JPGs for photos and everything else.
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. There are a couple of 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 do not want to shell out the money for the Adobe products.
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 use 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 75 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. And Inkscape will let you export your graphics to the PNG format for use in your Shopify store. And 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 with what's called pixelation. Pixelation is when you can see the individual pixels in an image so the lines don't look crisp and it looks kind of fuzzy. 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 first two 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.
Shopify Image Apps
Now let's look at Shopify apps for images. There are plenty of image apps in the Shopify APP store. These apps work inside of your Shopify store so they can edit images once they're added to your store. Here are the two apps that I most frequently use:
The first is called Photo Resize by Pixc. This app just does one thing and that is convert product images to a square aspect ratio. It doesn't do images that are not product images. It just focuses on product images. Making your product photos square is a good optimization to get them to look good on desktop and on mobile. Most of the stores I work with standardize their product photos to be square. A couple of nice things about the business model for this APP are:
- First it will resize your first 150 photos for free and
- Second after that first 150 photos, the APP charges a fee and it's a onetime fee when you process a new set of photos, so it's a pay as you go type of model and that fee is only 5 cents per photo. One thing that is a bit of a drag with the APP is that every time that that fee gets charged, the only person that can authorize it is the Shopify store owner. So the store owner is going to have to be the person who is running the APP to resize the photos.
I've included a link in the show notes to a tutorial video that I created on using the Photo Resize by Pixc APP.
The second Shopify image APP is called Bulk Image Edit - Image SEO. This APP does a whole bunch of things with photos. I'll cover two of the top features that I use in this app.
- First, it can make images square and it can make more than just your product images square.
- The second is that it can convert PNGs in your store to JPGs, which as we talked about before, can greatly reduce image file size and speed up your website.
Now this APP also has a generous free level of 50 images per month that it edits. But not every operation is within that free bucket. After that, it has a monthly subscription. I find this app very helpful and add it to most of the stores that I work with.
So that's it for images in your Shopify store. I hope this was useful. Thanks for listening.