{"id":878,"date":"2022-08-12T10:16:11","date_gmt":"2022-08-12T10:16:11","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/12\/6466243-hostinger-website-builder-responsive-web-design-and-image-size\/"},"modified":"2026-03-16T12:12:07","modified_gmt":"2026-03-16T12:12:07","slug":"6466243-hostinger-website-builder-responsive-web-design-and-image-size","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6466243-hostinger-website-builder-responsive-web-design-and-image-size\/","title":{"rendered":"Hostinger Website Builder: Responsive Web Design and Image Size"},"content":{"rendered":"<p class=\"no-margin\">All website templates that are available with <b><a class=\"intercom-content-link\" href=\"https:\/\/www.hostinger.com\/website-builder\" target=\"_blank\" rel=\"noopener\">Hostinger Website Builder<\/a><\/b> follow<b> <a class=\"intercom-content-link\" href=\"https:\/\/www.hostinger.com\/tutorials\/website-terminology#Responsiveness\" target=\"_blank\" rel=\"noopener\">responsive web design<\/a><\/b> that ensures the best user experience across all devices. Responsive web design means that your website content (including images and videos) will <b>automatically adapt<\/b> &ndash; slightly stretch or shrink &ndash; <b>depending on your website visitor&rsquo;s device<\/b> <b>properties <\/b>(its screen size, resolution, etc.).<\/p><p class=\"no-margin\">In other words, responsive web design creates dynamic changes to the appearance of a website depending on the device that&rsquo;s used to view it. Rest assured that every element on your website will look good for every user!<\/p><p class=\"no-margin\">It means that<b> there&rsquo;s no one set of dimensions for perfect image size<\/b>. Even though there is no optimal image size for image elements nor for section background images, you can manually <b><a class=\"intercom-content-link\" href=\"\/support\/6491230-website-builder-resizing-elements-and-sections\" target=\"_blank\" rel=\"noopener\">resize image elements and sections<\/a><\/b> within the builder however you want.<\/p><h2 id=\"h_ed3cf78791\">Notes And Tips<\/h2><ul>\n<li>\n<p class=\"no-margin\">The maximum supported image file size is <b>15 MB<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">The recommended image file format is <b>.webp<\/b>, but the builder supports various other formats (except for <b>.heic<\/b>)<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Some SEO audit tools check the image file format and would flag a .png or .jpg image because it is expecting modern formats like <b>.webp<\/b> or<b> .avif<\/b><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p class=\"no-margin\">The builder doesn&rsquo;t change\/convert image formats, but it does <b>compress images<\/b>, e.g., the <b><a class=\"intercom-content-link\" href=\"https:\/\/assets.zyrosite.com\/YanOrZx36wUk8XVJ\/12123231-Y4LlaDGvaDI4yxOv.jpg\" target=\"_blank\" rel=\"noopener\">original image<\/a><\/b> and <b><a class=\"intercom-content-link\" href=\"https:\/\/assets.zyrosite.com\/cdn-cgi\/image\/format=auto,w=282,fit=crop\/YanOrZx36wUk8XVJ\/12123231-Y4LlaDGvaDI4yxOv.jpg\" target=\"_blank\" rel=\"noopener\">compressed image<\/a><\/b>; 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<b> <\/b>which boosts page loading speed<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Avoid images with excessive borders; for example, the images above have redundant black borders that make their width larger: this affects compression, as it&rsquo;s impossible to tell whether borders bring any value or not thus it scales the whole image down maintaining the aspect ratio<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">The recommended <b><a class=\"intercom-content-link\" href=\"\/support\/6466412-website-builder-link-preview-images\" target=\"_blank\" rel=\"noopener\">link preview image<\/a><\/b> size is <b>1200&times;630 PX<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">The recommended <b><a class=\"intercom-content-link\" href=\"\/support\/6435805-website-builder-logo\" target=\"_blank\" rel=\"noopener\">logo<\/a> <\/b>format is <b>.png<\/b> or <b>.svg<\/b>, as logos are usually transparent<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">The recommended <b><a class=\"intercom-content-link\" href=\"\/support\/6811698-website-builder-how-to-change-product-image-proportions\" target=\"_blank\" rel=\"noopener\">product image<\/a><\/b> size is <b>600&times;600 or 900&times;900 PX<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Avoid uploading visuals the titles of which contain spaces or special\/non-Latin characters<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Avoid using GIFs as they may slow down the page<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn how visuals are handled using Hostinger Website Builder<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[281],"tags":[],"class_list":["post-878","post","type-post","status-publish","format-standard","hentry","category-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6466243-hostinger-website-builder-responsive-web-design-and-image-size\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6466243-hostinger-creador-de-sitios-web-diseno-web-adaptable-y-tamano-de-las-imagenes\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6466243-hostinger-createur-de-site-web-conception-web-reactive-et-taille-de-l-image\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6466243-hostinger-website-builder-responsive-web-design-dan-ukuran-gambar\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6466243-svetainiu-kurimo-irankis-hostinger-adaptyvusis-svetaines-dizainas-ir-rekomendacijos-vizualams\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6466243-hostinger-criador-de-sites-design-visual-responsivo-e-tamanho-de-imagem\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=878"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/878\/revisions"}],"predecessor-version":[{"id":8602,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/878\/revisions\/8602"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}