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
- All portfolio pages that use auto sized images
- Portfolio Archives that use auto sized images
- Recent works shortcode
- 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.
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.