## Image Guidelines Product: Monogram - Personal Portfolio WordPress Theme URL: https://hub.jkdevstudio.com/docs/monogram/content-management/image-guidelines Updated: 2026-09-06 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 `` 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

Always upload at the largest size you need. WordPress generates all smaller sizes automatically during upload. You cannot upscale - if you upload a 600px-wide image, the `lg` and `xl` sizes will not be generated.
## 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.
If you upload new images after a theme update that adds new image sizes, the new sizes will only be generated for future uploads. To regenerate sizes for existing images, use a plugin like **Regenerate Thumbnails**.