how to randomize images on refesh of page on shopify

whenever i'm doing speed or seo,optimization work for a shopify store i,always start with checking the images,this isn't the most important thing for,speed but it is the absolute easiest,thing to fix and it's actually a very,common mistake on shopify stores to have,an image that is either way too heavy or,not saved in the right format so in this,video i'll show you the steps that you,need to take in between getting the,images from your camera or from your,photographer and actually uploading them,to your shopify store so there's only,like three steps basically first you,need to save your images in the right,image format and size next you need to,compress your images and then you just,need to add some seo information so,first i'm going to show you how to do,this manually for every image and then,i'll show you how to do this in bulk if,you have a large store with hundreds of,products and probably thousands of,images but first there is just a little,bit of theory that we need to get,through and it'll make everything much,clearer for you and much easier if you,really want to skip the theory and get,right into the image compression then,you can just use the chapters and skip,to the part about image compression so,firstly let's try to understand,what your goal should be okay your goal,is to get the image file size down to as,small as possible and what do i mean by,file size i don't mean pixels i don't,mean the dimensions of the image,although that's related but i mean the,file size in kilobytes and megabytes,that might be obvious to you but i want,to be very clear so if we really,simplify it as a general rule your,images should be no more than about 400,or 500 kilobytes at most okay and this,is for a full screen large hero image or,banner image that is the full size of,your browser and in general if you're,using jpegs you should never really have,an image that is more than a megabyte in,size if your image is over a megabyte,then you're doing something wrong and,you need to fix those images now i'll,talk about jpeg versus png just a little,bit later but the same is true for png,generally if you're using pngs for the,right purpose which is for things like,icons and logos you won't really have an,image size that is bigger than maybe a,hundred kilobytes okay so now let's talk,about image dimensions because it's,something that my clients ask me about a,lot but it's actually something that you,don't need to worry about too much it's,definitely not as important as file size,although it is related to file size but,okay to get straight to the point i'll,say that around 2000 pixels in width or,in height whatever is the most usually,in width right that's the largest that,you really need to have any image on,shopify okay 2 000 pixels and that being,said there isn't really much harm in,uploading a larger image than 2000,pixels say if it's 5000 pixels because,shopify does something called image,scaling which is where it resizes the,image to the size that needs to be for,your design for the theme that you are,using okay so it's pretty smart like,that now images that are not full screen,that are not hero images they can be,even smaller than 2000 pixels across,don't go too small either like less than,500 pixels is like too small unless it's,just an icon or something if it's a,product image yeah just keep it at,square images 2000 by 2000 but remember,this it's always better to upload an,image that is too large rather than too,small because it can be scaled down by,shopify but an image that is too small,cannot be scaled up right it'll just be,pixelated okay so the last bit of theory,that i need to tell you about we're,almost done is jpeg vs png and when to,use each because this is actually the,most common mistake that i see on many,shopify stores not using the correct,image format and if you don't know the,difference i actually have an entire,video on this topic and i'll link it,somewhere at the top here and in the,description and in that video i show you,a lot of examples and demonstrations so,i recommend checking that out to really,understand this topic but i will,summarize it briefly right now so,firstly the image format is very,important because the file size of your,image largely depends on what format you,save it in and what type of image it is,so you have to use the correct format,for the correct type of image jpeg,should be used for photographs okay,that's the general rule jpeg for,photographs and png for computer,graphics like logos icons anything with,text in it and anything that doesn't,have many colors photographs have,thousands of colors or millions,and png is not going to be good for that,because the file size is going to be,very large so jpeg for photographs png,for computer graphics but there is an,exception to this rule and that is when,you need transparency in your photo okay,so photographs like a product image for,example that has the background removed,okay that's being cut out and the image,needs to have transparency you have to,use png for this because jpeg doesn't,support transparency if you try to save,an image with a cut out background as a,jpeg then it will actually have a white,background okay it'll be like a white,square so it needs to be png and the,file size will be large basically what,you need to keep in mind is that if you,use this kind of image in your design so,like the apple store for example really,uses that a lot they remove the,background on images of the macbook or,the iphone so that they sit really,nicely on top of the background of the,website if you have this kind of design,like apple understand that they are,making a compromise they are trading the,speed the loading speed of their website,for that aesthetic of the images with,transparency okay they've actually made,that choice and the images on their,website are quite large and so the most,common mistake that i see on shopify,stores is that the hero image or,something a large image that is purely a,photograph that doesn't have,transparency for some reason it's saved,as a png and it weighs like four,megabytes this is the most common,mistake that i see yeah it's just so,easy to fix by simply changing that,image re-saving it as a jpeg all right,so now we're at the good part i hope i,didn't bore you to death with that,theory but i hope now your goals are,clear you want to use the correct image,format your images are less than 2000,pixels across so now you can compress,your images so i'm going to show you the,manual way first and then i'll show you,how to do it in bulk for images that are,already on your shopify store so i use a,tool called squash you can just type in,squoosh.app in your browser it's a free,tool and all you do is drag your images,in and,download the compressed version there is,another tool that does basically the,same thing called tiny png but i prefer,squish for a couple of reasons firstly,it gives you sliders so that you can,choose your level of compression and,secondly it shows you a before and after,review of what the compressed image is,going to look like so basically i can,get more image compression by just using,my eyes and playing with that slider to,get the maximum compression before the,image starts to lose quality now on the,other hand the advantage of tiny png is,that you can drag in multiple images at,the same time so you can drag in up to,20 images and it'll compress them all,and then you just download them all so,this is maybe faster than squoosh,because in squoosh you need to drag one,image at a time and by the way with tiny,png you can ignore the name because it,works for jpegs as well now after,compressing and downloading all of your,images you're going to have to re-upload,them to shopify now this involves going,into each product in shopify uploading,the new version deleting the old version,hitting save going to the next product,so depending on how many products you,have this might take a lot of time so i,actually recommend using an app called,crush picks so crush picks basically,works the same way as squash or tiny png,except it's a shopify app if you want to,check it out you'll find the link in the,description below and i'll be grateful,if you use that link if you're planning,on using this app but i'll tell you a,bit about it first so when you install,crashpix it takes some time analyzing,your store and then i'll tell you how,many images you have it'll actually list,them all out it'll show you the sizes of,those images and then you can tell it to,compress all those images you can also,tell it to compress images one by one or,you can do a batch compression and it,also has a really nice feature which is,automatic compression from now and into,the future so that any images that you,upload into shopify crashpix will,automatically compress that image so you,don't even have to think about it which,is pretty useful so if you select a,batch compression or an automatic,compression then it'll just start going,down list and compressing each one and,it'll show you the before and after size,and the percentage difference like the,amount that you saved and this will only,be like you know 10,20,for each image but all of this adds up,you also have options to choose the,level of compression so you can use the,default one which is called balanced or,you can go the conservative one which,has gives a higher image quality and,less compression or you have sliders,that you can play with and make whatever,compression you want so the pricing of,crush picks is based on how many images,you have or more specifically it's based,on the total amount of megabytes that,all of your images add up to so the free,plan will give you 25 megabytes which is,enough for about 100 images that's,probably okay if you only have like 10,or maybe 20 products on your store and,then the first plan is for 500 megabytes,and this is for five dollars a month 500,megabytes would probably be enough for,most stores just by a rough calculation,500 megabytes would probably be around 2,000 images and 2 000 images if you've,got say 5 images per product that would,be around 400 products luckily you don't,have to make any calculations like this,because like i said it calculates your,total image file size and it'll show you,how many megabytes you need and so,you'll know what kind of plan you need,on my testing store it says 558,megabytes and i have just over 700,products on this store now there is one,thing that unfortunately crushpix does,not do and that is compressing the,images that you added through the theme,settings okay so crushpix is for,compressing your product images mainly,it also compresses your collection,images and also your images that are in,the assets folder of your theme but it,cannot compress images that you added,through the theme settings and there,isn't any app that can do this because,shopify doesn't give app developers,access to,that part of shopify so images that you,add through theme settings like home,page images hero images banners,promotion images whatever you're gonna,have to compress these manually still,using squash or a tiny png luckily there,shouldn't be that much so that's all you,really need to do regarding image,compression so for seo there are just a,couple of things that you might want to,do the first is to fill out the alt text,for the image and i know that many of,you are already quite familiar with this,because it's a very well known tip but a,lot of people still don't do it simply,because it's so time consuming right you,have to go into each image and update,the text hit save go into the next image,and it takes a long time to do and the,second thing that you need to do is,actually give the image file a,meaningful name and this is actually not,very well known but yes the image file,name does affect seo it is important so,don't leave your image names as like,image underscore 12345.jpg,or whatever format your camera exports,them as right you actually should update,your image names and what should you,update them to,well it would be ideal if the image file,name simply contained as many keywords,or was as descriptive as possible so you,know type of the product the brand of,the product like the vendor in this case,or um you know the color of the product,and the actual title of the product,obviously so instead of like image one,two three or something like that it'd be,a lot better if it was something like,uh bellroy brown,slim leather leatherwallet.jpg,so when people are searching for that,especially if they're searching usual,using google image search because they,want to see what it looks like it would,be a lot easier for them to find and,they might actually find your image on,google images click on it and end up on,your store and buying from you thanks to,that google image search okay so google,images is kind of underrated for seo,okay so for both these things setting,alt text on your image and then for,setting for renaming your images you can,do this in bulk once again with crush,pics and crushpix isn't the only app,that does this okay there are other apps,mostly apps that are focused on seo in,shopify that will,add alt text for images that's a very,common one image renaming is a bit less,common crushpix is pretty useful because,it does the image compression and it,does the seo stuff in one app okay so,that's why i like it and how does the,app know how does crashpix know what,text to use well it's pretty smart it,lets you create a template basically out,of the various pieces of product,information that it has access to so,like the product vendor the product,title as i was mentioning earlier you,can select which order you want these,things to appear so on my product it's,the product vendor plus the product,title and then it adds a random number,onto the end just to make sure that that,image file name is unique and this,random number on the end that's fine for,seo most important thing is that your,entire image is not random,randomnumbers.jpg so once you create,this template you let it run and it'll,just bulk rename your images and add alt,text according to the template for each,image and that's it that's all you,really need to know about image,optimization for shopify i'm just going,to summarize the steps firstly,understand the difference between jpeg,and png and watch my other video if you,don't secondly aim to keep the file size,under 500 kilobytes and aim to keep the,image dimensions to around 2000 pixels,across thirdly either manually compress,your images and re-upload them or use,crush picks to bulk compressed images,that are already on your shopify store,then number four for seo either manually,enter alt text and rename all your image,files or do this in bulk using crushpix,or using another shopify seo app and,last but not least subscribe to my,channel for more shopify tips i hope you,found this video helpful leave a comment,if you have any questions and i'll see,you next time,you

Congratulation! You bave finally finished reading how to randomize images on refesh of page on shopify and believe you bave enougb understending how to randomize images on refesh of page on shopify

Come on and read the rest of the article!