Best Practices for Your Website Images

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.

Optimizing Images

Image optimization is about reducing the file size of your images as much as possible, without sacrificing quality, so that your pages look good while still loading quickly. It’s also about image SEO, i.e. getting your images to rank on Google and other image search engines. (Note: Google cannot scan nor crawl course content.)

This article outlines some suggestions on how to optimize your images and work with them in Thinkific.

File Types

Images uploaded to your Thinkific site (pages or courses) should be in JPG or PNG format.

File Names

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

Take it a Step Further

You can use services like Ubersuggest for keyword research to help find out what key terms your audience is using!

Check out this Moz forum post on the importance of your file name.

Alternative Text

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, will also 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:

Example in Site Builder:

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. Read more about making text lessons accessible here.

Compression

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!

Thinkific limits image file size to a maximum of 4MB, but most images can be much smaller than that while still looking great. You can often reduce the image size by saving or exporting image files for the web, using editing programs such as Canva, or Adobe Photoshop. Bonus - Canva has a free version!

For more help reducing your image size, you can also read our article on How to Use Squoosh, Google's free online tool for compressing images.

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 expressed as a ratio, like 3:4. A 16:9 aspect ratio is recommended as a best practice for images on the web.

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. 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. To avoid distorting images when displaying your site on different sized screens, browser windows, or device types, Thinkific makes dynamic use of image cropping and blurring, rather than resizing images non-proportionally.

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, making them illegible to 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.

In some Site Builder sections, the image properties will include a Focal Point Picker, which gives you a degree of control over what portion of your image stays live or visible across different screen sizes. Read more about how to use the Focal Point Picker.

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 .

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.

Responsive Images

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.

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

Banners:

Homepage Banner - recommended 1440 x 720px (1MB)
Course landing page banner - recommended 1440 x 720px (1MB)

Logos:

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 Player: