Videos on homepage and poster image for mobile

[deranaloge]

hi there,

i added 4 videos as background on the homepage with poster imagesfor devices where the videos are disabled.

when i now analyze the site with gtmetrix it says:

Serve scaled images:
The following images are resized in HTML or CSS. Serving scaled images could save 685.1KiB (100% reduction).

https://xyz4.jpg is resized in HTML or CSS from 1280x720 to 0x0. Serving a scaled image could save 305.0KiB (100% reduction).
https://xyz0.jpg is resized in HTML or CSS from 1280x720 to 0x0. Serving a scaled image could save 120.0KiB (100% reduction).
https://xyz0.jpg is resized in HTML or CSS from 1280x720 to 0x0. Serving a scaled image could save 99.0KiB (100% reduction).
https://xyz1.jpg is resized in HTML or CSS from 1280x720 to 0x0. Serving a scaled image could save 80.8KiB (100% reduction).
 https://xyz2.jpg is resized in HTML or CSS from 1280x720 to 0x0. Serving a scaled image could save 80.3KiB (100% reduction).

that are the poster images. how can i fix this? because the score is really bad with that behaviour.

thanks in advance for your help.

Cheers

[rad]

Hi Harald,

Thanks for reaching out.

That is just recommendation that you may ignore, please note that the theme is responsive where the same layout changes per device’s viewport’s size, and that also applies to image. For example, a 1280x720px image is good for desktop and for retina iPad devices so when viewed, mobile, it will scale to 480px (same image displayed for different sizes).

If you’ll follow their recommendation to scale it down just because it’s viewed on 480px device, then you’re permanently changing your image size to 480px regardless of device. That recommendation only applies if you have different sites for reach device, example, facebook.com for desktop and m.facebook.com for mobile.

But, you may try this plugin https://wordpress.org/plugins/wp-smushit/ if your intention is just to optimize it but not completely resizing it.

Thanks!

[deranaloge]

hi rad,
thanks for you reply, i allready used shortpixel so the images are optmizied allready.
as i mentioned the images are the “poster images” for the video background. so if the device or browser does show the video, the image is scaled to 0x0 px via css.
if the device/browser disable the video the image is shown.

now the problem. gtmetrix does say the image is scaled to 0x0px on devices where the video background is enabled.
so my question is, is there a way (css rule or theme option) where this behaviour can be changed or overruled?

i cant ignore that, my client said we have a bad score…

thanks again
cheers

[ruenel]

Hello Harald,

Do you have any custom CSS codes? It might be that a certain CSS is making the size and width to 0. To better assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you in advance.

[deranaloge]

hello,
thanks for your answer.
credentials in secure note.

thanks for your help.

cheers

[christian]

Hey Harald,

GTMetrix reports incorrectly or inaccurately. No code in our HTML and CSS do we scale images to 0px. Please take a look at the screenshot below. The image is scaled just to cover the area. Maybe GTMetrix doesn’t have a way to read that. Please contact GTMetrix support and show them the following screenshot.

Please also make this clear to your client that this is not an issue with our theme but GTMetrix’s reading. If you’re also after GTMetrix’s reading, you will want to dynamically change the image size per screen size. That is not available in theme’s. That’s a feature of an image optimization service such as shown in this user video: https://youtu.be/M4GCDahSTnE. Please just note that any optimization is not covered by our theme support so if you encounter issues with website optimization, you need to consult with a third-party developer.

Thanks.

[deranaloge]

hi,
i talked to gtmetrix and this is what they say:

Blockquote
Hi Harald,
Digging into this further, it looks like the video player is generating an image tag for the thumbnails with width/height equaling 0:

This is what GTmetrix is picking up for the Serve scaled images recommendation.

so it seems it is an theme/wordpress issue?

thanks in advance for your help.
cheers

[rad]

Hi Harald,

Yes, it’s a Wordpress issue and it seems intentional. The MEJS is MediaElementJS Library built-in to Wordpress, our theme is only utilizing that player and styled to match the theme. To explain it further, there are two ways of viewing the source code, it’s by using inspector like on your screenshot, and the second is by right clicking the page and click View page source (in chrome browser).

The difference is, inspector is live, it shows the processed content, that includes the rendered video player and it’s rendered with the help of javascript (hence MEJS(Javascript)). But if you’re going to view the page source instead, it will display raw content, example

<div class="e1107-4 x-video x-video-player" data-x-element="x_mejs" data-x-params="{&quot;poster&quot;:&quot;http:\/\/localhost\/testbedmaster\/wp-content\/uploads\/2020\/02\/geometry-grid-bg.jpg&quot;}" >
  <video class="x-mejs" poster="http://localhost/testbedmaster/wp-content/uploads/2020/02/geometry-grid-bg.jpg" preload="metadata" ><source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_1920_18MG.mp4" type="video/mp4" ></video></div>

As you can see, there is no MEJS classes, there is not even <img>. The MediaElementJS renders it based on action, device, and loading process. There is no point displaying an image where the background image is already displayed, and where there is video playing. That <img width="0" height="0"> is a hidden fall back image, it’s hidden and what you’re seeing is just the background added through style created by MEJS which something we can’t control through the theme.

This approach is also used by other developer, example, the facebook pixel tracker. It place a hidden image (zero width and height) just for tracking. Hence, if that’s GTMETRIX requirement, that I doubt you can achieve that since this kind of implementation is present anywhere. https://en.ryte.com/wiki/Tracking_Pixel

Thanks!