Size each image for its largest real display, provide appropriately smaller variants and judge visual quality at the rendered size instead of uploading the camera original everywhere.
Separate display size from source size
A browser may display an image at 700 CSS pixels while a high-density screen benefits from a larger source. That does not mean every card needs a 6000-pixel photograph. Identify the maximum layout width and create a practical derivative for that role.
Keep the camera original offline, then generate web versions. This protects future editing flexibility without making every visitor download production-sized files.
Use responsive variants
A phone should not need the same asset as a wide desktop hero. Responsive image markup lets the browser select among multiple widths. Even when a platform creates variants automatically, providing a sensibly cropped and compressed source improves the starting point.
Protect the content that matters
Text inside images, faces and product edges reveal compression damage quickly. Review those areas after resizing. If text is part of the interface rather than the photograph, real HTML text is usually sharper, searchable and more accessible.
Measure the final page
A smaller file is useful only if the page actually delivers it. After publishing, inspect network transfer size and loading performance rather than relying solely on the export dialog. Avoid loading hidden large images for components that visitors may never open.
Final checklist
- The largest display width is known.
- A separate original is retained.
- Mobile visitors receive an appropriate variant.
- Important details were inspected after export.
- Decorative images have useful alternative-text handling.
- Published transfer size was checked.
Frequently asked questions
Should every web image be 1920 pixels wide?
No. Choose dimensions from the component’s real maximum display size and screen-density needs.
Does reducing dimensions improve speed?
Usually, because fewer pixels need encoding and transfer, but the delivered file and page implementation still need verification.
Should text be baked into a hero image?
Use HTML text when practical for accessibility, responsiveness and search visibility.
This guide is written for practical education, reviewed against the current MakeLiora tool, and updated when its workflow changes. Read our editorial policy.