A picture says a thousand words and beautiful images can help elevate your site pages so they look professional and polished. Images can also help with creating a great looking and engaging course!
Below are some best practice suggestions for images that you upload to your Thinkific site.
In this article:
Image optimization is about reducing the file size of your images as much as possible, without sacrificing quality, so that your page load times remain low. It’s also about image SEO, i.e. getting your images to rank on Google and other image search engines.
We outline some suggestions on how to optimize your images and work with them in Thinkific.
It's good to note that Google cannot scan nor crawl course content.
Images uploaded to your Thinkific site (pages or courses) should be in JPG or PNG format.
Only use letters, numbers, underscores, and hyphens in file names. Try to keep file names simple (avoid special characters, spaces, etc.). If you need the file name to be unique, try using a combination of letters and numbers.
Other characters in file names (like accented letters, question marks, percent signs, and ampersands) may upload incorrectly or cause unexpected behavior.
Why Naming Your Images Can Help Rank SEO
Search engines not only crawl the text on webpages, they also crawl image file names so when it comes to image SEO, it's important to use relevant keywords to help your web page rank on search engines. For the images on your site pages, use descriptive, keyword-rich file names to help with image optimization.
More about SEO and your Thinkific site HERE.
Take it a Step Further
You can use Ubersuggest for keyword research to help find out what key terms your audience is using!
Check out this Moz forum on the importance of your file name >> https://moz.com/community/q/image-optimization-file-name-important
Alt text is the text that is displayed when an image is not visible to the user.
Why add alt text?
We recommend you add alt text to help students with visual impairments. Adding alt text attributes, such as relevant keywords and other descriptors, can add SEO value to your website and boost its ranking in search engine results.
In our Site Builder themes, alt text cannot be added to background images, but you can add alt text in the following Site Builder sections:
Text Lessons allow you to embed images, videos, or audio files within the lesson, and you can edit the HTML to include alt text for images, plus provide alternative audio for your videos. More info on how to do this HERE.
Thinkific does not automatically compress your uploaded images. However, it is recommended that you resize and compress your photos to reduce or minimize your site’s loading time. Why is this relevant? Nearly 50% of consumers won’t even wait 3 seconds for a site to load.
If you can decrease the size of the image files on your webpage and increase page load speed, there is less chance that students who visit your site will click away. Photos that take too long to load may not create the best experience for your students or visitors on your site!
You can reduce the image size by saving or exporting image files for the web. We recommend using editing programs such as Canva, or Photoshop. Bonus - Canva has a free version!
Aspect Ratio and Cropped Images
Aspect ratio is the proportional relationship between an image's width and height. Essentially, it describes an image's shape. An image's aspect ratio is its width to height ratio expressed as a number, like 3:4.
Maintaining a consistent aspect ratio is important as it prevents images from becoming distorted. For example, if you reduce the width of an image by half, you must also reduce the height by half. This is why images will crop or blur depending on the screen or browser window size, or type of device used. This distortion is the aspect ratio in action. If you change an image’s width and don’t adjust its height proportionately, you’ll blur or distort the image and affect the image quality.
For example, this is why your Landing Page Banner image crops and changes when viewing it through different screen sizes. On larger screens like laptops, the Banner will appear wider. You will see more of the image width while the top and bottom of the image may appear cropped. On smaller devices like phones and tablets, the height may increase to create more real estate for text and buttons vertically, and the left and right sides of the image will be cropped.
This is intentional and expected behaviour, to ensure that the content within your Banner is always visible and optimized on mobile devices. For example, if your Banner image was really wide and we tried to show the full width of the Banner on a small phone, that would mean we would need to drastically shrink the text and buttons which would be illegible for the student!
With this in mind we recommend following any specified photo sizes requirements and using images that are graphic or abstract without any text. Another best practice is to use images with 16:9 ratio for web use.
If there is the option, you can use the Focal Point Picker which gives you a degree of control over what portion of your image stays live or visible across different screen sizes. More on that HERE.
If your banner image is cropping, it is likely due to how it responds to aspect ratio. For more details, please check out our Knowledge Base guide HERE.
Take it a Step Further
If you have your own images - great! We recommend using your own photographs if you have them.
If your business is not yet at this stage, you can find royalty-free, free images on unsplash.com, pexels.com or pixabay.com.
Text in Images
Use the heading, subheading and text spaces for text instead of placing text within images. Formatted text looks better when scaled - text in images usually gets cropped or cut off in odd places - and take less space.
Some images in Thinkific, such as our Banner section in Site Builder are set to be responsive. This means the size and shape of the image changes depending on the device the student is using to access it, and it is accessible across different browsers and devices.
Here’s how to ensure images in Text Lessons are responsive: Responsive Images and Videos in Text Lessons
Images in Thinkific
Here’s a list of the images that are found in Thinkific. Please note that exact dimensions are not always specified. As a best practice suggestion, we recommend sticking with the aspect ratio of 16:9 for web images.
- Homepage Banner - recommended 1440 x 720px (1MB)
- Course landing page banner - recommended 1440 x 720px (1MB)
Thinkific does not have any specific recommendations. However these are the recommended resolutions for web in general.
- For horizontal layout:
– 250 px x 150 px
– 350 px x 75 px
– 400 px x 100 px
- For vertical (square) layout:
– 160 px x 160 px
Site Builder Sections:
- Call to Action background image - recommended 1440 x 720px (1MB)
- Image Gallery - not specified
- Image & text (with CTA) - image width can be scaled
- Social Proof: Testimonials - The image size they're displayed in on the section is 160px x 75px. The ratio of the placeholder logo images that are used is 608px x 284px
- Video section - not specified but we recommend using the Focal Point Picker
- Course Card image - recommended 760 x 420px
- Course Player Logo - recommended (5:1 ratio) 240 x 48px (< 250Kb)
If you are having issues with uploading your image, please check out our troubleshooting guide HERE.