{"id":22699,"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-20T23:00:00","modified_gmt":"2026-04-20T23:00:00","slug":"image-optimization-web-design","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/","title":{"rendered":"Size Matters in Web Design"},"content":{"rendered":"

Today we want to talk about the importance of using optimized images in your web design<\/strong>.<\/p>\n

This is a crucial aspect when defining the design of a website<\/strong>, as it directly impacts key factors such as loading speed and the potential penalties you might face from clients, users, and even Google itself.<\/p>\n

So, if you\u2019re considering reaching out to us for your new website<\/strong>, here are a few tips to help you get the best balance between image quality and file size.<\/p>\n

1. How to optimize images without losing quality in your web design<\/h2>\n

This is the bare minimum you should do\u2014even if you skip everything else on this list, don\u2019t skip this step. Use a tool like ImageOptim for OS X or FileOptimizer for Windows and Linux to automate image optimization.<\/p>\n

All you need to do is drag and drop your images into the app\u2014no extra effort required.<\/p>\n

It\u2019s a fast, effortless process that delivers optimized images every time.<\/p>\n

2. Use the right size<\/h2>\n

Using images with incorrect dimensions is a common mistake, but it can have serious consequences.<\/p>\n

Often, we assume that if an image looks fine on screen, everything is okay. In reality, your browser might be loading a much larger image and simply displaying it smaller, which means unnecessary load time.<\/p>\n

Make sure your images are exactly the same size as the space they\u2019ll occupy\u2014no more, no less.<\/p>\n

3. Save for web<\/h2>\n

If you\u2019re experienced in web design<\/strong>, you\u2019re probably already familiar with this option. When used correctly, it can save you a lot of time in your workflow.<\/p>\n

Simply save your images in a web-optimized format as you work on your web design.<\/p>\n

Here\u2019s a comparison: from right to left, you\u2019ll see images saved for web at 100%, 70%, 50%, and 20% quality. Depending on the original size, the differences will be noticeable.<\/p>\n

There are plenty of theories about the ideal quality percentage, but the best approach is to trust your instincts\u2014experiment, save, zoom in, compare\u2026 whatever it takes. It\u2019s a great way to train your eye and achieve the perfect result.<\/p>\n

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

4. Do I really need these images in my web design?<\/h2>\n

This is an important question, and one of several that should be part of your web project<\/strong> analysis. Good web design<\/strong> starts with a needs assessment\u2014it\u2019s not about adding as many images as possible, but about understanding which ones are truly necessary.<\/p>\n

5. Use the right format<\/h2>\n

There are several image formats, each with its own strengths and weaknesses.<\/p>\n

It\u2019s important to understand them so you can use each one appropriately.<\/p>\n

If you have any questions, feel free to call our studio in Barcelona<\/strong>\u2014we\u2019re happy to help with anything you need.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

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

Today we want to talk about the importance of using optimized images in your web design. This is a crucial aspect when defining the design of a website, as it directly impacts key factors such as loading speed and the potential penalties you might face from clients, users, and even Google itself. So, if you\u2019re […]<\/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-22699","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\/en\/blog\/image-optimization-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\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\/en\/blog\/image-optimization-web-design\/\" \/>\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-20T23:00:00+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\/en\/blog\/image-optimization-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Size Matters in Web Design\",\"datePublished\":\"2016-09-14T14:34:54+00:00\",\"dateModified\":\"2026-04-20T23:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/\"},\"wordCount\":468,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/#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\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/\",\"name\":\"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/#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-20T23:00:00+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/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\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/#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\/en\/#website\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\/en\/blog\/image-optimization-web-design\/","og_locale":"en_US","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\/en\/blog\/image-optimization-web-design\/","og_site_name":"Code Barcelona","article_published_time":"2016-09-14T14:34:54+00:00","article_modified_time":"2026-04-20T23:00:00+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\/en\/blog\/image-optimization-web-design\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Size Matters in Web Design","datePublished":"2016-09-14T14:34:54+00:00","dateModified":"2026-04-20T23:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/"},"wordCount":468,"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/#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":"en-US"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/","url":"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/","name":"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/#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-20T23:00:00+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/en\/#\/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":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/image-optimization-web-design\/#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\/en\/#website","url":"https:\/\/codewebbarcelona.com\/en\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/wp-json\/wp\/v2\/posts\/22699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/comments?post=22699"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/22699\/revisions"}],"predecessor-version":[{"id":22705,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/22699\/revisions\/22705"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media\/4461"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=22699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=22699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}