What They Are, How to Use Them

Considering using adaptive images for WordPress? šŸ¤“

Using plenty of high-quality visuals is essential if you want to keep online users engaged with your websiteā€™s content. However, if youā€™re not careful, heavy and fixed image files can hinder your siteā€™s performance and create a poor user experience (UX) on certain devices. In turn, this can discourage visitors from spending time on your pages.

The good news is you can use adaptive images for WordPress to prevent this from happening. When you use adaptive photos, your static visuals are getting dynamically sized and potentially cropped based on each visitorā€™s device. Plus, youā€™ll always get optimal file sizes to help your site perform flawlessly at all times.

An overview of adaptive images for WordPress

Before we show you how to create adaptive images for WordPress, itā€™s important to understand what they are. In a nutshell, ā€œadaptiveā€ refers to an imageā€™s ability to adjust and accommodate to any device.

šŸ‘‰ A WordPress adaptive images plugin can help you automatically do a few things:

  1. Resize each image based on a visitorā€™s device. For example, someone browsing on a 4K desktop screen will see an image with larger dimensions than someone browsing on their smartphone.
  2. Optimally compress the imageā€™s file size based on the userā€™s device to ensure your website stays speedy.
  3. Crop an image to optimize its focal point based on the visitorā€™s screen size (this is optional and you donā€™t need to enable this adaptive feature if you donā€™t want it).

Depending on how you configure your WordPress adaptive images plugin, you can just serve the same image in different sizes based on a visitorā€™s device. Or, you can also set up some type of ā€œsmart croppingā€ functionality from above to automatically crop the image based on a visitorā€™s screen size.

So ā€“ what is adaptive smart cropping? šŸ¤”

Well, with ā€œregularā€ or ā€œnon-adaptiveā€ cropping, the image will typically just be cropped to focus on the center, which can lead to awkward situations.

With smart cropping, though, you can automatically crop the image to focus on the most important part.

Hereā€™s an example of what adaptive smart cropping might look like, if you enable it:

Use smart cropping to create Adaptive images for WordPress.

Itā€™s also important to note that adaptive images are a core element of responsive design. However, that doesnā€™t mean that ā€œadaptiveā€ and ā€œresponsiveā€ are the same.

Responsive images will simply scale on different screen sizes. By contrast, adaptive pictures will automatically change their file sizes and cropping to deliver a better visual experience.

Why adaptive images for WordPress are important

As we mentioned before, using adaptive images for WordPress is crucial. Thatā€™s because more than half of online users in the United States browse the internet with mobile devices [1]. Whatā€™s more, this number seems to be growing by the year.

With that in mind, every website owner would be wise to prioritize mobile design. If over-sized or slow-loading images are damaging the mobile experience, it could be disastrous for your site (and your business).

A poor mobile experience could damage your reputation and credibility. Or worse, it may cause users to abandon your site, leading to a loss of sales and conversions.

Still, even if you decide on a ā€œmobile firstā€ design approach, leaving your desktop and laptop users behind could be equally disastrous. Thatā€™s why adapting is your best bet. This way, you donā€™t have to sacrifice either demographic, and you can reach as many people as possible.

Many WordPress themes are ā€œresponsiveā€ by default. That means elements such as menus and images will be adjusted to fit certain screens. However, these themes typically canā€™t crop or optimize images to make them truly adaptive.

How to create adaptive images for WordPress

For the easiest way to set up adaptive images for WordPress, you can use the freemium Optimole plugin:

āš™ļø Here are some of Optimoleā€™s key features:

  • Complete automation for adaptive images
  • Automatic image compression
  • Optimization based on a userā€™s device
  • Built-in content delivery network (CDN) powered by Amazon CloudFront
  • Support for all image types
  • Optimization of image file sizes
  • Smart cropping
  • Lazy loading

These are just the highlights, but youā€™ll get access to even more features if you upgrade to a premium Optimole plan. Now letā€™s see how you can create adaptive images for WordPress using this plugin:

Step 1: Connect to Optimole

After youā€™ve installed and activated Optimole in the WordPress dashboard, you should see the following screen:

Optimole sign up page in WordPress dashboard

Click on Create & connect your account or go directly to the Optimole registration page via the here link above the button:

Register for Optimole to create Adaptive images for WordPress.

Once youā€™ve signed up for an Optimole account, youā€™ll receive a confirmation email. Go to your inbox to locate the message and verify your account. Then youā€™ll be able to access the Optimole dashboard:

The Optimole user dashboard

Next, copy your new API key and return to your WordPress dashboard. Paste the key and click on Connect to Optimole:

Enter Optimole API key

When thatā€™s done, Optimole will automatically start optimizing your images.

Step 2: Configure Optimoleā€™s settings

Optimole will get to work straight away. However, we recommend configuring the plugin to your specifications. To do that, head to the Optimole Settings tab:

Optimole settings

Under General, explore your options and toggle any additional settings youā€™d like to enable. Click on Save changes.

Then, go to the Advanced menu:

Advanced Optimole settings

Here, at a minimum, we recommend going to the Resize tab to turn on smart cropping. This feature ensures that an imageā€™s ā€œmost interesting sectionā€ is used when cropping, making it adaptive on different devices.

Once youā€™ve finalized all your settings, save them and try previewing your site on different devices. Thatā€™s it! šŸ¤©

Get started with adaptive images for WordPress šŸš€

Online visitors can access your site using various devices, including laptops, smartphones, and even traditional desktop computers.

However, if your web pages feature static images that donā€™t adjust to these different screen sizes, you could be creating a terrible user experience.

Luckily, you can use adaptive images for WordPress to avoid this. This setting will re-size and potentially crop photos so that they look stunning on every device. Plus, youā€™re able to optimize file sizes to ensure your site performs at its best. Even better, you can automate this entire process using a plugin šŸ”Œ like Optimole.

Do you have any questions about adaptive images for WordPress? Let us know in the comments section below!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Leave a Reply