{"id":79367,"date":"2016-09-14T14:34:54","date_gmt":"2016-09-14T14:34:54","guid":{"rendered":"https:\/\/codewebbarcelona.com\/optimizacion-imagenes-en-diseno-web\/"},"modified":"2026-06-11T00:51:31","modified_gmt":"2026-06-11T00:51:31","slug":"otimizacao-imagens-design-web","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/","title":{"rendered":"O tamanho importa no design web"},"content":{"rendered":"

Hoje vamos falar sobre a import\u00e2ncia de utilizar imagens otimizadas no nosso design web<\/strong>.<\/p>\n

Este \u00e9 um fator fundamental na defini\u00e7\u00e3o do design de um site<\/strong>, pois dele dependem aspetos t\u00e3o relevantes como o tempo de carregamento e eventuais penaliza\u00e7\u00f5es, diretas ou indiretas, por parte dos clientes, utilizadores e at\u00e9 do pr\u00f3prio Google.<\/p>\n

Se est\u00e1s a pensar contactar-nos para desenvolvermos o teu site<\/strong>, partilhamos alguns truques essenciais para tirares o m\u00e1ximo partido da rela\u00e7\u00e3o entre imagem, qualidade e peso.<\/p>\n

1. Otimizar imagens sem perder qualidade no design web<\/h2>\n

Este \u00e9 o requisito m\u00ednimo a cumprir \u2014 mesmo que n\u00e3o sigas mais nenhuma dica, esta \u00e9 indispens\u00e1vel. Basta utilizares um destes dois programas: ImageOptim para OS X ou FileOptimizer para Windows e Linux, que automatizam a otimiza\u00e7\u00e3o de imagens.<\/p>\n

S\u00f3 tens de arrastar as tuas imagens para a aplica\u00e7\u00e3o enquanto bebes um caf\u00e9.<\/p>\n

\u00c9 um processo extremamente r\u00e1pido, sem complica\u00e7\u00f5es, e o resultado s\u00e3o imagens otimizadas.<\/p>\n

2. Dimens\u00f5es corretas<\/h2>\n

Utilizar imagens com dimens\u00f5es erradas \u00e9 um erro comum e pode ter consequ\u00eancias negativas.<\/p>\n

Muitas vezes, ao vermos a imagem no ecr\u00e3 com o tamanho aparentemente certo, assumimos que est\u00e1 tudo bem. No entanto, o navegador pode estar a carregar uma imagem muito maior, com mais peso, mas a exibi-la reduzida.<\/p>\n

Por isso, as dimens\u00f5es da imagem devem corresponder exatamente ao espa\u00e7o que v\u00e3o ocupar \u2014 nem mais, nem menos.<\/p>\n

3. Guardar para web<\/h2>\n

Esta funcionalidade \u00e9 bem conhecida por quem trabalha em design web<\/strong> e poupa imenso tempo quando integrada corretamente no fluxo de trabalho.<\/p>\n

Consiste simplesmente em guardar as imagens para o site j\u00e1 em formato otimizado para web.<\/p>\n

Aqui podes ver uma compara\u00e7\u00e3o: da direita para a esquerda, tens imagens guardadas para web a 100, 70, 50 e 20% de qualidade. Dependendo do tamanho original, a diferen\u00e7a ser\u00e1 mais ou menos vis\u00edvel.<\/p>\n

Existem v\u00e1rias teorias sobre a percentagem ideal de qualidade, mas o melhor \u00e9 confiares na tua intui\u00e7\u00e3o: experimenta, guarda, faz zoom, compara… tudo o que for preciso. Assim treinas o olhar e consegues resultados perfeitos.<\/p>\n

\"tamanho<\/a><\/p>\n

4. Preciso mesmo destas imagens no meu site?<\/h2>\n

Esta \u00e9 uma excelente quest\u00e3o e faz parte da an\u00e1lise de qualquer projeto web<\/strong>. Um bom design web<\/strong> come\u00e7a por identificar necessidades reais \u2014 n\u00e3o se trata de ter mais imagens, mas sim de perceber quais s\u00e3o realmente necess\u00e1rias.<\/p>\n

5. Utilizar o formato adequado<\/h2>\n

Existem v\u00e1rios formatos de imagem, cada um com as suas caracter\u00edsticas, vantagens e limita\u00e7\u00f5es.<\/p>\n

\u00c9 importante conhec\u00ea-los para escolher sempre o mais adequado a cada situa\u00e7\u00e3o.<\/p>\n

Se tiveres alguma d\u00favida, liga para o nosso est\u00fadio em Barcelona<\/strong> \u2014 estamos c\u00e1 para ajudar no que for preciso.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Hoje vamos falar sobre a import\u00e2ncia de utilizar imagens otimizadas no nosso design web. Este \u00e9 um fator fundamental na defini\u00e7\u00e3o do design de um site, pois dele dependem aspetos t\u00e3o relevantes como o tempo de carregamento e eventuais penaliza\u00e7\u00f5es, diretas ou indiretas, por parte dos clientes, utilizadores e at\u00e9 do pr\u00f3prio Google. Se est\u00e1s […]<\/p>\n","protected":false},"author":1,"featured_media":4461,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"class_list":["post-79367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"\nClaves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n<\/title>\n<meta name=\"description\" content=\"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n\" \/>\n<meta property=\"og:description\" content=\"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/\" \/>\n<meta property=\"og:site_name\" content=\"CODE\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-14T14:34:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-11T00:51:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/otimizacao-imagens-design-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/otimizacao-imagens-design-web\\\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"O tamanho importa no design web\",\"datePublished\":\"2016-09-14T14:34:54+00:00\",\"dateModified\":\"2026-06-11T00:51:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/otimizacao-imagens-design-web\\\/\"},\"wordCount\":465,\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/otimizacao-imagens-design-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/el-tamano-importa-en-el-diseno-web-featured.jpg\",\"inLanguage\":\"pt-PT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/otimizacao-imagens-design-web\\\/\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/otimizacao-imagens-design-web\\\/\",\"name\":\"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/otimizacao-imagens-design-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/otimizacao-imagens-design-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/el-tamano-importa-en-el-diseno-web-featured.jpg\",\"datePublished\":\"2016-09-14T14:34:54+00:00\",\"dateModified\":\"2026-06-11T00:51:31+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/otimizacao-imagens-design-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/otimizacao-imagens-design-web\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/el-tamano-importa-en-el-diseno-web-featured.jpg\",\"contentUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/el-tamano-importa-en-el-diseno-web-featured.jpg\",\"width\":2074,\"height\":1383},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#website\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/\",\"name\":\"CODE\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\\\/\\\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n","description":"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/","og_locale":"pt_PT","og_type":"article","og_title":"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n","og_description":"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.","og_url":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/","og_site_name":"CODE","article_published_time":"2016-09-14T14:34:54+00:00","article_modified_time":"2026-06-11T00:51:31+00:00","og_image":[{"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg","width":1024,"height":683,"type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"O tamanho importa no design web","datePublished":"2016-09-14T14:34:54+00:00","dateModified":"2026-06-11T00:51:31+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/"},"wordCount":465,"image":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg","inLanguage":"pt-PT"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/","url":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/","name":"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg","datePublished":"2016-09-14T14:34:54+00:00","dateModified":"2026-06-11T00:51:31+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.","inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/otimizacao-imagens-design-web\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg","width":2074,"height":1383},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#website","url":"https:\/\/codewebbarcelona.com\/pt-pt\/","name":"CODE","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/pt-pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/posts\/79367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=79367"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/posts\/79367\/revisions"}],"predecessor-version":[{"id":79373,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/posts\/79367\/revisions\/79373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/media\/4461"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=79367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=79367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}