Images help visitors quickly understand your brand, products, work, and space. With Kanorio, you only need to provide clear original photos; the system preserves your files exactly as they are and automatically serves the most appropriate size and format based on the visitor's device.
Every image field on your website (such as hero sections, image-text blocks, galleries, product displays, logos, and social share images) features a unified image picker with four sources:
Click "⋯ → Select from Media Library" next to any image field to reuse images previously uploaded to your site. This doesn't duplicate files or consume extra storage. For details on selecting, bulk uploading, and the "Upload new version" feature, see .
If you aren't ready with your own photos, click "Library" (or "⋯ → Select from Library" if an image is already set) to search Pexels and Pixabay for free commercial-use photos. Once selected, the system automatically saves the photo to your site's media library. See "Free commercial stock libraries" below for search tips and licensing.
Click "Link" (or "⋯ → Use image link" if an image is already set) to paste a public image URL starting with https://:
Kanorio follows an "Original file preservation" principle: we save the file exactly as you uploaded it and only convert it to the fastest-loading format (like WebP or AVIF) on-the-fly at the edge node when a visitor views your page.
| Supported formats | Use cases and system processing |
|---|---|
| JPG / JPEG | Photos, venue shots, portraits, and images with rich color gradients. |
| PNG | Brand logos, icons, or UI screenshots that require a transparent background. |
| WebP | A modern web image format that balances high quality with small file sizes. |
| GIF (including animated) | Dynamic demos or short animations. No cropping tool will appear during upload, and the public website will retain full playback effects (thumbnails in the media library will show a static preview). |
| SVG (Vector) | Brand logos, line icons, and illustrations. They remain sharp at any zoom level; the system automatically performs a security scan (removing potential scripts) upon upload to ensure site safety. |
| HEIC / HEIF | The default capture format for iPhone and iPad. You can upload and save the original file directly. The system automatically converts it to a compatible format for visitors; only a few specific formats (like 10-bit HEIC) are automatically converted to high-quality JPG in your browser before upload. |
A common frustration with website images is: "I cropped it once, but when it goes live or is viewed on mobile, faces or products get cut off. Or, the desktop version is a wide banner, but it looks too small on mobile, and I have to re-upload to fix it."
In Kanorio, image fields that adapt to layout ratios (including Hero sections, Image-text blocks, Full-width images, Gallery cards, Carousel cards, and Multi-link cards) preserve the full original image, so you don't have to pre-crop them:
21:9 for desktop, 4:5 or 1:1 for mobile), or click "Custom" to enter your own. Devices without specific settings will automatically use the default ratio.Shift + arrow keys to move by 10%).Shift + arrow keys to resize). If the frame is too small and zooming might affect quality, the window will warn you.How about share images, product images, and profile photos?
- All upload points preserve the original: Whether it's a page module, SEO social share image, product image, author avatar, or favicon, the system never requires you to pre-crop, allowing the same original to be reused everywhere.
- Share images and product displays (Auto-detected, manual toggle for "Contain/Cover"): The system automatically detects: White-background, solid-color, or transparent product images default to "Contain" and fill with a matching background color so nothing is cut off; General photos default to "Cover". To adjust, click "⋯ → Adjust presentation" to toggle between "Contain" (with customizable background color) and "Cover" (with drag-to-frame).
- Profile photos (Circular avatars): The full original is saved with a 1:1 circular mask. Use "⋯ → Adjust focus" to reposition the visible area within the circle.
- Smart background for "Contain (No crop)" cards: In blog or product lists, if you choose "Contain (No crop)" for square, portrait, or landscape images, the system intelligently detects the edge colors. White or solid-color product images extend the background color to blend seamlessly; Transparent images show the card's base color; Multi-colored photos get a soft, blurred glow background.
ALT text (alternative text) is a short description of an image. It provides context when images fail to load, is read aloud by screen readers for visually impaired visitors, and helps search engines like Google understand the image subject.
Describe the "key visual elements" specifically. Don't just use the filename or stuff keywords:
| Poor practice | Best practice |
|---|---|
IMG_1234.jpg, product_image_01 | Hand-drip coffee and light roast beans on a cafe bar counter |
| coffee, specialty coffee, hand-drip coffee recommendation | Close-up of a barista brewing single-origin coffee with a gooseneck kettle |
| Our best services | Consultant explaining brand strategy to two founders at a meeting table |
If you forget to fill in ALT text, the system will automatically fill in descriptions for empty image fields in the background after you publish your site, post, or save a product (it will not overwrite your manual text). To check your site's ALT text quality or batch-process with AI, see .
When you are still conceptualizing your layout and don't have real photos yet, click "Library" in the image picker to search and apply free photos:
Per Pexels License and Pixabay Content License, photos from both libraries can be used for free on personal and commercial websites. No extra payment is required, and attribution is not mandatory (though Kanorio displays photographer info and source links in the picker for your convenience).
Keep three boundaries in mind:
When someone shares your page link on LINE, Facebook, X (Twitter), or LinkedIn, the preview thumbnail is called a "Share image (OG image)". This is set separately from page module images. Manage it in "SEO › Pages" or the page settings in the editor. For details, see .
brand-logo-dark.svg, studio-front-door.jpg). It makes searching in the Media Library much faster.In fixed-ratio fields like Hero sections, Image-text blocks, and cards, Kanorio saves your full original image and opens the "Adjust focus" window after selection. This lets you pick the visual center (like a face or product). This way, the focus remains intact regardless of whether the visitor is on desktop or mobile, and you won't need to re-upload if you change the layout later.
Yes. You can upload .heic or .heif photos directly. The system saves the original and automatically converts it to a format viewable on all phones and computers when visitors browse your site. If you encounter a rare, unrecognizable encoding, please export it as a JPG from your phone or computer first.
This is usually because the original image has low resolution (e.g., a photo compressed by a messaging app) and is being stretched to fit a full-width cover. The system does not degrade your original; please use a higher-resolution photo and confirm the visible area in "Adjust focus".