Image Guidelines

Monogram registers custom image sizes and uses a responsive rendering system to serve the right image for every screen size. Understanding how images work in the theme helps you upload the right files and get the best visual results.

#Registered Image Sizes

Monogram registers three sets of image sizes. Each set targets a different aspect ratio and includes multiple breakpoints from small to extra-large.

#Square Set (jkd-square)

Used for avatars, client logos, square thumbnails, and grid items with 1:1 aspect ratio.

Size	Dimensions	Typical Use
jkd-square-xs	300 x 300	Small thumbnails, mobile cards
jkd-square-sm	540 x 540	Medium thumbnails
jkd-square-md	768 x 768	Tablet displays
jkd-square-lg	1024 x 1024	Desktop grid items
jkd-square-xl	1440 x 1440	Large displays, retina

#Wide Set (jkd-wide)

Used for portfolio cards, blog post thumbnails, page headers, and any landscape-oriented image slot (3:2 ratio).

Size	Dimensions	Typical Use
jkd-wide-sm	540 x 360	Small cards, mobile
jkd-wide-md	768 x 512	Tablet cards
jkd-wide-lg	1024 x 683	Desktop cards
jkd-wide-xl	1440 x 960	Full-width sections, hero images

#Vertical Set (jkd-vertical)

Used for portrait-oriented content like vertical portfolio cards or tall image sections (2:3 ratio).

Size	Dimensions	Typical Use
jkd-vertical-sm	360 x 540	Small portrait cards
jkd-vertical-md	512 x 768	Tablet portrait displays
jkd-vertical-lg	683 x 1024	Desktop portrait cards
jkd-vertical-xl	960 x 1440	Large portrait displays

#LQIP (Low Quality Image Placeholders)

Every registered image size also has a corresponding LQIP variant - a tiny version (max 64px on the longest side) used as a blur-up placeholder while the full image loads. This creates the smooth loading effect you see throughout the theme.

You do not need to do anything to enable LQIP - it is generated automatically when WordPress processes your uploads.

#Responsive Image Rendering

Monogram renders images using responsive <picture> tags via the JKDTheme::renderImage() helper. This means:

• The browser receives multiple image sources at different sizes
• It automatically picks the best match for the visitor screen width and pixel density
• Mobile visitors download smaller files, saving bandwidth and loading faster
• Retina displays get higher-resolution versions

You do not need to manually select which size to use - the theme handles this automatically wherever images are displayed.

#Upload Recommendations

Guideline	Recommendation
Minimum width	1440px - ensures the xl size is generated at full quality
Photos	JPEG at 80-90% quality. Best balance of quality and file size
Graphics with transparency	PNG - supports alpha transparency
Modern format	WebP if your server supports it - 25-35% smaller than JPEG at equivalent quality
Maximum file size	Aim for under 500KB per image before upload. WordPress generates all the smaller sizes automatically
Aspect ratio	Upload images close to the intended display ratio. A 4:3 image used in a 1:1 slot will be center-cropped

#How Cropping Works

All registered sizes use hard crop mode. This means WordPress crops the image to fit the exact dimensions rather than scaling it down proportionally. The crop is center-aligned by default.

If your source image has a very different aspect ratio than the target size, important content near the edges may be cropped out. For best results, keep the main subject centered in your uploads.

Last updated 6 Sep 2026