Properly Size Images on Wordpress

How To Easily Properly Size Images On WordPress To Improve Performance

Serving properly sized images on WordPress for each visitor’s device has a huge impact on page load speed. A slow website can drive users away, and we don’t want that. In fact, according to Google, the probability of bounce increases by 32% as page load time goes from 1 second to 3 seconds.

In this article, we will explain exactly how to easily properly size images to boost the performance of your website.

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:

  • – Uploading high-resolution pictures and stock images – using large image files affect the performance because the browser has to spend more time downloading, resizing, and displaying the images.
  • – Bad performance report regarding Core Web Vitalsreceiving a bad score for quality signals essential to delivering a great user experience.
  • – Manually creating different image sizes – 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.

Luckily, there is an easy way to address all these problems.

Why to properly size images on WordPress?

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.

A common problem on our clients’ 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.

Here are the top benefits to properly size images on your site:

  • Improve bandwidth efficiency – 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
  • Increase page speed – 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.
  • Improve your SEO ranking – abiding to quality guidelines by serving properly sized images improves your Google ranking.
  • Consistent user experience – users access websites from a variety of different devices. Providing the right image size ensures a pleasant and consistent user experience.

Can I properly size images on WordPress without a plugin?

You can create custom image sizes 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.

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.

Another downside is that if you ever decide to change your theme, you’ll surely encounter problems with the images you resized and you’ll have to redo the initial work.

Properly Size Images GTmetrix Warning

Did you receive reports about images not being properly sized after running performance tests using tools like PageSpeed Insights or GTmetrix?

GTMetrix audit recommending to serve images that are properly sized.
GTMetrix audit recommending to serve images that are properly sized.

One of the most common complaints 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.

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’s why we recommend an all-in-one image optimization tool.

Easiest Method To Properly Size Images on WordPress

Here comes the part where we deliver good news. We consider using a plugin the easiest method to properly size images on WordPress. ShortPixel Adaptive Images (SPAI) is an all-in-one image optimization plugin for WordPress that will help you with all your image problems.

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 WebP and AVIF formats, providing superior compression without losing quality.

Performance report conducted via GTMetrix before and after serving images using ShortPixel Adaptive Images:

Before Properly Sized Images GTMetrix Performance Score
After Properly Sized Images GTMetrix Performance Score

Read our blog post here 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.

Serving properly sized images with ShortPixel Adaptive Images help with SEO

Google included Core Web Vitals under their page experience signals, based on an update from mid-June 2021. If you hope your website will rank well in Google searches, it is crucial to focus on improving the loading performance.

Typically, images account for about 90% of your website’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.

90 percent images

Looking at all the features the plugin comes with, it is clear that ShortPixel Adaptive Images helps with SEO 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.

Summary

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 ShortPixel Adaptive Images can help you do that, you should give it a try for free up to 500MB of CDN traffic, or roughly 500 visits per month.

Try ShortPixel AI for free – click here.