Adaptive image resolution

[fredericalpers]

Initiative

Improve the accessibility and performance of the onOffice for WP-Websites Plugin for a better user experience.

Epic

Implement adaptive image resolution.

User story

As a real estate agent utilizing the onOffice for WP-Websites Plugin, Iam concerned about the impact of image presentation on my website's SEO and pagespeed. Currently, the plugin loads images uniformly in one size as background images, which may hinder performance and SEO rankings. To address this, I require the implementation of a feature that utilizes the HTML picture-tag and srcset attribute for images, allowing for responsive image handling. This enhancement aims to improve pagespeed and SEO, providing a faster and more optimized website for a better user experience and search enging ranking.

The current method of loading images as background images in a uniform size may contribute to slower page loading times and suboptimal SEO performance. To address these concerns, I propose the following enhancements:

• Responsive image implementation: Integrate the HTML picture-tag and srcset attribute to enable the plugin to load images responsively based on device characteristics, such as screen size and resolution.
• Multiple image size: Dynamically load the most appropiate size based on the users device, enhancing both pagespeed and the user experience.
• SEO friendly Alt text: Ensure that each image withing the picture-tag is accompanied by SEO-friendly alt text, improving the website's accessibility and search enginge visibility.
• Lazy loading support: Integrate lazy loading functionality for images to defer the loading of off-screen images, further optimiing pagespeed.

By implementing these enhancements, the onOffice for WP-Websites plugin can significantly improve the websites pagespeed and SEO performance, offering real estate agents a competitive advantage in providing a fast, responsive and search enginge-friendly online presence.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Tasks

• [x] Modify the image handling code to incorporate the HTML tag and srcset attribute
• [x] Implement the following width values min-w 1600, min-w 1400, min-w 1200, min-w 992, min-w 768, min-w 576, max-w 575
• [x] Ensure that each image within the picture-tag is accompanied by an alt-tag. Populate the alt text with the property title within onOffice enterprise. Make sure its possible to overwrite those with SEO plugins such as Yoast etc.
• [x] Integrate lazy loading for images

[yeneastgate]

@fredericalpers I need time to check it and will let you know soon.

[dai-eastgate]

@fredericalpers

1. Do you want to implement "a picture tag" html as below?

2. Currently, I check and see that on the plugin "method of loading images as background images" is used in the following 3 screens:

   • Estate list: Currently, I see you are fixing the CSS for the default height equal to 250px => Please confirm for me that the "uniform size" displayed for the image here has a height equal to 250px, right?

• Estate detail Currently, I see you are fixing the CSS for the default height equal to 400px => Please confirm for me that the "uniform size" displayed for the image here has a height equal to 400px, right?

• Similar estate Currently, I see you are fixing the CSS for the default height equal to 250px => Please confirm for me that the "uniform size" displayed for the image here has a height equal to 250px, right?

[dai-eastgate]

• => Please confirm for me that the "uniform size" displayed for the image here has a height equal to 250px, right?

@fredericalpers Please reply so I can estimate the time for this issue. Thanks!

[fredericalpers]

@dai-eastgate

Do you want to implement "a picture tag" html as below?

yes, but please also implement the different image sizes in the srcset aswell, i.e. for 1x, 1.5x, 2x and 3x. As an example: <source media="(min-width: 1400px)" srcset="http://bild.jpg 1x, http://bild.jpg 1.5x, http://bild.jpg 2x, http://bild.jpg 3x">

Please confirm for me that the "uniform size" displayed for the image here has a height equal to 250px, right?

The image height 250px for property lists is correct.

Please confirm for me that the "uniform size" displayed for the image here has a height equal to 400px, right?

The image height 400px for the property detail page is correct.

[yeneastgate]

@fredericalpers

1. I have implemented "Integrate the HTML picture-tag" for these screens: Estate List: https://files.fm/u/punfusqdu9#/view/dmnjd8ec69 Detail View: https://files.fm/u/punfusqdu9#/view/tm4n55ttm5 Similar Estate: https://files.fm/u/punfusqdu9#/view/sa8adhs9zr

2. I have implemented the following width values min-w 1600, min-w 1400, min-w 1200, min-w 992, min-w 768, min-w 576, max-w 575

• Ensure that each image within the picture-tag is accompanied by an alt-tag. Populate the alt text with the property title within onOffice enterprise

=> I have displayed the "alt-tag" of "" HTML with the property title within onOffice enterprise"

• Make sure its possible to overwrite those with SEO plugins such as Yoast etc.

=> Can you tell me how to overwrite the "alt-tag" of "" HTML using "Yoast SEO"?

I have read Yoast SEO's documentation. And I only found how to overwrite the "alt-tag" of "" HTML for images Which were uploaded on the "Media" menu dashboard of the admin backend. For "our images" Which are returned by the API onOffice, these images will not be supported.

I also tried another plugin that can overwrite the "alt-tag" of "" HTML. That plugin is named "BIALTY - Bulk Image Alt Text (Alt tag, Alt Attribute) with Yoast SEO + WooCommerce". You can see how I test overwrite "alt-tag" of "" html with this plugin. https://files.fm/u/punfusqdu9#/view/rph2fwbb3b Could you please confirm that my test is correct for the desire you mentioned?

4. I have implemented "Integrate lazy loading for images"

[fredericalpers]

@yeneastgate sorry for the confusion. Overwriting the alt-tags can be ignored, as you are right it only applies to pictures uploaded to "media".

Everything else seems to be working fine, thank you :)