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.