-
Posts
-
Hi guys,
When you set a ALB color section background image, no scaling is applied on mobiles. This is because it uses CSS background-image. Srcset is a HTML command and not CSS so cannot be used for background images. No scaled images are served for background-image CSS.
This means the ALB Full width slider is a much more efficient way of generating a background element and scores much higher in web vitals than a color section with background image set.
Are there any plans to add scaled background images to ALB Elements? This would solve a common optimization problem above the fold content and LCP.
This can be done with
image-setand ‘webkit-image-set’ or by using media queries to manually specify the other auto generated image sizes.Media query method
Original image – img-1.jpg native – 1920x600px@media only screen and (max-width: 767px) { #alb-colorbackgroundmod { background-image: url(https://www.yourwebsite.co.uk/wp-content/uploads/img-1-767x240.jpg); } }As many rules as are needed for screen sizes.
OR
image-set CSS method
#alb-colorbackgroundmod .img { background-image: url(examples/images/img-1.jpg); background-image: -webkit-image-set( url(examples/images/img-1-767x240.jpg) 1x, url(examples/images/img-1-1920x600.jpg) 2x, ); background-image: image-set( url(examples/images/img-1-767x240.jpg) 1x, url(examples/images/img-1-1920x600.jpg) 2x, ); }Options 3 – The radical redesign
Stop using background-image in CSS entirely and use standard Img in ALB color sections (layered on top of each other) with Srcset to achieve the same effect.Let me know your thoughts. Using image-set and webkit would be more robust as an update to Enfold core if you are interested in perusing it. As media queries work better on a case by case basis.
I am planning on doing media queries as a fix for my customers but it would be nice to have a global system so the average user doesn’t see lower scores when using color elements as hero images.
When updating my own company website I couldn’t score over 90/100 in web vitals without replacing the main hero image (an ALB Color Section with background image) with a Full width Slider. I am going to swap it back to an ALB color section with background image once I have tested the media query method or the image-set method.
Hey Thomas,
Thank you for the inquiry.
The image-set property would be a nice solution to this, but it is not yet fully supported by major browsers.
// https://developer.mozilla.org/en-US/docs/Web/CSS/image-set()
Using the Fullwidth Slider can be a solution if you are not planning to insert additional content inside the section, or if the intention is to just display a hero image.
So it looks like the better solution is to actually insert an image inside the section, adjust its position relative to the section container and stack order to make sure that it is behind the content. You might be able to test it using the avf_section_container_add filter, which can be used to insert additional content or element inside the section.
Best regards,
IsmaelIts a CSS 4 standard so not commonly used yet. You are right.
Do you have an example of the avf_section_container_add filter in use?
I’ll create a workaround and see how well it functions. I have several sites that use this feature. It might be better to just use an image and remove the padding/margins so it becomes full width, then alter the z-index. This will enable Srcset but will still require additional image sizes for mobiles.
If not I think Media queries for the background image class will be easy enough to implement. I’ll need to introduce some new image sizes to fully optimise. Essentially a mobile width cropped image so it matches the current design. This will mean every background image requires a bespoke rule.
Once I have a working solution I’ll share it here. Its on my to do list!
Hi,
The filter can be used like this..
add_filter("avf_section_container_add", function($content) { $content .= "<img src='https://site.com/sample.jpg' width='100' height='100' srcset='' />"; return $content; }, 10, 1);This will render the image right after the opening container and by default, $content is an empty string. Of course, you can use WordPress default functions to get the image URL, or the actual image markup with the srcset attribute instead of creating it manually.
Best regards,
IsmaelThat makes sense. Thanks @Ismael
I’ll Post again once I have a working example. See notes below
I Imagine that the code will include some cropped versions of the hero image. I.e. 1920×600 Then for mobiles it will be hard cropped to 350px high so it fills the above the fold area on most small devices. Reducing the physical size and file size to suit the device.I imaging I will also need to adjust the positioning, without checking I think it applies a pixel offset from the left hand side.
Some of the sites on my system have a ALB Colour Section Background image above the fold on every page. So each will need a unique ID and a media query once I have the right formula.
Assuming I will need the following image widths auto-generated and media queries for each screen size:
450px (Mobiles portrait)
768px (Most Mobiles landscape, Tablets portrait)
1024px (Tablet landscape)
1440px (720p laptops and Macbooks)
1920px – Native – Standard 1080p HD monitors
Potentially 2560px Native for retina but to be confirmed I never normally bother with this due to big increase in file size.
In windows 4K always recommends a 150% to 300% zoom so you actually see things at 1080p in most situations.Hi,
I Imagine that the code will include some cropped versions of the hero image
Yes, that is correct. But you have the option not to do it manually by adding the wp-attachment-postid class name to the image markup, where postid is the actual id of the featured image. WordPress will automatically apply the srcset attribute to any images with this class name. You can also use the av_responsive_images class > make_image_responsive function to make the image markup responsive.
Example:
$img = wp_get_attachment_image( $image_id, $thumbnail_size ); $img = Av_Responsive_Images()->make_image_responsive( $img, $image_id, true );The class can be found in the themes/enfold/framework/php/class-responsive-images.php file.
Best regards,
IsmaelI have a solution but here is the problem.
In order to meet design intent I have set a minimum height of 350px for the image. This means it fills the screen on mobiles.It also means the background image does not scale uniformly so you have to upload a separate image for each screen size
I have some labour intensive code sent privately below which serves a different background image in the correct size for a range of devices – Including the Moto G4 used in Lighthouse. There are 9 pages on the site all of which have their own version of the code in the private section.I’m just feeding this back in case there is anything you can add into core to achieve a similar function. As it stands without this level of optimisation background images knock about 15 points off lighthouse performance and lowers FCP.
These images are specific to the situation. Which makes it hard to have a one size fits all approach.
Hi,
Thank you for the info.
Yes, this solution will work well in this case, but if we ever implement this in the core, we will probably not use the same technique because using srcset attribute will be a much more simple approach.
Best regards,
IsmaelThanks Ismael,
You cant use Src Set with background image CSS though?Using Srcset:
If srcset is used and background image is set to center or any of the other settings – The banner image will zoom in on the wrong spot in a majority of cases.Srcset with cropped thumbnails may solve the performance problem but it doesn’t meet the design intent or prevent CLS shift caused by content in the colour element being taller than the min-height. Sorry to add another issue I had not previously mentioned!
If you set a minimum height for the ALB colour section OR the ALB color section becomes taller because the content doesnt fit on mobiles. You also get a CLS shift if you set a min-height and the content increases the size of the box beyond it. I have another set of rules I apply so that the height displayed matches the actual height of the image for typical screen sizes. So it is possible to solve the problem but requires bespoke optimisation depending on design intent.
Within enfold this could be solved by adding the option to upload different background images for different screen sizes rather than just one image. A real nightmare for novice users who probably dont have photoshop experience. You also have to set a min-height that matches the actual height of the element otherwise you get a BIG CLS shift.
If srcset is implemented I wont complain but the min-height CLS issue will still exist.
I have a lot of new rules to put in place for this approach to work which I will implement anyway – a bit time consuming but it works extremely well.
I am extremely confident that my modifications and setup will make any Enfold site pass web vitals. Before May1st I am making all of the Enfold sites on my servers pass web vitals.
I am really impressed with how easily I have been able to get Enfold to pass (with some advanced technical knowledge). I am in the process of working on a similar solution for DIVI but this seems to be much harder.
I am now one of the only developers in the UK who is offering sites that pass web vitals thanks to the quality of Enfold!
Hi,
You cant use Src Set with background image CSS though?
Not unless we implemented adding an actual image element as background as we discussed above.
Best regards,
Ismael@Ismael,
I’ve got it thanks.
It would still require some fiddling to display the right images in the right way so I’ll stick with the current method for now.
They are both just as labor intensive.
- You must be logged in to reply to this topic.