When you upload an image into one of the components in the second table, 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. Note that if you upload a smaller size than the maximum allowed, such as 800x600 for a news image, it will not generate a larger version; it will still size it down to 700x525.

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.

__________
See Also
Upload higher resolution photos