Kit
Buy KitMore PowerUpsJoin the CommunityMeet the Creator
  • 🚀 Getting Started With Kit
  • 💥Kit PowerUps
    • Kit Common Sections
      • Base Kit
      • Funnel Kit Opt In
    • Promos Kit
      • Adding a Promo Super Power to a Page
      • 01 - Sticky Popup With Exit Intent
      • 02 - Scratch & Win
      • 03 - Large Sticky Popup
      • 04 - Deals Slider
      • 05 - Deals Slider (Small Card)
      • 06 - Bundle Promo
      • 07 - Single CTA With Timer
      • 08 -Banner With Background Video
      • 09 - Bar with Animated Coupon
      • 10 - Before The Sale Opt-In
      • 11 - Sticky Bar with Countdown & Accent Text
    • Sections Kit
      • Banner Sections
        • 01 - Side Video
        • 02 - Thin with Parallax Image
        • 03 - Colorful Image & Text
        • 04 - Background Video
        • 05 - Popup Video
        • 06 - Popup Video Full Height
        • 07 - Image on Left Side
        • 08 - Button on side
        • 09 - Full Height Background Image
        • 10 - Image on Right Side
        • 11 - Call out on Image (side)
        • 12 - Call out on Image (center)
        • 13 - Rotating words and icons
      • Content Sections
        • 01 - Image and Text
        • 02 - 2 Images & Text
        • 03 - Image, Text & Quote
        • 04 - Heading and Side Text
        • 05 - Text & Image (Alternating)
      • Icons Sections
        • 01 - 3 Columns (icon on left)
        • 02 - 2 Column Cards
        • 03 - 4 Columns
        • 04 - 3 Column Cards
        • 05 - 5 Columns
        • 06 - 3 Columns Motion Cards
        • 07 - 3 Columns (icon on top)
        • 08 - Circle Background
        • 09 - 3 Columns Border Card
        • 10 - Tall Cards
        • 11 - 3 Columns Cards
        • 12 - 6 Columns
        • 13 - 3 Columns Color Hover
      • Lists Sections
        • 01 - Centered List
        • 02 - List With Side Image
        • 03 - Centered Box With Background Image
        • 04 - Lists On Side
        • 05 - Full height with Image
        • 07 - Comparison List With Background Image
        • 08 - 3 Columns Text Only
        • 09 - 3 Column Cards
        • 10 - Line Separated
        • 11 - Lists Under Content
        • 12 - Two Columns
        • 13 - Image & Block Quote
        • 06 - Image in center
      • Modules Sections
        • 01 - Tabbed Content
        • 02 - Big Image & Slider
        • 03 - 4 Column Hover Cards
        • 04 - 3 Column Overlay Cards
        • 05 - 4 Column Hide & Seek Cards
        • 06 - 4 Column Cards With Circle Image
        • 07 - 3 Column Tall Hover Cards
        • 08 - Slider Hover Cards
        • 09 - 4 Column Tall Zoom Cards
        • 10 - 3 Column Cards Summary Hover
        • 11 - 4 Column Tall Animated Cards
        • 12 - 3 Column Cards
        • 13 - Large Slider
        • 14 - 3 Column Hover Cards
        • 15 - Module Outline
      • Pricing Sections
        • Adding a Pricing Super Power to a Page
        • 01 - Single CTA With Accent Text
        • 02 - Two Pricing Plans
        • 03 - Value Stack - Single CTA
        • 04 - Summary Stack Single CTA With GIF
        • 05 - Slide In Comparison - Two Plans
        • 06 -Simple Two Plan CTA With Background Image
        • 07 - Single vs Membership Compare With Bonus Sections
        • 08-Single CTA With GIF Mockup
        • 09 - Multi Column Comparison
      • Social Proof Sections
        • 01 - 3 Columns & Small Image On Bottom
        • 02 - 3 Columns & Image On Top
        • 03 - 3 Columns & Small Image On Top
        • 04 - 3 Columns Images (Screenshots)
        • 05 - Slider & Big Image
        • 06 - Slider With Quote On Side
        • 07 - Slider Cards With Image On Top
        • 08 - Slider With Image on Side
        • 09 - Slider With Small Image On Top
        • 10 - Slider With Large Quote
        • 11 - Slider With Small Image On Bottom
        • 12 - 3 Columns Just Text
        • 13 - Video testimonials
  • 📚Kit Usage Guides
    • Popups, Timers & Exit Intents
      • Popup Visibility Settings
      • Exit Intents
      • Using A Countdown Timer
    • Media
      • Image Optimization
      • Canva Templates
      • Using Background Videos
    • Smart Settings
      • Smart Style
      • Icons
  • 💬 Support & Help
    • Getting Help
    • FAQ
Powered by GitBook
On this page
  1. 📚Kit Usage Guides
  2. Media

Image Optimization

PreviousMediaNextCanva Templates

Last updated 3 years ago

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.

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.

3) Squoosh It Before You Upload

Optimizing GIF files

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

Be sure your image is cropped to the recommended size. You can do this easily by using the free version of and create a design that matches this size. Upload your image and then download it as a JPG

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. 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 - 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

If you end up using a GIF for an image, you will also want to make sure the file size is optimized. 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, to create the animated thumbnails you see on the

🔥PRO TIP: Use 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.

Canva
Make use of Canva
Squoosh.app
Squoosh
Canva
we used Canva
SuperPowerUps member dashboard.
ezgif optimizer