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

SizeMax sizeAverage file size
Thumbnail300 px20 KB
Small700 px150 KB
Medium1200 px500 KB
Large2000 px1 MB
Huge3000 px2 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 TypeMax sizeClient optimization
Command ButtonsThumbnailNo
BackgroundLargeNo
Generic PhotoLargeYes
NewsLargeNo
Partner/SponsorSmallNo
SlideshowLargeYes
FaviconThumbnailNo
Team LogoMediumYes

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