{"id":3346,"date":"2024-07-02T15:31:05","date_gmt":"2024-07-02T15:31:05","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=3346"},"modified":"2025-01-27T13:07:44","modified_gmt":"2025-01-27T13:07:44","slug":"o-que-sao-imagens-em-design-de-sites","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-sao-imagens-em-design-de-sites\/","title":{"rendered":"O que s\u00e3o imagens em design de sites?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#what-kind-of-images-should-i-use-on-my-website\">Que tipo de imagens devo usar no meu site?<\/a><\/li><li><a href=\"#where-can-i-find-free-or-affordable-images-for-my-website\">Onde posso encontrar imagens gratuitas ou acess\u00edveis para o meu site?<\/a><\/li><li><a href=\"#how-do-i-make-sure-my-images-load-quickly\">Como posso garantir que minhas imagens carreguem rapidamente?<\/a><\/li><li><a href=\"#do-i-need-to-worry-about-image-copyright\">Preciso me preocupar com os direitos autorais das imagens?<\/a><\/li><li><a href=\"#do-i-need-professional-images-for-my-website\">Preciso de imagens profissionais para o meu site?<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"what-kind-of-images-should-i-use-on-my-website\" style=\"color:#231a50;font-size:32px\">Que tipo de imagens devo usar no meu site?<\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:19px\">As imagens em seu site devem ser variadas,<strong><em> <\/em><\/strong>de alta qualidade, relevantes e otimizadas para uso na web. Certifique-se de sempre usar uma variedade de imagens. Por exemplo, tenha um logotipo no cabe\u00e7alho e fotos e ilustra\u00e7\u00f5es relevantes em seu conte\u00fado.&nbsp;<\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><strong>Formatos de arquivo: <\/strong>Use formatos otimizados para o tipo de imagem e velocidade da p\u00e1gina da web. Use JPG para fotos, PNG para gr\u00e1ficos e GIFs para anima\u00e7\u00f5es. Os arquivos WebP s\u00e3o uma alternativa ao JPG e PNG otimizados para os tempos de carregamento do site.\u00a0<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><strong>Texto alternativo: <\/strong>Para acessibilidade e otimiza\u00e7\u00e3o para mecanismos de busca, sempre inclua \u201ctexto alternativo\u201d com suas imagens. Esta \u00e9 uma breve descri\u00e7\u00e3o de suas imagens para leitores de tela e rastreadores de mecanismos de busca.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"where-can-i-find-free-or-affordable-images-for-my-website\" style=\"color:#231a50;font-size:32px\">Onde posso encontrar imagens gratuitas ou acess\u00edveis para o meu site?<\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Existem muitas bibliotecas de imagens online gratuitas. As imagens nesses sites s\u00e3o, em sua maioria, gratuitas para usar, mas certifique-se de revisar os termos de licenciamento antes de us\u00e1-las. Op\u00e7\u00f5es populares incluem:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><a href=\"https:\/\/unsplash.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Unsplash<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.pexels.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Pexels<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/pixabay.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Pixabay<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.shutterstock.com\/discover\/image-packs-0224?cr=bc&amp;ds_ag=FF%3DBrand-Shutterstock-Core_AU%3DProspecting&amp;ds_agid=58700002482196332&amp;ds_cid=71700000023504488&amp;ds_eid=700000001400247&amp;gad_source=1&amp;gclid=CjwKCAjw5ImwBhBtEiwAFHDZxzQt7L67VxzqNook7FjX_95Xd2Gt6_D-aMCwYe1F3jmA_7_ASwdlZBoCJRMQAvD_BwE&amp;gclsrc=aw.ds&amp;kw=shutterstock&amp;pl=PPC_GOO_CA_BD-691117038468&amp;utm_campaign=CO%3DCA_LG%3DEN_BU%3DIMG_AD%3DBRAND_TS%3Dlggeneric_RG%3DAMER_AB%3DACQ_CH%3DSEM_OG%3DCONV_PB%3DGoogle&amp;utm_medium=cpc&amp;utm_source=GOOGLE\" rel=\"nofollow noopener\" target=\"_blank\">Shutterstock<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.istockphoto.com\/?utm_medium=cpc&amp;utm_source=GOOGLE&amp;utm_campaign=CA_Pure-Brand_iStock_EN_Exact&amp;utm_content=iStock_Exact&amp;utm_term=istock&amp;gad_source=1&amp;gclid=CjwKCAjw5ImwBhBtEiwAFHDZxxHHlwOacUHVlxknT7DMWyn8drHIIJOBRO6nsSvqAf7u7Tfnz8CWvBoCjaAQAvD_BwE&amp;gclsrc=aw.ds\" rel=\"nofollow noopener\" target=\"_blank\">iStock<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Embora as imagens de banco de imagens sejam \u00fateis, a gera\u00e7\u00e3o de imagens por IA \u00e9 outra op\u00e7\u00e3o. Por exemplo, construtores de sites como <a href=\"http:\/\/wix.com\" rel=\"nofollow noopener\" target=\"_blank\">Wix<\/a> e <a href=\"https:\/\/hocoos.com\/pt\/\">Hocoos<\/a> oferecem ferramentas de IA para gera\u00e7\u00e3o e edi\u00e7\u00e3o de imagens.<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"how-do-i-make-sure-my-images-load-quickly\" style=\"color:#231a50;font-size:32px\">Como posso garantir que minhas imagens carreguem rapidamente?<\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Usar imagens menores melhorar\u00e1 os tempos de carregamento. Certifique-se de compactar as imagens e considere tipos de arquivo alternativos como \u201cWebP\u201d. Os tempos de carregamento de imagens s\u00e3o importantes para a experi\u00eancia do usu\u00e1rio e as m\u00e9tricas de desempenho.<\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><strong>Construtores de sites CMS b\u00e1sicos: <\/strong>Considere usar um plugin para velocidade da p\u00e1gina e carregamento de imagens. Muitos construtores de sites j\u00e1 t\u00eam esses recursos integrados.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"color:#231a50;font-size:18px\" class=\"wp-block-list has-text-color\">\n<li><strong>Construtores de sites de IA: <\/strong>Construtores de sites de IA avan\u00e7ados como o Hocoos redimensionar\u00e3o e converter\u00e3o imagens automaticamente.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"do-i-need-to-worry-about-image-copyright\" style=\"color:#231a50;font-size:32px\">Preciso me preocupar com os direitos autorais das imagens?<\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Sim, sempre respeite as leis de direitos autorais de imagens em seu site. Verifique novamente se voc\u00ea tem o direito de usar todas as imagens inclu\u00eddas em seu site. Use bibliotecas de fotos gratuitas, fotos de bancos de imagens pagos ou imagens que voc\u00ea mesmo criou. Procure licen\u00e7as Creative Commons, que permitem a adapta\u00e7\u00e3o e distribui\u00e7\u00e3o de imagens. Estar ciente dos direitos autorais de imagens evitar\u00e1 poss\u00edveis problemas legais futuros.<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"do-i-need-professional-images-for-my-website\" style=\"color:#231a50;font-size:32px\">Preciso de imagens profissionais para o meu site?<\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">N\u00e3o, embora as imagens profissionais tenham seus benef\u00edcios, elas n\u00e3o s\u00e3o necess\u00e1rias para muitas empresas. Fotos de bancos de imagens e ferramentas de imagem com IA s\u00e3o suficientes para muitos sites. Ainda assim, a fotografia profissional pode ser necess\u00e1ria para imagens mais distintas e alinhadas \u00e0 marca. Para elementos como logotipos ou infogr\u00e1ficos, considere contratar um designer. A necessidade de imagens profissionais depende do or\u00e7amento da sua empresa.<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"conclusion\" style=\"color:#231a50;font-size:32px\">Conclus\u00e3o<\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:#231a50;font-size:18px\">Ao selecionar e otimizar cuidadosamente as imagens, respeitando os direitos autorais, voc\u00ea criar\u00e1 um site visualmente deslumbrante e amig\u00e1vel.<\/p>","protected":false},"excerpt":{"rendered":"<p>What kind of images should I use on my website? The images on your website should be varied, high-quality, relevant, and optimized for web use. Be sure to always use a variety of images. For example, have a logo in your header, and relevant photos and illustrations in your content.&nbsp; Where can I find free [&hellip;]<\/p>","protected":false},"author":39,"featured_media":3365,"template":"","answers_category":[28],"class_list":["post-3346","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":null,"card_image":3365,"content":[{"acf_fc_layout":"header_section","title":"O que s\u00e3o imagens em design de sites?","descriptions":"<span style=\"font-weight: 400;\">Images in web design are all visual elements on a website that enhance appearance and functionality, including photos, illustrations, infographics, and icons. They are primarily used to enhance the appearance and user experience of a website by breaking up text and communicating ideas. <\/span>\r\n\r\n<span style=\"font-weight: 400;\">While images are mainly used to keep users engaged, they can also be a tool for branding. Infographics can also be used in blog posts to convey data and other complex information. Only use images that fit well with your content and match your brand's aesthetic identity. Be sure you always have the rights to images you're using as well.<\/span>\r\n\r\n<b>Resources: <\/b><span style=\"font-weight: 400;\">Use free stock photo platforms like <\/span><a href=\"https:\/\/unsplash.com\/\"><span style=\"font-weight: 400;\">Unsplash<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/www.pexels.com\/\"><span style=\"font-weight: 400;\">Pexels<\/span><\/a><span style=\"font-weight: 400;\">, and <\/span><a href=\"https:\/\/pixabay.com\/\"><span style=\"font-weight: 400;\">Pixabay<\/span><\/a><span style=\"font-weight: 400;\"> to source images. Check out our article <\/span><a href=\"https:\/\/hocoos.com\/blog\/mastering-website-image-best-practices-a-visual-guide\/\"><span style=\"font-weight: 400;\">How To Choose Images For Your Website<\/span><\/a><span style=\"font-weight: 400;\"> for more ideas. <\/span>","tip_label":"","tip":"","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Images are essential for effective website design","body":"Images make up most visual elements of a website. Use images to break up text, create visual appeal, and communicate information."},{"label":"Image selection and optimization matter","body":"Only use images that are relevant to your brand and content. Choose image formats that are optimized for websites. Image selection and quality have a large impact on user experience."},{"label":"Respect image copyright","body":"The use of copyrighted images without permission is illegal. Choose images that you have the right to use. Use free stock photo libraries, or use images with Creative Commons licenses."}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/3346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media\/3365"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=3346"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=3346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}