Image elements do not have explicit width and height

Image elements do not have explicit width and height

PoojaHiwade
Excursionist
26 0 13

Hello

I have added the height and weight in the image. but it is not work. can anyone give suggestions on how to solve this? 

 

Capture - 428.PNG

Replies 5 (5)

oscprofessional
Shopify Partner
15982 2391 3099

@PoojaHiwade.,

Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

You may notice the width and height above do not include units. These "pixel" dimensions would ensure a 640x360 area would be reserved. The image would stretch to fit this space, regardless of whether the true dimensions matched or not.

 

When Responsive Web Design was introduced, developers began to omit width and height and started using CSS to resize images instead:

img {
 width: 100%; /* or max-width: 100%; */
 height: auto;
}
Shopify Image Element Explicit width and height: 

<img class="lazyload" 
src="data&colon;image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='{{ preview_image.width }}'%20height='{{ preview_image.height }}'></svg>" 
data-src="{{ image_100x  | img_url: '100x' }} 100w" 
data-srcset="{{ image_1200x }} 1200w,
             {{ image_980x }} 980w,
             {{ image_480x }} 480w”
width="{{preview_image.width}}"
height="{{preview_image.height}}" 
alt="{{ preview_image.alt }}">
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

GemPages
Shopify Partner
5625 1261 1231

Hello @PoojaHiwade 

 

You can use this Tinypng tool to reduce the file size of your images: https://tinypng.com/

 

I hope the above is useful to you.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

flareAI
Shopify Partner
2405 223 541

Hello @PoojaHiwade,


Greetings! I am Gina from the flareAI app helping Shopify merchants get $5Million+ in sales from Google Search, on autopilot.


The error message you are seeing typically means that the dimensions of the image are not explicitly set in the HTML code of your Shopify store. This can cause issues with the layout of your website and can make it harder for search engines to understand the content on your site.


To fix this error, you should make sure that the width and height attributes are set for all images on your site. Here's how you can do it in Shopify:


1. Go to your Shopify admin panel and click on "Online Store" in the left-hand menu.
2. Click on "Themes" and then click on "Actions" next to the theme you want to edit.
3. Click on "Edit code" from the dropdown.
4. Find the section of your code where your images are being displayed.
5. Look for any <img> tags in the code and add width and height attributes to the tag.


For example, if your image tag looks like this:

<img src="yourimage.jpg">


You can add width and height attributes like this:

<img src="yourimage.jpg" width="500" height="500">


Make sure to adjust the width and height values to match the actual dimensions of your image.


6. Save the changes to your code.
Once you've made these changes, the error message should go away. If you continue to have issues, you may want to reach out to Shopify support for additional assistance.


Gina

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing
Dorony
Visitor
3 0 0

How can I find in the code a specific image I'm looking for?
I received a similar error on several product images.
How do I know in the code which part is related to product images?

3DF - Personalised 3D printed gifts and more
https://3dfprinting.com/
Anne_de_For_Sis
Visitor
1 0 0

Hello,
I can't find the section of the code too.
Could you please tell us where it is ?

Thank you