Images
The following table provides in depth info on the various images found throughout the site. You can use it to determine the original image size, file type, and what pages are using it. It also shows a visual sample for aid in determining what image is being referenced (not to scale). With regards to dekstop to mobile conversion the general rule of thumb is that images that have both desktop and mobile versions will switch when the site transitions from desktop to tablet view which happens at the 960px mark. This usually only applies to background images as most product images reuse the same size. Browser window widths from 961px and up get desktop version images. Window widths below 960px get mobile version.
Rules:
Product Hero Images:
No change of image size between desktop/mobile
Product Module Image:
No swap of image between desktop/mobile. If product is over background, use transparent png.
Featured Product Dock:
Background changes at 960px between desktop and mobile versions.
Promo Images:
Desktop versions can be 4, 2, or 1 column(s) long in desktop width. In mobile all promos are swapped to 1 column width.
Deal of the Day:
Header image swaps at 960px to desktop/mobile versions.
| Product Hero | ||||
|---|---|---|---|---|
| Image | Size | File Type | Usage | Sample |
| Product SKU (Standard, Deluxe, Premium): Desktop & Mobile | 368px x 460px | jpg | pdp |  |
| Product SKU Zoom | 800px x 1000px | jpg | pdp |  |
| Product Environment & Closeup: Desktop & Mobile | 460px x 460px | jpg | pdp |  |
| Product Environment & Closeup Zoom | 1000px x 1000px | jpg | pdp |  |
| Product Module | ||||
| Image | Size | File Type | Usage | Sample |
| Large format | 272px x 340px | png | homepage, collection, collection promo mini |  |
| Transparent background: Desktop & Mobile | 160px x 200px | png | featured category module, collection module, similar products module, 404 |  |
| White background: Desktop & Mobile | 160px x 200px | jpg | order detail, modules without a background image, search results, subcategory, category, pdp size module, sidebar carousel, checkout flow | |
| Mini | 80px x 100px | jpg | mega-navigation, shopping cart mobile, Delivery info mobile, confirmation mobile, collection landing info strip, subscription promo |  |
| Micro | 60px x 75px | jpg | order history, search dropdown |  |
| Flowers in this Bouquet | 140px x 130px | png | pdp |  |
| Collection Images | ||||
| Image | Size | File Type | Usage | Sample |
| Background | 1400px x 560px | jpg | homepage, collections landing, collection detail, additional product module |  |
| Background Mobile | 768px x 220px | jpg | homepage, collections landing, collection detail, additional product module |  |
| Landing Bouquet Group | 574px x 335px | png | collections landing |  |
| Title Image | 460px x 90px | png | homepage, collections landing, collection detail |  |
| Detail | 500px x 290px | collection detail | collection detail |  |
| Promo Block Background | 460px x 264px | jpg | collections landing |  |
| Promo Block Title | 220px x 104px | png | collections landing |  |
| Small Promo | 208px x 248px | jpg | collections landing, mega-navigation |  |
| Promo Images | ||||
| Image | Size | File Type | Usage | Sample |
| 4 column | 700px x 224px | jpg | subcategory promos |  |
| 2 column | 340px x 224px | jpg | subcategory promos |  |
| 1 column | 160px x 200px | jpg | subcategory promos |  |
| Sidebar | 220px x 275px | jpg | category, multiple pages |  |
| Home Feature Background | 1400px x 560px | jpg | homepage |  |
| Home Feature Bkgrd Mobile | 768px x 220px | jpg | homepage |  |
| Home Feature Foreground | 460px x 340px | png | homepage |  |
| Sympathy Images | ||||
| Image | Size | File Type | Usage | Sample |
| Header | 1400px x 240px | jpg | sympathy & funeral |  |
| Category Thumbnail | 200px x 200px | jpg | sympathy & funeral |  |
| Color Thumbnail | 90px x 90px | jpg | sympathy & funeral |  |
| Guide Image | 300px x 407px | png | sympathy & funeral |  |
| Deal of the Day Images | ||||
| Image | Size | File Type | Usage | Sample |
| Header Desktop | 1400px x 260px | jpg | deal of the day |  |
| Header Mobile | 768px x 260px | jpg | deal of the day |  |
| Title Image | 320px x 57px | png | deal of the day |  |
| Content Images | ||||
| Image | Size | File Type | Usage | Sample |
| Header | 1400px x 240px | jpg | flower ideas & inspiration |  |
| 2-column Feature | 220px x 240px | png | flower ideas & inspiration |  |
| Large Rectangle | 340px x 280px | jpg | gift ideas |  |
| Small Rectangle | 220px x 150px | jpg | gift ideas |  |
| Large Square | 220px x 220px | jpg | gift ideas |  |
| Small Square | 140px x 140px | jpg | gift ideas |  |
| Circle | 180px x 180px | png | gift ideas |  |