How to make displayed image smaller in php

Question

I want to display images in my search page as a part of echoed content as a result of search query. These images have different resolutions and what's also very important for the next part they are not squarish. For displaying these photos I've initially used something like this:

 if ($queryResult > 0){
         while ($row = mysqli_fetch_assoc($result)){

             echo '<img src="data:image/jpeg;base64,'.base64_encode($row['photo']).'" ">';
              echo "<a href='account.php?username=".$row['username']."&id=".$row['id']."' style='text-decoration:none; color:rgb(0,0,0)'>
              <div class='article-box'>
             <h3>".$row['username']."</h3>
                </div>
                </a>";

         }
      }

But sadly the photos displayed were very big so the result wasn't satisfying me. That's why later I set image displaying part like this:

 echo '<img src="data:image/jpeg;base64,'.base64_encode($row['photo']).'" width="150" height="150">';

Again it didn't give me good results. Although the images were then finally small, the non-squarish images were turned into squares what caused them to be deformed. How to display images nicely, I mean to keep them small or of exact size but not to deform them.

Note that this is normally done by using stored thumbnails, because creating thumbnails on-the-fly is often less than satisfactory. — Strawberry, Aug 21 '19 at 09:10

score 1 · Answer 1 · answered Aug 21 '19 at 09:13

1

Just remove one of the arguments and the browser will scale the image and keep aspect ratio.

echo '<img src="data:image/jpeg;base64,'.base64_encode($row['photo']).'" width="150"';

Or set the height. But not both.

answered Aug 21 '19 at 09:13

Andreas

23,610
6
30
62

score 0 · Answer 2 · answered Aug 21 '19 at 09:11

You need to make image thumbs when they are uploaded, not when they are displayed, it ll load faster.

Take a look at this script : https://pqina.nl/blog/creating-thumbnails-with-php/

Using this script you can now for example generate square 160 by 160 pixel thumbnails with the following command :

createThumbnail('profile.jpg', 'profile_thumb.jpg', 160);

then call profile_thumb.jpg instead of original image

How to make displayed image smaller in php

2 Answers2