{"id":33438,"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-04-21T04:47:55","modified_gmt":"2026-04-21T04:47:55","slug":"optimitzacio-imatges-disseny-web","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/","title":{"rendered":"La mida importa en el disseny web"},"content":{"rendered":"

Avui us parlarem de la import\u00e0ncia de tenir imatges optimitzades en el nostre disseny web<\/strong>.<\/p>\n

\u00c9s un aspecte clau a l\u2019hora de definir el disseny d\u2019una p\u00e0gina<\/strong> web<\/strong>, ja que en depenen factors tan rellevants com el temps de c\u00e0rrega i possibles penalitzacions, tant directes com indirectes, per part dels clients, els usuaris i fins i tot Google.<\/p>\n

Aix\u00ed que, si est\u00e0s pensant a contactar-nos perqu\u00e8 et fem una p\u00e0gina web<\/strong>, et mostrarem alguns trucs essencials per maximitzar la relaci\u00f3 entre imatge, qualitat i pes.<\/p>\n

1. Aprendre a optimitzar les imatges sense perdre qualitat en el nostre disseny web<\/h2>\n

Aquest \u00e9s el m\u00ednim imprescindible: encara que no facis res m\u00e9s de la llista, aquest pas \u00e9s fonamental. Nom\u00e9s cal utilitzar un d\u2019aquests dos programes: ImageOptim per a OS X o FileOptimizer per a Windows i Linux, que automatitzen l\u2019optimitzaci\u00f3 d\u2019imatges.<\/p>\n

Nom\u00e9s heu d\u2019arrossegar les vostres imatges dins l\u2019aplicaci\u00f3 mentre us preneu un bon Cola Cao.<\/p>\n

\u00c9s un proc\u00e9s rapid\u00edssim i sense complicacions, i el resultat s\u00f3n imatges perfectament optimitzades.<\/p>\n

2. Mida adequada<\/h2>\n

Fer servir imatges amb dimensions incorrectes \u00e9s un error molt habitual i pot tenir conseq\u00fc\u00e8ncies greus.<\/p>\n

Sovint pensem que, si veiem la imatge b\u00e9 a la pantalla, ja est\u00e0 tot correcte, per\u00f2 pot ser que el navegador estigui carregant una imatge molt m\u00e9s gran del necessari, amb el pes que aix\u00f2 comporta, i nom\u00e9s n\u2019estigui mostrant una versi\u00f3 redu\u00efda.<\/p>\n

Per aix\u00f2, les dimensions de la imatge han de coincidir exactament amb l\u2019espai que ocuparan al web, ni m\u00e9s ni menys.<\/p>\n

3. Desa per a web<\/h2>\n

Aquesta opci\u00f3 segur que ja la coneixeu si sou professionals del disseny web<\/strong>, i pot estalviar molt de temps si s\u2019incorpora correctament al vostre flux de treball.<\/p>\n

Consisteix simplement a desar les imatges amb qu\u00e8 treballeu en format web, \u00e9s a dir, optimitzades.<\/p>\n

Aqu\u00ed teniu una comparativa: de dreta a esquerra, una imatge desada per a web al 100, 70, 50 i 20 %. Segons la mida original, la difer\u00e8ncia pot ser m\u00e9s o menys apreciable.<\/p>\n

Hi ha moltes teories sobre el percentatge de qualitat ideal, per\u00f2 el millor \u00e9s que feu servir la vostra intu\u00efci\u00f3: proveu, deseu, feu zoom, compareu… el que calgui. \u00c9s la millor manera d\u2019entrenar la vostra mirada i aconseguir un resultat \u00f2ptim.<\/p>\n

\"tama\u00f1o<\/a><\/p>\n

4. Necessito realment aquestes imatges al meu disseny web?<\/h2>\n

\u00c9s una pregunta clau que, juntament amb d\u2019altres, forma part de l\u2019an\u00e0lisi del projecte web<\/strong>. Un bon disseny web<\/strong> parteix d\u2019una an\u00e0lisi de necessitats, aix\u00ed que no es tracta de posar-hi m\u00e9s imatges perqu\u00e8 s\u00ed, sin\u00f3 de valorar-ne la necessitat real.<\/p>\n

5. Utilitza el format adequat<\/h2>\n

Hi ha diferents formats d\u2019imatge, cadascun amb les seves particularitats, avantatges i inconvenients.<\/p>\n

Con\u00e8ixer-los t\u2019ajudar\u00e0 a aplicar el format m\u00e9s adequat en cada cas.<\/p>\n

Si tens qualsevol dubte, truca\u2019ns a l\u2019estudi de Barcelona<\/strong> i t\u2019ajudarem en tot el que calgui.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

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

Avui us parlarem de la import\u00e0ncia de tenir imatges optimitzades en el nostre disseny web. \u00c9s un aspecte clau a l\u2019hora de definir el disseny d\u2019una p\u00e0gina web, ja que en depenen factors tan rellevants com el temps de c\u00e0rrega i possibles penalitzacions, tant directes com indirectes, per part dels clients, els usuaris i fins […]<\/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":[207,208],"class_list":["post-33438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destacat","category-disseny-desenvolupament-web"],"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\/ca\/blog\/optimitzacio-imatges-disseny-web\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\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\/ca\/blog\/optimitzacio-imatges-disseny-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Barcelona\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-14T14:34:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-21T04:47:55+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=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"La mida importa en el disseny web\",\"datePublished\":\"2016-09-14T14:34:54+00:00\",\"dateModified\":\"2026-04-21T04:47:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/\"},\"wordCount\":515,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg\",\"articleSection\":[\"Destacat\",\"Disseny i desenvolupament web\"],\"inLanguage\":\"ca\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/\",\"url\":\"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/\",\"name\":\"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-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-04-21T04:47:55+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#\/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\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-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\/ca\/#website\",\"url\":\"https:\/\/codewebbarcelona.com\/ca\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewebbarcelona.com\/ca\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@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\/ca\/blog\/optimitzacio-imatges-disseny-web\/","og_locale":"ca_ES","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\/ca\/blog\/optimitzacio-imatges-disseny-web\/","og_site_name":"Code Barcelona","article_published_time":"2016-09-14T14:34:54+00:00","article_modified_time":"2026-04-21T04:47:55+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":{"Escrit per":"cd26Bc","Temps estimat de lectura":"3 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"La mida importa en el disseny web","datePublished":"2016-09-14T14:34:54+00:00","dateModified":"2026-04-21T04:47:55+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/"},"wordCount":515,"image":{"@id":"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg","articleSection":["Destacat","Disseny i desenvolupament web"],"inLanguage":"ca"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/","url":"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/","name":"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-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-04-21T04:47:55+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/ca\/#\/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":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-web\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/codewebbarcelona.com\/ca\/blog\/optimitzacio-imatges-disseny-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\/ca\/#website","url":"https:\/\/codewebbarcelona.com\/ca\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"ca","@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\/ca\/wp-json\/wp\/v2\/posts\/33438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/comments?post=33438"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/posts\/33438\/revisions"}],"predecessor-version":[{"id":33444,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/posts\/33438\/revisions\/33444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/media\/4461"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/media?parent=33438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/categories?post=33438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}