Use Explicit Width And Height On Image Elements - Question | JoomShaper

Use Explicit Width And Height On Image Elements

SS

Saint Maur International School

SP Page Builder 1 week ago

I am trying to optimize my website and the thumbnail.jpg images generated by the template seem to lack width and height. Is there a way to fix this? Thanks

0
10 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 week ago #154810

Hi

Thanks for contacting us. Could you please give me a screenshot of your issue?

-Regards.

0
SS
Saint Maur International School
Accepted Answer
1 week ago #154846

Hello, here is a list of the elements that are flagged:

Guillaume Erard Contributes to Christian Tissier Shihan’s New Book <img class="sppb-img-responsive" src="/images/2024/03/06/christian-tissier-book-05_thumbnail.jpg" alt="Guillaume Erard Contributes to Christian Tissier Shihan’s New Book" itemprop="thumbnailUrl" loading="lazy">

11th Kanagawa Prefecture Aikido Federation Seminar <img class="sppb-img-responsive" src="/images/2024/03/11/irie-seminar-01_thumbnail.jpg" alt="11th Kanagawa Prefecture Aikido Federation Seminar" itemprop="thumbnailUrl" loading="lazy">

Guillaume Erard Sensei Promoted to 6th Dan During the Kagamibiraki 2024 <img class="sppb-img-responsive" src="/images/2024/01/26/erard-doshu-rokudan2_thumbnail.jpg" alt="Guillaume Erard Sensei Promoted to 6th Dan During the Kagamibiraki 2024" itemprop="thumbnailUrl" loading="lazy">

A Succesful Aikido Kanagawa Federation Joint Training Session <img class="sppb-img-responsive" src="/images/2023/12/31/aikido-kanagawa-federation-joint-training-session-05_th…" alt="A Succesful Aikido Kanagawa Federation Joint Training Session" itemprop="thumbnailUrl" loading="lazy">

Guillaume Erard Contributes to Christian Tissier Shihan’s New Book <img class="sppb-img-responsive" src="/images/2024/03/06/christian-tissier-book-05_thumbnail.jpg" alt="Guillaume Erard Contributes to Christian Tissier Shihan’s New Book" itemprop="thumbnailUrl" loading="lazy">

11th Kanagawa Prefecture Aikido Federation Seminar <img class="sppb-img-responsive" src="/images/2024/03/11/irie-seminar-01_thumbnail.jpg" alt="11th Kanagawa Prefecture Aikido Federation Seminar" itemprop="thumbnailUrl" loading="lazy">

Guillaume Erard Sensei Promoted to 6th Dan During the Kagamibiraki 2024 <img class="sppb-img-responsive" src="/images/2024/01/26/erard-doshu-rokudan2_thumbnail.jpg" alt="Guillaume Erard Sensei Promoted to 6th Dan During the Kagamibiraki 2024" itemprop="thumbnailUrl" loading="lazy">

aikikai-logo.png <img class="sppb-img-responsive" src="/images/2021/05/06/aikikai-logo.png" alt="aikikai-logo.png">

kanagawa-aikido-federation-logo.png <img class="sppb-img-responsive" src="/images/2021/12/20/kanagawa-aikido-federation-logo.png" alt="kanagawa-aikido-federation-logo.png">

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 week ago #154974

Please give me a screenshot from your website. You can use it for screenshots

https://imgur.com/upload

0
SS
Saint Maur International School
Accepted Answer
1 week ago #155128
0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 week ago #155133

You can change the width and height from here, use this custom CSS in your custom.css file

.sppb-carousel-inner>.sppb-item>a>img, .sppb-carousel-inner>.sppb-item>img, .sppb-img-responsive{
  width:450px !important;
  height:300px !important;
}
0
SS
Saint Maur International School
Accepted Answer
1 week ago #155138

Sorry but the fix does not work as it distorts the images on any other screen size https://imgur.com/a/oJNdkos

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 week ago #155146

You dont need to give that width and height, you can set the width and height from there and set whatever you want. I just give you the hint. You can set it by your preference.

0
Pavel
Pavel
Accepted Answer
1 week ago #155173

Hi Mehtaz - again harmful advice, breaking site :)

Hi "Saint Maur...".

If we are talking about attributes of width and height (Mehtaz, this is not CSS), SPPB does not have it on board. Use a third -party extension, for example JCH Optimize or write JS for this if you have skills

0
SS
Saint Maur International School
Accepted Answer
1 week ago #155200

Thanks a lot Pawel, your response makes a lot more sense. I don't have js skills and I'm torn about JCH Optimize because from past experience, it used up a lot of resource. Considering that I am just trying to optimize the page a bit better, whatever I get from declaring those attributes may not be worth the additional server load, I guess I'll have to test JCH and see what happens. Thanks again.

0
Pavel
Pavel
Accepted Answer
1 week ago #155208

The attributes of the width and height reserve the size of the images in the browser, leaving for them an empty place while the images are loaded. This prevents content jump on the user's side when loading the page. Based on this knowledge, make a decision whether you need it at all.

And I think you can find on JED simpler extensions than the JCH Optimizer that simply add these attributes to the images and do nothing more.

0