{"id":6400,"date":"2022-04-10T13:14:02","date_gmt":"2022-04-10T10:14:02","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=6400"},"modified":"2022-08-29T14:04:58","modified_gmt":"2022-08-29T11:04:58","slug":"properly-size-images-on-wordpress","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/properly-size-images-on-wordpress\/","title":{"rendered":"How To Easily Properly Size Images On WordPress To Improve Performance"},"content":{"rendered":"\n<p>Serving properly sized images on WordPress for each visitor&#8217;s device has a huge impact on page load speed. A slow website can drive users away, and we don&#8217;t want that. In fact, <a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-strategies\/app-and-mobile\/page-load-time-statistics\/\" target=\"_blank\" rel=\"noreferrer noopener\">according to Google<\/a>, the probability of bounce increases by 32%&nbsp;as page load time goes<strong> <\/strong>from 1 second to 3 seconds. <\/p>\n\n\n\n<p>In this article, we will explain exactly how to easily properly size images to boost the performance of your website.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Delivering appropriately sized images seamlessly for various kinds of devices with different screen sizes is no easy business. We identified some common issues and concerns based on feedback we received from our customers and readers:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u274c <strong>\u2013 Uploading high-resolution pictures and stock images \u2013 <\/strong>using large image files affect the performance because the browser has to spend more time downloading, resizing, and displaying the images.<\/li><li>\u274c <strong>\u2013 Bad performance report regarding <a href=\"https:\/\/shortpixel.com\/blog\/how-shortpixel-can-improve-the-core-web-vitals-lcp-fid-cls\/\" data-type=\"URL\" data-id=\"https:\/\/shortpixel.com\/blog\/how-shortpixel-can-improve-the-core-web-vitals-lcp-fid-cls\/\" target=\"_blank\" rel=\"noreferrer noopener\">Core Web Vitals<\/a> \u2013 <\/strong>receiving a bad score for quality signals essential to delivering a great user experience.<\/li><li>\u274c <strong>\u2013 Manually creating different image sizes<\/strong> \u2013 wasting a lot of time on a tedious and time-consuming demeanor, especially when you want to fit a plethora of devices with different screen sizes.<\/li><\/ul>\n\n\n\n<p>Luckily, there is an easy way to address all these problems.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why to properly size images on WordPress?<\/h2>\n\n\n\n<p>Your website should never display images that are larger than the dimensions rendered on the screen. Large images affect the performance of your website because the browser has to spend more time downloading, resizing, and rendering the file, which increases bandwidth consumption.<\/p>\n\n\n\n<p>A common problem on our clients&#8217; websites is images uploaded to the WordPress media library at full resolution. Other typical examples include uploading high-resolution images from the phone or photo camera, using high-resolution stock images, or large graphics saved specifically for printing and not for use on the web.<\/p>\n\n\n\n<p>Here are the top benefits to properly size images on your site:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Improve bandwidth efficiency<\/strong> &#8211; delivering images at the right size for the device you are using ensures that you do not waste bandwidth. Providing the right image size contributes to the usability of your website<\/li><li><strong>Increase page speed<\/strong> &#8211; the less data used, the faster your content will load when someone visits your website. To reduce bounce rate, fast and seamless page loading is essential. <\/li><li><strong>Improve your SEO ranking<\/strong> &#8211; abiding to quality guidelines by serving properly sized images improves your Google ranking.<\/li><li><strong>Consistent user experience<\/strong> &#8211; users access websites from a variety of different devices. Providing the right image size ensures a pleasant and consistent user experience.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Can I properly size images on WordPress without a plugin?<\/h2>\n\n\n\n<p>You can <a href=\"http:\/\/shortpixel.com\/blog\/complete-guide-to-wordpress-image-sizes\/\" data-type=\"URL\" data-id=\"shortpixel.com\/blog\/complete-guide-to-wordpress-image-sizes\/\">create custom image sizes<\/a> that are generated when you upload an image to your Media Library. However, creating various different sizes and formats requires a lot more time and effort to handle, especially when you want to suit multiple screen sizes.<\/p>\n\n\n\n<p>Moreover, your images may not be displayed in the exact correct size on all devices, as it is practically impossible to manually adjust the image sizes for hundreds of monitors, tablets, and mobile phones. <\/p>\n\n\n\n<p>Another downside is that if you ever decide to change your theme, you\u2019ll surely encounter problems with the images you resized and you\u2019ll have to redo the initial work.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Properly Size Images Warning <\/h2>\n\n\n\n<p>Did you receive a <a href=\"https:\/\/shortpixel.com\/blog\/fix-the-properly-size-images-warning\/\" data-type=\"URL\" data-id=\"https:\/\/shortpixel.com\/blog\/fix-the-properly-size-images-warning\/\">warning to <strong>properly size<\/strong> <strong>images<\/strong><\/a><strong> <\/strong>after running performance tests using tools like <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a> or <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noopener\">GTmetrix<\/a>?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2022\/04\/gtmetrix-properly-size-images.jpg\"><img decoding=\"async\" width=\"870\" height=\"346\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2022\/04\/gtmetrix-properly-size-images.jpg\" alt=\"GTMetrix audit recommending to serve images that are properly sized.\" class=\"wp-image-6499\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/04\/gtmetrix-properly-size-images.jpg 870w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/04\/gtmetrix-properly-size-images-300x119.jpg 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/04\/gtmetrix-properly-size-images-768x305.jpg 768w\" sizes=\"(max-width: 870px) 100vw, 870px\" \/><\/a><figcaption>GTMetrix audit recommending to serve images that are properly sized.<\/figcaption><\/figure>\n\n\n\n<p>One of the most <a href=\"https:\/\/gtmetrix.com\/properly-size-images.html\" data-type=\"URL\" data-id=\"https:\/\/gtmetrix.com\/properly-size-images.html\" target=\"_blank\" rel=\"noreferrer noopener\">common complaints<\/a> from Google is about images that are too large for their placeholder. This means that the browsing experience is slowed down by unnecessary data the user has to download. <\/p>\n\n\n\n<p>Well, you can not fix all the problems in a jiffy, especially if you are not well-versed in WordPress. Besides, installing multiple plugins for different optimization aspects means more conflicts and headaches, that&#8217;s why we recommend an all-in-one image optimization tool.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Easiest Method To Properly Size Images on WordPress<\/h2>\n\n\n\n<p>Here comes the part where we deliver good news. We consider using a plugin the easiest method to properly size images on WordPress. <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" target=\"_blank\" rel=\"noopener\">ShortPixel Adaptive Images<\/a> (SPAI) is an all-in-one image optimization plugin for WordPress that will help you with all your image problems. <\/p>\n\n\n\n<p>Once installed, your WordPress website will display properly sized, smartly cropped, and optimized images. The images are processed on the fly and served from a content delivery network (CDN) to speed up the delivery. Besides that, the images are served in the next-gen <a href=\"https:\/\/shortpixel.com\/blog\/how-webp-images-can-speed-up-your-site\/\" data-type=\"URL\" data-id=\"https:\/\/shortpixel.com\/blog\/how-webp-images-can-speed-up-your-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebP<\/a> and <a href=\"https:\/\/shortpixel.com\/blog\/what-is-avif-and-why-is-it-good\/\" data-type=\"URL\" data-id=\"https:\/\/shortpixel.com\/blog\/what-is-avif-and-why-is-it-good\/\" target=\"_blank\" rel=\"noreferrer noopener\">AVIF<\/a> formats, providing superior compression without losing quality. <\/p>\n\n\n\n<p>Performance report conducted via <a rel=\"noreferrer noopener\" href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\">GTMetrix<\/a> before and after serving images using <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" target=\"_blank\">ShortPixel Adaptive Images<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-before.jpg\"><img decoding=\"async\" width=\"1024\" height=\"104\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-before-1024x104.jpg\" alt=\"Before Properly Sized Images GTMetrix Performance Score\" class=\"wp-image-6411\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-before-1024x104.jpg 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-before-300x31.jpg 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-before-768x78.jpg 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-before.jpg 1306w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-after.jpg\"><img decoding=\"async\" width=\"1024\" height=\"104\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-after-1024x104.jpg\" alt=\"After Properly Sized Images GTMetrix Performance Score\" class=\"wp-image-6412\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-after-1024x104.jpg 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-after-300x31.jpg 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-after-768x78.jpg 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/03\/shortpixel-adaptive-images-gtmetrix-performance-report-after.jpg 1306w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Read our <a href=\"\/how-we-achieved-perfect-gtmetrix-scores-and-99-100-google-pagespeed-with-shortpixel-ai\/\" data-type=\"URL\" data-id=\"\/how-we-achieved-perfect-gtmetrix-scores-and-99-100-google-pagespeed-with-shortpixel-ai\/\">blog post here<\/a> to learn more about how one of our users achieved a perfect GTMetrix score and 99\/100 on PageSpeed Insights with the help of ShortPixel Adaptive Images.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Serving properly sized images with ShortPixel Adaptive Images help with SEO<\/h2>\n\n\n\n<p>Google included Core Web Vitals under their <a href=\"https:\/\/developers.google.com\/search\/docs\/advanced\/experience\/page-experience#signals\" data-type=\"URL\" data-id=\"https:\/\/developers.google.com\/search\/docs\/advanced\/experience\/page-experience#signals\" target=\"_blank\" rel=\"noreferrer noopener\">page experience signals<\/a>, based on an <a href=\"https:\/\/developers.google.com\/search\/blog\/2021\/04\/more-details-page-experience\" data-type=\"URL\" data-id=\"https:\/\/developers.google.com\/search\/blog\/2021\/04\/more-details-page-experience\" target=\"_blank\" rel=\"noreferrer noopener\">update from mid-June 2021<\/a>. If you hope your website will rank well in Google searches, it is crucial to focus on improving the loading performance. <\/p>\n\n\n\n<p>Typically, images account for about 90% of your website&#8217;s size. Therefore, it makes a lot of sense to serve them in the right size and optimize them to reduce the page size and improve the loading speed to avoid the penalties of having a slow website. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2022\/04\/90-percent-images.jpg\"><img decoding=\"async\" width=\"706\" height=\"456\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2022\/04\/90-percent-images.jpg\" alt=\"\" class=\"wp-image-6481\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/04\/90-percent-images.jpg 706w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2022\/04\/90-percent-images-300x194.jpg 300w\" sizes=\"(max-width: 706px) 100vw, 706px\" \/><\/a><\/figure>\n\n\n\n<p>Looking at all the features the plugin comes with, it is clear that <strong>ShortPixel Adaptive Images helps with SEO<\/strong> by reducing the page size and improving the loading speed. Google and the other search engines will notice this and rank you higher in the search results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>Now that you know that serving properly sized images is one of the most effective optimizations you can make to reduce page size and improve the load speed of your website, and how exactly <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" target=\"_blank\" rel=\"noreferrer noopener\">ShortPixel Adaptive Images<\/a> can help you do that, you should <strong>give it a try for free<\/strong> up to 500MB of CDN traffic, or roughly 500 visits per month.<\/p>\n\n\n\n<p>Try ShortPixel AI for free &#8211; <a href=\"https:\/\/shortpixel.com\/pricing-adaptive-cdn\">click here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Serving properly sized images on WordPress for each visitor&#8217;s device has a huge impact on page load speed. A slow website can drive users away, and we don&#8217;t want that. In fact, according to Google, the probability of bounce increases by 32%&nbsp;as page load time goes from 1 second to 3 seconds. In this article, [&hellip;]<\/p>\n","protected":false},"author":22,"featured_media":6607,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[1596,1598,1597],"class_list":["post-6400","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-updates-and-news","tag-properly-sized-images","tag-shortpixel-adaptive-images","tag-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/6400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=6400"}],"version-history":[{"count":85,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/6400\/revisions"}],"predecessor-version":[{"id":6754,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/6400\/revisions\/6754"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media\/6607"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=6400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=6400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=6400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}