Understand how responsive web design and image sizing work in Hostinger AI Builder manual mode, so you can choose visuals that look sharp and load quickly across all devices.
How responsive design handles images
All website templates that are available with Hostinger AI Builder follow responsive web design that ensures the best user experience across all devices. Responsive web design means that your website content (including images and videos) will automatically adapt – slightly stretch or shrink – depending on your website visitor’s device properties (its screen size, resolution, etc.).
In other words, responsive web design creates dynamic changes to the appearance of a website depending on the device that’s used to view it. Rest assured that every element on your website will look good for every user!
It means that there’s no one set of dimensions for perfect image size. Even though there is no optimal image size for image elements nor for section background images, you can manually resize image elements and sections within the builder however you want.
If you haven’t added images to your site yet, see how to add images first.
Notes and tips
-
The maximum supported image file size is 15 MB
-
The recommended image file format is .webp, but the builder supports various other formats (except for .heic)
-
Some SEO audit tools check the image file format and would flag a .png or .jpg image because it is expecting modern formats like .webp or .avif
-
-
The builder doesn’t change/convert image formats, but it does compress images, e.g., the original image and compressed image; the compressed image has lower quality and a smaller scale but on the other hand, the compressed image weighs 5 kB, whereas the original one weighs 64 kB which boosts page loading speed. GIFs are the exception — they aren’t optimized by the builder due to compression limitations, which is why they can weigh down your page significantly more than other formats.
-
Avoid images with excessive borders; for example, the images above have redundant black borders that make their width larger: this affects compression, as it’s impossible to tell whether borders bring any value or not thus it scales the whole image down maintaining the aspect ratio
-
The recommended link preview image size is 1200×630 PX
-
The recommended logo format is .png or .svg, as logos are usually transparent
-
The recommended product image size is 600×600 or 900×900 PX
-
Avoid uploading visuals the titles of which contain spaces or special/non-Latin characters
-
Avoid using GIFs where possible, since they aren’t automatically optimized and can significantly slow down page load times.