How to choose the optimal ratio or dimensions for images to use them on your page?

[HmmamBabiKhouja]

building a neat responsive webpage requires good resources, images are important since it grabs the user’s attention so presenting your images on the best way is a crucial task.
now, how do we come up with the best picture dimensions? I mean sometimes pictures with big dimensions on small blocks overflow and get presented out of context! here are some examples with the code below

  <section class="section-features">
      <ul class="showcase">
        <li class="showcase-li">
          <figure class="showcase-figure">
            <img class="showcase-img" src="resources/img/   (1).jpg" alt="">
          </figure>
        </li>
        <li class="showcase-li">
          <figure class="showcase-figure">
            <img class="showcase-img" src="resources/img/   (2).jpg" alt="">
          </figure>
        </li>
        <li class="showcase-li">
          <figure class="showcase-figure">
            <img class="showcase-img" src="resources/img/   (3).jpg" alt="">
          </figure>
        </li>
        <li class="showcase-li">
          <figure class="showcase-figure">
            <img class="showcase-img" src="resources/img/   (4).jpg" alt="">
          </figure>
        </li>
      </ul>
    </section>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.showcase{
   width: 100%;
   list-style: none;
}

.showcase-li{
    display: block;
    float: left;
    width: 25%;
}

.showcase-li:after{
    clear: both;
}

.showcase-figure{
    width:100%;
    overflow: hidden;
    background: #000;
    margin: 0;
}

.showcase-img{
    width: 100%;
    height: auto;    
    transform: scale(1.15);
    opacity: 0.7;
    transition: 0.5s;
}

.showcase-img:hover{
    transform: scale(1.03);
    opacity: 1;
}

using pictures with big deminsions like 4000*2700 would end up with pictures out of context blocks

using pictures with small dimensions 260*260 would end up with long pixly pictures

but when using pictres with 800*600 was perfect

now how to guess the best numbers for these dimensions?

note: I’ve never changed the HTML code nor CSS styles but only the pictures src links

[tlc35us]

In your first image why not set the height and let the width vary. Just allow room in the parent element for it.
One should always use images that are appropriately sized for the use case. That means editing them to different sizes instead of scaling inside the browser. Wordpress does this and creates three image sizes: small, medium, and large. Browser scaling should be used for small screen size differences between phones or tablets or desktops. Browser scaling uses more CPU power. Not a problem for a desktop, but for mobile where the CPU is slower and to use it more uses more battery. Not to mention the users data plan and slower connection speed and reliability.

[HmmamBabiKhouja]

thank you
but how much is the best dimensions for each size?
I mean when you set those pictures to be for example small, how much the dimensions should be?

[tlc35us]

This is a big discussion about “optimization” lots of opinions but ultimately it’s up to you. What kind of hosting resources do you have? Do you want to use lots of image galleries? Do you have the disk space for at least three sizes of images ( not including thumbnails ). Does your hosting provider give you enough bandwidth to serve all those images when your site is as popular as you think it will be. Who is your site visitor and what are their resources.
Google “website optimization” or “website image optimization” or “HTML image optimization” and join the discussion.

[KatarinaGrumy]

Hello!
I completely agree with you that images are really important for e-commerce websites and choosing the correct ratio is crucial. Plus, HTTP Archive claims that images make up around half of the overall worldwide website content.

• The first thing to do is to keep the aspect ratio of the original image, for example, 1:1, 3:4, etc.
• You were also right saying that you should not make images to large. Firstly, it affects website speed. Secondly, it takes place on your hosting.
• The second thing is to convert images to WebP – an image format which was rolled out in 2010 by Google. Designed specifically for the web, it provides superior lossless and lossy compression for images.

Here you may know more about the ways to optimize images making them perfectly fit for the website using Magento images example.