Image sizes
Source dimensions to ship for every image slot on the site. All images are served as WebP, quality 80 (75 for swatches/thumbs). Ship the 2x file at the listed pixel size and let the browser downscale.
Home page
| Slot |
Aspect |
Display width |
1x |
2x |
Loading |
Hero (home-hero.astro — replacing the gradient) |
full-bleed, min-h-80vh/88vh |
100vw |
1280×900 |
2560×1800 |
eager |
Ceremony card (home-ceremony-section.astro) |
4:3 |
~310 / ~520 |
520×390 |
1040×780 |
lazy |
Featured package card image (featured-packages/card.astro) |
4:3 |
~280 / ~480 |
480×360 |
960×720 |
lazy |
| Featured package variant swatch |
1:1 |
~24–56 |
64×64 |
128×128 |
lazy |
Lookbook marquee tile (portfolio-lookbook/row.astro) |
4:3 |
260 (w-65) / 360 (w-90) |
360×270 |
720×540 |
lazy |
Instagram tile (instagram-feed.astro) |
1:1 |
~65 / ~160 |
160×160 |
320×320 |
lazy |
Hero note: for art-directed mobile (portrait crop) also ship 900×1200 @1x / 1800×2400 @2x.
Product pages
| Slot |
Aspect |
Display width |
1x |
2x |
Product detail gallery (product-detail-hero/gallery.astro) |
4:3 |
~340 / ~640 |
640×480 |
1280×960 |
Product card image (product-card.astro) |
4:3 |
~160 / ~360 |
360×270 |
720×540 |
| Product card variant swatch |
1:1 |
~20–40 |
56×56 |
112×112 |
Product detail steps card (product-detail-steps.astro) |
4:3 |
~150 / ~280 |
280×210 |
560×420 |
Blog
| Slot |
Aspect |
Display width |
1x |
2x |
Featured blog card (blog-list.astro) |
16:10 |
~340 / ~480 |
480×300 |
960×600 |
| Blog grid card |
16:10 |
~160 / ~320 |
320×200 |
640×400 |
Blog post hero (detail-header.astro) |
16:9 |
~340 / ~640 |
640×360 |
1280×720 |
| Blog post background blur layer |
16:9 |
full |
1280×720 (blurred, low Q) |
1920×1080 |
Events
| Slot |
Aspect |
Display width |
1x |
2x |
Event card (event-list.astro) |
16:10 |
~160 / ~320 |
320×200 |
640×400 |
Event detail cover (event-detail/header.astro) |
16:9 |
~340 / ~640 |
640×360 |
1280×720 |
Portfolio / styles
| Slot |
Aspect |
Display width |
1x |
2x |
Portfolio grid (portfolio/grid.astro) |
1:1 |
150 (2-col) / 240 (4-col) |
240×240 |
480×480 |
Style hero (style-hero.astro) |
4:5 |
~340 / ~480 |
480×600 |
960×1200 |
Style gallery (style-gallery.astro) |
1:1 |
150 / 240 |
240×240 |
480×480 |
Stores
| Slot |
Aspect |
Display width |
1x |
2x |
Store card map (store-list.astro) |
1:1 |
~160 / ~320 |
320×320 |
640×640 |
Encoding recipe
- Format: WebP, quality 80 (75 for tiny swatches/thumbs).
- Export the 2x file at the listed pixel size; the browser downscales.
- Strip metadata on export.
- Hero only: also produce a
<picture> mobile-portrait source (900×1200 / 1800×2400).
- Above-the-fold (hero, first ceremony card, first lookbook tile if visible):
loading="eager" + fetchpriority="high" on the hero. Everything else loading="lazy".