Municipio 4.5.0

Municipio 4.5.0 continues to optimize page size, with this release focusing on supporting source set like functionality. We’re starting with a minimal implementation, gradually adding more modules over time. This incremental approach ensures minimal impact on website backend performance with each update.

If you choose to implement the image component in the future, there’s no need to compromise between optimization and selecting the correct image size. Simply request the largest size the image component will display, and Municipio will handle the optimization automatically for you!

Styleguide (0.11.1118): 

• Adjustments to ensure that the image component can behave like background images, with support for cover and object-fit properties.

Municipio (5.25.4): 

• Minor modifications to the image conversion process, allowing compatibility with conversions and resizing from other add-ons.
• Patches on external content features regarding handling of terms and diff checking with checksums locally.

Modularity (6.28.1):

• Implementation of image resolution functions required by the component library to handle source set requests effectively.

Component library (4.21.2):

• Introduction of an image contract object, automatically detected and processed by the image component.

Container Querys instead of Source Set

We chose container queries over the traditional srcset approach for image optimization because container queries allow us to tailor the image based on the actual dimensions of the container, rather than the viewport size. This provides several advantages:

1. Content-Based Adaptation: Unlike srcset, which selects images based on viewport width, container queries allow us to load images that best fit the size of the container element itself. This is especially useful in responsive designs where the container’s size can vary independently of the viewport (e.g., within grids or sidebars).
2. Better Granularity: With srcset, images are selected based on fixed breakpoints defined by screen sizes. However, the actual image displayed might not always be the optimal size for the container. Container queries give us finer control by adjusting image loading based on real-time container measurements, preventing over-fetching or under-fetching of image assets.
3. Flexible Layouts: As web layouts become more complex with nested grids, flexboxes, and responsive elements, container-based image selection ensures that images adapt to the changing structure of the page. This means the right image size is chosen even if a container’s width changes due to CSS layout shifts.
4. Performance Efficiency: Since container queries only load the appropriate image based on the container’s size, there’s less chance of unnecessarily loading larger images for smaller containers, optimizing bandwidth usage, especially on mobile devices.

Drawbacks with container querys

Despite the advantages of using container queries, there are some drawbacks to consider. After analyzing the approach, we identified the following:

1. Request Termination on Resize: Currently, when the viewport is resized rapidly, browsers do not terminate image requests efficiently. As a result, larger images may still be fetched even when a smaller version becomes more appropriate. We anticipate that future browser updates will address this issue, improving the handling of rapid resizes.
2. Backward Compatibility: The container query approach is less backward-compatible compared to srcset, especially in older browsers that lack support for loading=”lazy”. Our tests indicate that a small percentage of users, primarily in outdated browsers, may end up downloading the entire image set. However, this issue only affects users on browsers that are unsupported by Municipio (current release -2).
3. Flash of Images During Resizing: When resizing the viewport, there may be a brief flash where the low-quality image placeholder (LQIP) is shown before the appropriate image loads. This results in a delay before the correct image displays, which can affect the visual experience, especially on slower networks or devices.

These are limitations inherent to current browser capabilities and image-loading technologies, but they are primarily edge cases that should improve with ongoing browser advancements.