{"id":10391,"date":"2026-09-14T13:30:36","date_gmt":"2026-09-14T12:30:36","guid":{"rendered":"https:\/\/josepgonzalez.com\/optimizar-imagenes-wordpress\/"},"modified":"2026-10-31T16:39:41","modified_gmt":"2026-10-31T15:39:41","slug":"optimize-images-wordpress","status":"publish","type":"post","link":"https:\/\/josepgonzalez.com\/en\/optimize-images-wordpress\/","title":{"rendered":"Image Optimization for WordPress"},"content":{"rendered":"<p>One of the keys of modern <a href=\"https:\/\/josepgonzalez.com\/en\/wordpress-web-designer\/\"><strong>WordPress web design<\/strong><\/a>, and more specifically of our site\u2019s <strong>SEO optimization<\/strong> and WPO, is <strong>optimizing images for WordPress<\/strong>. In this updated guide I show you how to do it, with today\u2019s formats and tools.<\/p>\n<h2>Why optimize images?<\/h2>\n<p>Images are one of the essential elements of website design. They grab visitors\u2019 attention and let you present an idea and influence a point of view without writing a single line of text.<\/p>\n<p>However, using high-quality, high-resolution images means very heavy files. That weight slows your website down, worsens the user experience and hurts metrics such as <strong>LCP<\/strong> (Google <em>Core Web Vitals<\/em>), because the main image is often the slowest thing to load. To show large images without penalizing speed, we need to <strong>compress and adapt them<\/strong>.<\/p>\n<p>In this article I show you the methods you can use on <a href=\"https:\/\/josepgonzalez.com\/en\/wordpress-web-designer\/\"><strong>your WordPress website<\/strong><\/a>.<\/p>\n<h2>Know the weight, size and format of your images<\/h2>\n<h3>Weight and resolution<\/h3>\n<p>To start, you need to know how much an image weighs and what resolution it has. You can see it in the WordPress media library or on your computer. There is no perfect size: the ideal is a balance between quality and weight. As a guideline, a content image is usually well under 200-300 KB, and large header images somewhat above that but not by much.<\/p>\n<h3>Image formats<\/h3>\n<ul>\n<li><strong>JPG:<\/strong> ideal for photographs, with many colors and gradients. It allows heavy compression.<\/li>\n<li><strong>PNG:<\/strong> ideal for logos, icons and graphics, and when you need transparency. It usually weighs more than a JPG for photographs.<\/li>\n<li><strong>WebP:<\/strong> a modern format with better compression than JPG and PNG, supported by all current browsers. WordPress has supported it for some time and today it is my recommended choice.<\/li>\n<li><strong>AVIF:<\/strong> even more efficient than WebP. WordPress supports it in recent versions and its use is growing, although you should check compatibility with your plugin and hosting.<\/li>\n<li><strong>SVG:<\/strong> for vector logos and icons, which look sharp at any size and weigh very little.<\/li>\n<\/ul>\n<h3>Size in pixels<\/h3>\n<p>Do not upload a 4000 x 3000 pixel photo if it will be displayed at 1200 pixels wide on your website. As a reference, a maximum width of about <strong>1920 pixels<\/strong> is enough for the vast majority of websites. WordPress also automatically scales down huge images and generates several sizes of each one to fit every device.<\/p>\n<p>There are two moments to optimize images: <strong>before uploading them<\/strong> and <strong>once they are published<\/strong>.<\/p>\n<h2>Compress images before uploading them<\/h2>\n<h3>Photo editor<\/h3>\n<p>The first option is to compress them with an editor like Photoshop, GIMP or Affinity Photo. They usually have a &#8220;Save for web&#8221; or &#8220;Export as&#8221; option, where you can adjust size, quality and format.<\/p>\n<h3>Online compression tools<\/h3>\n<p>One of the most used, and the one I use in many of my projects, is <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><strong>TinyPNG<\/strong><\/a> (which also compresses JPG and WebP). No sign-up needed: you drag and drop your images, one or several at once, and download the optimized ones. It can cut a very significant part of the weight and keeps transparency in PNGs. Another excellent free option is Google <strong>Squoosh<\/strong>, which lets you compare quality before and after and convert to WebP or AVIF.<\/p>\n<figure id=\"attachment_6232\" aria-describedby=\"caption-attachment-6232\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-6232 size-large\" src=\"https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.11.47-1024x596.png\" alt=\"WordPress image optimization with TinyPNG\" width=\"1024\" height=\"596\" \/><figcaption id=\"caption-attachment-6232\" class=\"wp-caption-text\">Compression done, with the option to download the images<\/figcaption><\/figure>\n<h2>Optimize images already published on WordPress<\/h2>\n<p>Once the images are in your library, you can compress them automatically with a plugin. Some of the most used are <a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><strong>Smush<\/strong><\/a>, <strong>ShortPixel<\/strong>, <strong>Imagify<\/strong> and <strong>EWWW Image Optimizer<\/strong>. All have a free version with limits and paid plans, and almost all can <strong>convert your images to WebP<\/strong> and optimize new ones every time you upload them.<\/p>\n<p><img decoding=\"async\" class=\"size-large wp-image-6236 aligncenter\" src=\"https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.11.21-1024x489.png\" alt=\"Image optimization plugin for WordPress\" width=\"1024\" height=\"489\" srcset=\"https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.11.21-1024x489.png 1024w, https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.11.21-150x72.png 150w, https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.11.21-300x143.png 300w, https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.11.21-768x367.png 768w, https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.11.21-1536x733.png 1536w, https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.11.21.png 1978w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>With Smush, once activated, you just need to click the <strong>bulk optimization<\/strong> button for it to do the work. The free version limits how many images it processes each time, so if you have many, you will need to repeat the process.<\/p>\n<p><img decoding=\"async\" class=\"size-large wp-image-6230 aligncenter\" src=\"https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.13.55-1024x578.png\" alt=\"Bulk image optimization in WordPress\" width=\"1024\" height=\"578\" srcset=\"https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.13.55-1024x578.png 1024w, https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.13.55-150x85.png 150w, https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.13.55-300x169.png 300w, https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.13.55-768x433.png 768w, https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.13.55-1536x866.png 1536w, https:\/\/josepgonzalez.com\/wp-content\/uploads\/2018\/09\/Captura-de-pantalla-2018-09-14-a-les-14.13.55-2048x1155.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>In addition, when configuring the plugin you can limit the maximum size of images. If you upload 4000 x 4000 pixel photos, it is not necessary: set a reasonable width as the limit (for example, 1920 px) and you will lower the weight even more.<\/p>\n<p><strong>Tip:<\/strong> if you upload few photos, you can leave the plugin inactive once compression is finished, so your website does not have to load it on every visit (although automatic optimization of new images is very convenient). You can also rely on a caching and optimization plugin such as WP Rocket.<\/p>\n<h2>Other good practices with images<\/h2>\n<ul>\n<li><strong>Lazy loading:<\/strong> WordPress applies it to images by default. Make sure you do not apply it to the main image at the top of the page (the one visible as soon as you land), because it would slow down LCP.<\/li>\n<li><strong>Always set the width and height<\/strong> of images to avoid layout shifts while the page loads.<\/li>\n<li><strong>Use a CDN<\/strong> if your website receives visits from different countries.<\/li>\n<li><strong>Check your page builder:<\/strong> if you use Elementor, avoid giant background images and make use of the responsive image options.<\/li>\n<\/ul>\n<h2>Extra: describe your images well to improve SEO<\/h2>\n<p>It is essential to give information about each image to improve its ranking and accessibility. In the WordPress media library fill in the <strong>alternative text (alt)<\/strong>, which describes what the image shows, the title and, if relevant, the description. And give it a <strong>descriptive file name<\/strong> before uploading it (for example, &#8220;optimize-images-wordpress.webp&#8221; instead of &#8220;IMG_4521.jpg&#8221;).<\/p>\n<h2>Frequently asked questions<\/h2>\n<h3>Which image format is best for WordPress?<\/h3>\n<p>WebP is today the best general option. Use JPG for photographs if you need maximum compatibility, PNG only when you need transparency, and SVG for logos and icons.<\/p>\n<h3>How much should an image weigh on the web?<\/h3>\n<p>There is no magic number, but as a general rule, the less the better: content images under about 200-300 KB.<\/p>\n<h3>Does optimizing images improve SEO?<\/h3>\n<p>Yes: it improves loading speed, user experience and presence in Google Images.<\/p>\n<p>Finally, after doing this optimization you can check whether your page has improved in loading speed. If you do not know how, read the article <a href=\"https:\/\/josepgonzalez.com\/en\/website-loading-speed\/\">How to measure your website\u2019s loading speed<\/a><\/p>\n<p>If you liked it, leave me a comment or share this article on social media. It will make me very happy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the keys of modern WordPress web design, and more specifically of our site\u2019s SEO optimization and WPO, is optimizing images for WordPress. In this updated guide I show you how to do it, with today\u2019s formats and tools.<\/p>\n","protected":false},"author":1,"featured_media":10576,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[91,92],"tags":[],"class_list":["post-10391","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo-en","category-wordpress-en"],"_links":{"self":[{"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/posts\/10391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/comments?post=10391"}],"version-history":[{"count":2,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/posts\/10391\/revisions"}],"predecessor-version":[{"id":10734,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/posts\/10391\/revisions\/10734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/media\/10576"}],"wp:attachment":[{"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/media?parent=10391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/categories?post=10391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/tags?post=10391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}