elementor / elementor/elementor
Image Widget - image size "Custom" - not producing HTML Width & Height Attributes - Lighthouse "Image elements do not have explicit width and height" Error
- Dominant language
- PHP
- Stars
- 7.1k
- Forks
- 1.6k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 193
Description
## 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
when adding an Image to the page with pre-defined sizes (e.g. Medium Large), it'll add the HTML width and height attributes automatically,
(website links are replaced With YYY)
it will be something like :
`
`
however when you select Custom size, and define your custom size (e.g. 150 x 200) , hit apply, it will not produce HTML width and height attributes, nor will it produce any other HTML attribute like pre-defined sizes such as "class" , loading="lazy" (**lazy loading is very important for custom sizes too, please implement it there**), srcset, sizes, style etc
(website links are replaced With YYY)
it will produce a bare HTML, something like :
`
`
## Steps to reproduce
1 - install Wordpress
2 - install Elementor
3 - create a new page/post
4 - add an Image with Thumbnail, Large or any Pre-defined Size (not custom size)
5 - add another image with Custom size (200 x 200) or (150 x 300) or any custom size you want
6 - hit apply to apply your custom size for the image
7 - publish the page/post
8 - check HTML for Custom Sized Image. no width and height attribute, no lazy loading, no srcset etc.
9 - with Chrome, hit F12 key on keyboard, go to Lighthouse, and click on "Generate Report" button to see "Image elements do not have explicit width and height" error for the Custom Sized Image.
## 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.
## Environment
System Info
```
== Server Environment ==
Operating System: Linux
Software: Apache
MySQL version: MariaDB Server v10.4.17
PHP Version: 7.2.34
PHP Max Input Vars: 1000
PHP Max Post Size: 256M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected
== WordPress Environment ==
Version: 5.7.2
Site URL: x
Home URL: x
WP Multisite: No
Max Upload Size: 256 MB
Memory limit: 1024M
Permalink Structure: /%year%/%monthnum%/%day%/%postname%/
Language: en-US
Timezone: 0
Debug Mode: Inactive
== Theme ==
Name: Twenty Twenty-One
Version: 1.3
Author: the WordPress team
Child Theme: No
== User ==
Role: administrator
WP Profile lang: en_US
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
== Active Plugins ==
Elementor
Version: 3.2.5
Author: Elementor.com
== Elementor - Compatibility Tag ==
== Elements Usage ==
wp-post : 0
image : 2
== Log ==
```
Contributor guide
Assessment
This issue has not been assessed yet.