Image Enhancements – WP “srcset” in Avada

Image Enhancements – WP “srcset” in Avada

10/05/2018
IMPORTANT NOTE: To take advantage of this, you have to use the Regenerate Thumbnails plugin for images that are already in your media library. Any new images uploaded will be fine, but old images will need to be regenerated.

Responsive Images in WP 4.4+

WP 4.4 since introduced 'responsive images'. It was implemented by using srcset and sizes attributes inside img tags. Every image in WordPress that is displayed through the usage of the_post_thumbail() or get_the_post_thumbnail() will get these attributes added to them automatically. What happens internally is that WordPress checks for available versions of the image that have been added through add_image_size(). The sizes attribute was set in a way that by default you wouldn't recognize any changes on the front end. They did so as to not break any sites.

Avada 4.0 Adaptation

We improve that method a lot for any automatically added images that use full image sizes. So all parts that uses cropped images, like blog medium layouts or portfolio pages with fixed images are not affected as they are already performance optimized. We added 5 uncropped image sizes, with the widths of 200px, 400px, 600px, 800px and 1200px. (At the same time we removed 4 of our cropped sizes to make sure the theme does not create too many image sizes.) This way, we have images for almost all column amounts and also for retina needs. We remove all srcset images that WordPress automatically adds for full sizes images, and add these new image sizes instead. Also the sizes attribute is changed. Instead of the WordPress default values, we use the correct column break points as set by the user in Theme Options (and auto calculated downwards). This is to make sure that the browser has all the information needed to choose the correct image.

Areas Making Use Of Improvements So Far

Blog (main page and shortcode)

    • Grid Layout
    • Timeline Layout
    • Large Layouts without a sidebar

    Portfolio

      • All portfolio pages that use auto sized images
      • Portfolio Archives that use auto sized images
      • Recent works shortcode

      Additional Elements

        • Person Element
        • Woo Carousel
        • Woo Featured

        In addition to the above elements, other elements which use featured images that are added to the page inside a column element, will attempt to load a resized (non-cropped) version of the image for additional performance gains. The image size selected by the theme will not be smaller than the width of the column, so no image quality will be lost.

        Performance Enhancements

        We change the actual src attribute of the img tags. This means instead of the full resolution image, we check how much space the image will take on the desktop layout and use the best fitting image size then. This helps a lot in passing Google PageSpeeds. All in all, the new setup will reduce the downloaded image size tremendously for every full sized image that is loaded in the areas said above.

        Recent Posts

        Recent Tweets

        For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
        I Accept