Using responsive image ads in WordPress
Since WordPress 4.4 and Advanced Ads 1.6.13, Ad Images, and images used in the Rich Content ad type can be responsive. This means that they don’t just get scaled-down. But the browser, in fact, loads a smaller file size, if it is available. This makes your ad load faster on devices with a smaller screen or a slower internet connection.
The feature of responsive images comes with WordPress. Advanced Ads supports that out of the box for ads within the main content. However, to get the most out of this, you need to know a few things.
Why responsive images?
Contents
For many websites, traffic from mobile devices is already bigger than from desktop devices. Responsive layouts have made it possible to deliver the same content to mobile and desktop visitors without publishers’ extra effort. However, bandwidth is still a problem, since mobile connections aren’t as fast and reliable as standard connections.
The problem is especially significant if you deliver many high-resolution images.
There are and have been different solutions to this problem. In most cases, this took the extra effort to implement too. With WordPress 4.4, this problem was addressed. Publishers now might rely on it – if theme developers start to support it.
How does WordPress generate responsive images?
Without going too deep into the code, let’s say that WordPress adds extra attributes to the source code that displays the images (for coders: adding srcset and sizes to img tags). These attributes contain links to images in different sizes so that browsers, who understand these attributes, can choose the smallest file size that is large enough to fit.
When are these images generated?
WordPress creates multiple sizes of images when you upload them. This, by itself, is not a new feature. You can go to Dashboard > Settings > Media to see which image sizes are created by default.
Keep in mind that with WordPress 4.4, there is also another, not visible, image size with 768px in width and without height restriction added.
WordPress creates the tags for responsive attributes only for images in the content. I have applied the same feature now to all ads with the Image Ad type and images in the Rich Media ad type that get displayed within the content.
Issues with responsive image ads
If you are a developer, you should read the announcement post for responsive images to learn more about the possibilities and issues.
Adding image sizes
WordPress creates only the image sizes set up either in Dashboard > Settings > Media, by a plugin or your theme or uses the new default size with 768px width. If you think that another size would be better in your case, you should either add a new one or change the existing settings.
However, WordPress does only create added or changed sizes for new images. To regenerate previous images, you need to use a plugin like Regenerate Thumbnails.
Themes not making use of this
Using one of the new attributes (srcset), browsers now know the available image sizes. However, they don’t know yet which images fit. Imagine that a theme is 500px wide, but has a margin of 25px left and right. So the available space in the content is only 450px. Browsers might not know this when the image is requested. So there is another attribute (sizes) that can be influenced by themes.
The new default theme twentysixteen already makes use of it. But if you are using another or a custom developed theme, you need to ask the developer if he could implement support for responsive images. Without that, neither WordPress nor Advanced Ads can help to optimize images for specific sizes.
Responsive image ads in Advanced Ads
Advanced Ads is one of the first plugins supporting responsive image ads. However, it mostly depends on your settings and theme, if this is used with most benefits. I expect a lot to happen in this field and will wait for your feedback and how theme developers implement support for responsive images, before extending this feature with more options.
In case you have issues with responsive image ads, you can disable them by defining the ADVADS_DISABLE_RESPONSIVE_IMAGES constant in your wp-config.php.
Responsive images with CSS
In case you have trouble implementing responsive images programmatically like described above, you can make use of a simple CSS trick. The line below will adapt images optically to the available width if the screen becomes narrower than the image itself.
This is just an example of images within the content area in standard themes. If your theme has other containers (e.g., #main), then adapt it. The developer of the theme can help you with it.
article img { max-width: 100%; height: auto; } Read this article to learn more about adding custom CSS.
