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.
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.
In Kit section settings where there is an image, you will see the recommend size noted.
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.
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.
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