A Guide to Image Sizes for Your Site and MemberGate Themes

A Guide to Image Sizes for Your Site and MemberGate Themes

It's important in web design to maintain the same image dimensions, specifically for teaser images and main graphics on a page. Using the same dimensions will create a more uniform and appealing look for your website. 

In the modern age, multiple different screen sizes and resolutions are used to browse the web. Therefore, it's important to use images sizes that will always look great!

Understanding Aspect Ratio

The aspect ratio of an image is the proportional relationship of the width to the height. Popular aspect ratio sizes for websites are 16:9 or 4:3. These are the proportions of the width to the height. A 16:9 aspect ratio means for every 16 inches of width that an image has, it will also have 9 inches in height. When you expand the image it will always maintain the same shape and will always display as intended. It will not stretch or lose resolution.

The Dimensions of Tease Images

A good rule of thumb is to use the same dimensions of images as best as possible. If it is not possible to have the same exact dimensions, it is important to have the same aspect ratio. If you are using  a 16x9 guide for images, this means one image could be 1920x1080 and another 640x360 and they will still maintain the same shape and will display the same on most screens. 

The tease images on your site should all be the same ratio - common web image ratios are 4:3 or 16:9. The 16:9 size is shaped more wide screen while the 4:3 is full screen. The 16:9 format has been made more popular by the movie industry and so televisions, PCs, laptops and even mobile phones (turned sideways) support this universal ratio.

Since the images within the site will resize themselves, it is safe to use images at this size for whichever ratio that is selected.

Aspect Ratio

Suggested Image Dimensions

Display Style




Wide Screen



Full Screen

Whichever ratio that is selected, it is important to keep all of the images at a consistent ratio - do not mix and match. They should all be 4:3 or all 16:9.

Tease Layouts

MemberGate tease layout options allow you to have different layouts to provide more interesting ways to present information on your site.

A combination of clumps with one layout and the department listing using a different layout can be used to present information in order of importance, and to highlight certain content pages. The layouts can be further edited to show teaser copy or just include the title of the page for further design flexibility.

What is the Teaser Image

The teaser image is considered the thumbnail image that is shown along with the published headline and teaser copy of content pages. They can be seen on portal, department pages, LMS and shopping cart pages.

A Guide to Image Sizes for Your Site and MemberGate Themes

16:9 Aspect Ratio Grid

Title of First Page

Title of Second Page

Title of Third Page

4:3 Aspect Ratio Grid

Title of First Page

Title of Second Page

Title of Third Page

Random Aspect Ratio Grid

Title of First Page

Title of Second Page

Title of Third Page

How to Update Image Sizes

The built in MemberGate image editor can be used to update the dimensions of your images. If the image cannot be perfectly set to the selected aspect ratio, use a crop tool to cut out the desired dimensions.

What does Being 'Reponsive' Mean for an Image

A reponsive web page will dynamically (and automatically) change in size and layout depending on the size and orientation of the screen that's being used. As the viewport changes size, the elements on the page will adjust accordingly. This means that an image can be displayed at 600 pixels wide on a laptop screen, but only 200 pixels wide on a smaller mobile device. Because of this, consideration should be used when deciding on what type and size of image to use.

Special Image Sizes When Using a Theme 

MemberGate themes require a header/logo graphic as well as hero banner. Use the following chart as a guide for the logo and banner size to be uploaded to the theme or main graphic of your pages.

IMPORTANT NOTES on hero image best practices:
  • Because the hero image is a viewport, it is not responsive. The image will not always show at 100%. Parts of the image may not show on some screensizes.
  • The hero image is used as a background image. Keep this in mind when choosing an image
  • The hero image is not meant to have text on 'top of' the image. Because the image is not responsive, there is a good chance that all of the text will not be seen. (If there is text as part of the background of the image, that should be fine.)
  • In many of the themes, the headline of a page will be an overlay on the hero image (which is another reason not to have text on the image).
Theme Logo Dimensions Hero Banner Home Page Hero Banner Inside Pages Top Header Dimension
Analysis 293x33 1920x650 1920x290 NA
Alpha <744x44 1920x300 1920x300 NA
Darkness <744x44 1140x300 1140x300 NA
Aspire 285x31 1920x884 1920x470 NA
Fusion 340x44 1140x300 1140x300 NA
Gemini 270x31 1920x300 1920x300 NA
Journey 255x31 1920x982 1920x400 NA
Maxima 195x31 1920x884 1920x300 NA
Metro 292x47 1920x884 1920x400 NA
Origin 255x32 1920x884 1920x400 1920x104
Zen 180x30 1920x884 1920x300 NA
Revive 190x25 1920x884 1920x510 NA

Related Articles