elementor icon indicating copy to clipboard operation
elementor copied to clipboard

Published 20 hours ago • verified publisher icon elementor

🐞 Image dimensions are not specified in the Image Carousel

Open ramiy opened this issue 4 years ago • 21 comments

Prerequisites

  • [x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • [x] The issue still exists against the latest stable version of Elementor.

Description

Test with GTmetrix an Elementor site that uses the Image Carousel Widget.

One of the recommendations will be to Specify image dimensions.

Performance_Report_GTmetrix

The image carousel widget does not add width and height attributes to <img> tags. See source here: https://github.com/elementor/elementor/blob/master/includes/widgets/image-carousel.php#L692

Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

Source: https://gtmetrix.com/specify-image-dimensions.html

Steps to reproduce

  1. Create an Elementor page.
  2. Add the image carousel widget.
  3. Save the page.
  4. Test the page URL in https://gtmetrix.com/

Isolating the problem

  • [x] This bug happens with only Elementor plugin active (and Elementor Pro).
  • [x] This bug happens with a default WordPress theme active.
  • [x] I can reproduce this bug consistently using the steps above.

ramiy avatar May 12 '20 13:05 ramiy

I have this same issue. Trying to improve site speeds and the list under "Specify image dimensions" are all from the carousel widget.

catherinewiltshire avatar May 26 '20 16:05 catherinewiltshire

Yes, this has to be looked into. I also get the same for normal image widget as well.

iShubhamRaj avatar Jul 17 '20 08:07 iShubhamRaj

I'm experiencing this also with "Image" widget, "Site Logo" widget... when SVG image is used.

I think this bug is related to this issue #8528

shimsa avatar Jan 28 '21 22:01 shimsa

Even Google PSI is showing this "Image elements do not have explicit width and height" images in carousel widget. Do you found any fix for this?

viveknath322 avatar May 10 '21 08:05 viveknath322

This should be solved asap. Lighthouse and Page Speed Insights are quite nasty about images lacking explicit width and height

bluantinoo avatar Dec 14 '21 15:12 bluantinoo

Width and height attributes are missing on Image widget for me (not in carousel).

crstauf avatar Sep 13 '22 18:09 crstauf

So much time passed and still, the image widget doesn't add fixed width and height. Please consider adding an option for enabling fixed width & height.

GPSI is crying atm.

IonTulbure avatar Dec 22 '22 15:12 IonTulbure

I think page builder authors do not care about performance. The element count and page size has to be high for them anyway, so they probably don't even try.

Though missing explicit dimensions is a very easy solve.

crstauf avatar Dec 22 '22 15:12 crstauf

Hope Elementor's devs listen to us.

polset avatar May 10 '23 01:05 polset

Is there any workaround to fix this?

Lutacon avatar Jun 08 '23 07:06 Lutacon

Please fix this. It's been over 3 years since it was first reported. Surely it can't be that hard and can pull the dimensions from the settings?

Nutbot avatar Aug 07 '23 12:08 Nutbot

Please, this still needs to be fixed! Lighthouse still flags this as a serious issue.

NWTrailers avatar Aug 10 '23 18:08 NWTrailers

I can't believe this simple problem is not solved already! The devs are worried implementing features to call users attention instead of fixing things that actually care.

joaopedrofrech avatar Nov 19 '23 21:11 joaopedrofrech

Please, this still needs to be fixed! Lighthouse still flags this as a serious issue.

you can see the importancy of technical quality of the web definition directly from Google.

Ivo12s avatar Dec 04 '23 18:12 Ivo12s

Please, we're in 2024 and this isn't fixed yet! C'mon! 🎂🎂🎂🎂

wesleypimentel avatar Jan 29 '24 14:01 wesleypimentel

Any news on this? devs have done a lot of good work in terms of page speed, this one should really be fixed soon.

adraeger avatar Feb 03 '24 17:02 adraeger

@nicholaszein Any news on this? I'm having the same issue on all of our websites.

orofri avatar Apr 26 '24 20:04 orofri

Hey people,

I've created a javascript to fixed:

<script>// Input the width and height on img tag. window.addEventListener('load', function() { var images = document.querySelectorAll('.swiper-slide-image'); images.forEach(function(image) { image.width = image.offsetWidth; image.height = image.offsetHeight; }); }); // Linsten when resize window.addEventListener('resize', function() { var images = document.querySelectorAll('.swiper-slide-image'); images.forEach(function(image) { image.width = image.offsetWidth; image.height = image.offsetHeight; }); });</script>

Very simple solution that solves my problems with that issue. Regards!

erikconnect avatar May 17 '24 13:05 erikconnect

Hey people,

I've created a javascript to fixed:

<script>// Input the width and height on img tag. window.addEventListener('load', function() { var images = document.querySelectorAll('.swiper-slide-image'); images.forEach(function(image) { image.width = image.offsetWidth; image.height = image.offsetHeight; }); }); // Linsten when resize window.addEventListener('resize', function() { var images = document.querySelectorAll('.swiper-slide-image'); images.forEach(function(image) { image.width = image.offsetWidth; image.height = image.offsetHeight; }); });</script>

Very simple solution that solves my problems with that issue. Regards!

I am having the same issue. Can I ask where I should add this code please?

isifiso avatar Jun 15 '24 15:06 isifiso

Thanks @erikconnect but this doesn't appear to pass the GTMetrix speed test for explicit width & height dimensions. Elementor please fix.

contemplate avatar Jul 30 '24 15:07 contemplate