Using the correct image formats and optimizing your files before uploading helps ensure strong performance, faster load times, and a smooth learner experience.
Image Formats
Habitat supports the following image formats: JPG (.jpg), PNG (.png), GIF (.gif), and SVG (.svg). Choosing the right format is important for balancing image quality and performance.
JPG (.jpg)
JPG is a lossy compressed file format that keeps file sizes smaller. It is ideal for photographs and realistic images, and is the recommended default for most use cases.
PNG (.png)
PNG is a lossless compression format that preserves image quality but results in larger file sizes. It is best suited for logos, graphics, illustrations, and images that include text.
SVG (.svg)
SVG is a web-friendly vector format. Unlike pixel-based formats like JPG and PNG, SVG files use mathematical formulas to scale without losing quality. This makes them ideal for logos, icons, and graphics.
SVGs do not currently support the Reader shadowbox and cannot be used in places such as cover and chapter thumbnails.
GIF (.gif)
GIF is a lossless format limited to 256 colors. It is the only supported format that allows animation, but it should be used sparingly due to quality and file size limitations.
Recommended Image Specifications
Follow these guidelines when uploading images:
File size
- Recommended: under 2 MB
- Maximum: 10 MB
Dimensions
- Minimum: 1024 px (longest side)
- Maximum: 2048 px (longest side)
Formats for best results
- JPG (recommended default)
- PNG (24-bit for graphics when needed)
Images that exceed these guidelines may result in slower load times or issues when expanding images in the reader experience.
Why Image Optimization Matters
Large or poorly optimized images can slow page load times, increase bandwidth usage, and negatively impact the learner experience. While a single oversized image may not cause noticeable issues, using many unoptimized images across your content can significantly degrade performance over time.
Best Practices Before Uploading
Images from cameras or smartphones are often larger than necessary and may include extra metadata.
To optimize your images:
- Resize images so the longest side is 2048 px or smaller.
- Reduce file size to under 2 MB when possible.
- Remove unnecessary metadata.
Tools for Resizing Images
You can use common tools to resize images:
Mac: Preview, Photos, or third-party applications
Windows: Photos, Paint, or third-party applications
How Habitat Handles Images
Habitat stores images at the project level, meaning they are not shared across projects. If you want to reuse an image in another project, you will need to upload it again. For teams that need to reuse large volumes of images across projects, an EchoInk representative can provide guidance.
In the authoring environment, images are downsampled to improve performance and reduce load times while editing. However, full resolution is preserved in the exported content, so images display at their intended quality for learners.
Habitat also automatically resizes images to adapt to different screen sizes and resolutions. This responsive behavior means you do not need to define fixed dimensions in HTML, and images will scale appropriately across devices.
If you require specific or custom image sizing templates, you can contact your Inkling representative for additional options.