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

Open
#15,624 1 comment 3 reactions 0 assignees View on GitHub
mod/r* request/enhancement
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 :
`
06-1
`

## 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.