{"id":1799,"date":"2023-01-03T12:58:32","date_gmt":"2023-01-03T12:58:32","guid":{"rendered":"https:\/\/blog.hostinger.io\/pt\/support\/2023\/01\/03\/6466243-hostinger-criador-de-sites-design-visual-responsivo-e-tamanho-de-imagem\/"},"modified":"2023-01-03T12:58:32","modified_gmt":"2023-01-03T12:58:32","slug":"6466243-hostinger-criador-de-sites-design-visual-responsivo-e-tamanho-de-imagem","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/br\/support\/6466243-hostinger-criador-de-sites-design-visual-responsivo-e-tamanho-de-imagem\/","title":{"rendered":"Hostinger Criador de Sites: Design Visual Responsivo e Tamanho de Imagem"},"content":{"rendered":"<p class=\"no-margin\">Todos os models ou templates de sites dispon&iacute;veis com o <b><a href=\"https:\/\/www.hostinger.com.br\/criador-de-sites\" target=\"_blank\" class=\"intercom-content-link\">Criador de Sites da Hostinger<\/a><\/b> seguem um <b><a href=\"https:\/\/www.hostinger.com\/tutorials\/website-terminology#Responsiveness\" target=\"_blank\" class=\"intercom-content-link\">design visual responsivo<\/a><\/b> que garante a melhor experi&ecirc;ncia do usu&aacute;rio em todos os dispositivos. Um design visual responsivo significa que o conte&uacute;do do seu site se adaptar&aacute; automaticamente &ndash; ligeiramente esticado ou reduzido &ndash; <b>dependendo das propriedades do dispositivo do visitante do site<\/b> (tamanho da tela, resolu&ccedil;&atilde;o, etc.).<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Em outras palavras, o design visual responsivo cria mudan&ccedil;as din&acirc;micas na apar&ecirc;ncia de um site, dependendo do dispositivo usado para visualiz&aacute;-lo. Tenha certeza de que todos os elementos do seu site ficar&atilde;o bem para todos os usu&aacute;rios!<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Isso significa que<b> n&atilde;o h&aacute; um conjunto de dimens&otilde;es para o tamanho perfeito da imagem<\/b>. Mesmo que n&atilde;o haja tamanho de imagem ideal para elementos de imagem nem para imagens de fundo de se&ccedil;&atilde;o, voc&ecirc; pode <b><a href=\"\/br\/support\/6491230-criador-de-sites-como-mudar-o-tamanho-dos-elementos-e-secoes\" target=\"_blank\" class=\"intercom-content-link\">redimensionar elementos e se&ccedil;&otilde;es<\/a><\/b> como quiser.<\/p><p class=\"no-margin\">\n<\/p><h1 id=\"h_7dd16b73e4\">Observa&ccedil;&otilde;es e recomenda&ccedil;&otilde;es <\/h1><ul>\n<li>\n<p class=\"no-margin\">O tamanho m&aacute;ximo de arquivo de imagem suportado &eacute; <b>15 MB<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">O formato de arquivo de imagem recomendado &eacute; <b>.webp<\/b>, mas o construtor suporta v&aacute;rios outros formatos (exceto <b>.heic<\/b>)<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Algumas ferramentas de auditoria de SEO verificam o formato do arquivo de imagem e sinalizam uma imagem <b>.png<\/b> ou <b>.jpg<\/b> porque esperam formatos modernos como <b>.webp <\/b>ou <b>.avif<\/b><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p class=\"no-margin\">O construtor n&atilde;o altera\/converte formatos de imagem, mas <b>comprime imagens<\/b>, por exemplo, a <b><a href=\"https:\/\/assets.zyrosite.com\/YanOrZx36wUk8XVJ\/12123231-Y4LlaDGvaDI4yxOv.jpg\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">imagem original<\/a><\/b> e a <b><a href=\"https:\/\/assets.zyrosite.com\/cdn-cgi\/image\/format=auto,w=282,fit=crop\/YanOrZx36wUk8XVJ\/12123231-Y4LlaDGvaDI4yxOv.jpg\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">imagem compactada<\/a><\/b>; a imagem compactada tem qualidade inferior e escala menor, mas, por outro lado, a imagem compactada pesa 5 kB, enquanto a original pesa 64 kB, o que aumenta a velocidade de carregamento da p&aacute;gina<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Evite imagens com bordas excessivas; por exemplo, as imagens acima t&ecirc;m bordas pretas redundantes que aumentam a largura: isso afeta a compacta&ccedil;&atilde;o, pois &eacute; imposs&iacute;vel saber se as bordas trazem algum valor ou n&atilde;o; portanto, a imagem inteira &eacute; reduzida, mantendo a propor&ccedil;&atilde;o<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">O tamanho recomendado da <b><a href=\"\/br\/support\/6466412-criador-de-sites-como-adicionar-imagem-de-pre-visualizacao-aos-seus-links\" target=\"_blank\" class=\"intercom-content-link\">imagem de visualiza&ccedil;&atilde;o do link<\/a><\/b> &eacute; <b>1200&times;630 PX<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">O formato recomendado para o <b><a href=\"\/br\/support\/6435805-criador-de-sites-como-adicionar-ou-mudar-um-logo\" target=\"_blank\" class=\"intercom-content-link\">logotipo<\/a><\/b> &eacute; <b>.png<\/b> ou <b>.svg<\/b>, pois os logotipos geralmente s&atilde;o transparentes<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">O tamanho recomendado para a <b><a href=\"\/br\/support\/6811698-criador-de-sites-como-alterar-as-proporcoes-da-imagem-do-produto\" target=\"_blank\" class=\"intercom-content-link\">imagem do produto<\/a><\/b> &eacute; <b>600&times;600<\/b> ou <b>900&times;900 PX<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Evite fazer upload de imagens cujos t&iacute;tulos contenham espa&ccedil;os ou caracteres especiais\/n&atilde;o latinos<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Evite usar GIFs, pois eles podem deixar a p&aacute;gina mais lenta<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda como os recursos visuais s\u00e3o tratados usando o 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":[258],"tags":[],"class_list":["post-1799","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\/br\/support\/wp-json\/wp\/v2\/posts\/1799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/comments?post=1799"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/posts\/1799\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/media?parent=1799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/categories?post=1799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/tags?post=1799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}