In this guide we will cover some important techniques for using images and video inside of Kit sections. There are some special considerations to know about as well as general best practices to make sure your page loads quickly.
Optimizing Images
When it comes to your sales pages especially, you want to make sure that it loads quickly. Otherwise your readers may "abandon" the page because it is taking too long to load. And if they do leave the page, they may never return to buy your course.
1) Make sure you are using the correct image size
In Kit section settings where there is an image, you will see the recommend size noted.
Be sure your image is cropped to the recommended size. You can do this easily by using the free version of Canva and create a design that matches this size. Upload your image and then download it as a JPG
2) Make sure you are using the correct file extension
In most cases you will want to not only crop your images down to the "right size", but you will also want to use a JPG version of the image. PNG's may look "sharper", but come at a price - their files sizes are usually quite larger.
But when you need to have a transparent background for your image - you have to choose PNG for your file type. Be sure to create a PNG that actually has a transparent background - just because it is a PNG does not mean the background is invisible. Make use of Canva to make this a breeze - it will quickly become your best friend and make you look like a pro level graphic artist.
3) Squoosh It Before You Upload
In our Kit sections, we include a link to Squoosh.app - where you can resize and optimize the file size of the image that you are using on your page. Be sure to do this for every image so that your page loads as fast as possible. It is often an overlooked mistake by site owners to upload a massive file size that may look the same as a smaller size, but could ultimately be the difference in getting a sale.
Upload your original image to Squoosh
After uploading, choose MozJPEG as the compression option and then download the file
Use the "Squooshed" image for the upload into Thinkific.
Optimizing GIF files
If you end up using a GIF for an image, you will also want to make sure the file size is optimized. Canva makes creating your own custom GIF's a snap. You can use a video recording, upload to Canva and then download a GIF in a matter of second. In fact, we used Canva to create the animated thumbnails you see on the SuperPowerUps member dashboard.
But be careful of the file size. You generally want your GIF's to be:
Less than 3 seconds
Smallish pixel size ideally matching the smallest size that will be displayed in browser
🔥PRO TIP: Use ezgif optimizer to reduce the size of your GIFs. They have a variety of settings you can try in order to get just the right size and quality you need.