Fluid Images

Published: March 28, 2016By Sebastian

Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.

exception-img-spills

Twenty Ten is looking increasingly better on smaller screens. But images can still break the layout, as in the image above. The problem here is that the image is bigger than its parent #content element. The solution is either simple or complex depending on how well you want to solve the issue.

Ideally, you should deliver smaller images on smaller devices. Delivering unnecessarily large images slows page speed and consumes extra bandwidth. I will address this challenge in the educational note on adaptive images below. But first, here’s a quick tip for solving the aesthetic issue.

GUI Method

fluid-images

  1. Double-click the image. If you are using our free online testing site, you will also have an image of a bird on the home page. Otherwise you will need to insert an image into the post/page you are working on.
  2. Go to the Targeting tab if you are not on it already.
  3. Click the last CSS selector suggestion in the list: img. This targets all image elements across your entire website.
  4. In the Name field, enter All Images.
  5. In the Folder field, select Body.
  6. Click the CREATE SELECTOR button.
  7. Go to the  Dimensions tab.
  8. Set the  max-width property to 100% to prevent images or videos from breaking out of their container element..
  9. Set the  height property to auto to ensure that images or videos scale down proportionally.

fluid-img-styles

Code Method

code-img-selector

Start a new line in the code area after the box-sizing selector (*) and type the following code:

img {
	max-width: 100%;
	height: auto;
}

Some points to note:

  • Embed and iframe elements are used for embedding videos.
  • Setting max-width to 100% prevents media from ever being bigger than it’s container element.
  • Setting height to auto ensures the images or videos scale down proportionally.

Adaptive images

adaptive-images

A new HTML element (picture) and image attribute (srcset) have been proposed by the powers that be as a way of loading screen-specific images. Unfortunately neither picture nor srcset are fully supported by modern browsers in 2016. But thankfully, there is an alternative method that’s also rather convenient: Adaptive Images (AI).

Rather than requiring developers to write extra HTML markup, AI works in a more automated way. When a page loads on mobile, AI downsizes any large images on the fly using PHP. The smaller images load faster and consume less bandwidth. Downsized images are cached on the server, so the resize only happens once. AI is also smart enough to automatically refresh cached images when the original image is modified.

AI is a great solution. You can implement it yourself in no time with this Adaptive Images for WordPress plugin.

Close