Use explicit width and height on image elements

Mehtaz Afsana Borsha Staff

2 years ago

Hi

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

-Regards.

Saint Maur International School Asked this

2 years ago

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

Mehtaz Afsana Borsha Staff

2 years ago

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

https://imgur.com/upload

Saint Maur International School Asked this

2 years ago · edited

Here is the screen shot, thanks
https://imgur.com/a/F7eaouS
https://imgur.com/a/tjT10Hc

Mehtaz Afsana Borsha Staff

2 years ago

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;
}

Saint Maur International School Asked this

2 years ago

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

Mehtaz Afsana Borsha Staff

2 years ago

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.

Pavel

2 years ago · edited

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

Saint Maur International School Asked this

2 years ago

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.

Pavel

2 years ago · edited

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.

9 replies