All Collections
For All Admins
Website Design
Website Design: Image Optimization
Website Design: Image Optimization
Julia S. avatar
Written by Julia S.
Updated over a week ago

When you upload an image, the system scales it down to the size less than it in the following table and saves it at that size. For example, if you upload a 1400x768 image, it will scale it down to the medium size (1200x675).

Size

Max size

Average file size

Thumbnail

300 px

20 KB

Small

700 px

150 KB

Medium

1200 px

500 KB

Large

2000 px

1 MB

Huge

3000 px

2 MB

Each image type has a maximum size so as to avoid storing unnecessary large files. The following table summarizes this with possible client-side optimization. If you upload a 900x450 image for a command button, it will reduce it to 300x150 and then save it.

Image Type

Max size

Client optimization

Command Buttons

Thumbnail

No

Background

Large

No

Generic Photo

Large

Yes

News

Large

No

Partner/Sponsor

Small

No

Slideshow

Large

Yes

Favicon

Thumbnail

No

Team Logo

Medium

Yes

When you upload an image type with client-side optimization, the system generates duplicates in all the smaller sizes below it in the first table as well. A 1400x768 slideshow image will be saved in the medium (1200x675), small (700x394) and thumbnail (300x169) versions.

Then when you access a page with that image, the system loads the smallest acceptable generated image based on the screen size or area in order to speed up page loading. For example, it may load the 1200x675 version on a desktop screen, but load the 300x169 version on a phone.

Images uploaded via the CK Editor in the Main Text, Generic Content, News body, and Custom Pages components are not optimized at all; they are left as is. Therefore make sure to resize them to the desired display size before uploading them to minimize loading time.

Did this answer your question?