Help me make the images smaller[answered]

Question

Hello sololearners,
How can I make the images smaller?
As you can see,it's too big,for example the img of Ronaldo's signature.
https://code.sololearn.com/WqQ3CfBP7270/?ref=app

Answer 1

Faraz Haghbayan
probably beyond your original question on making images smaller, but you can provide various img sources for a responsive image design.

https://web.dev/learn/design/responsive-images/

Answer 2

Yes, an image editor like Photoshop, Gimp or whatever. You can also choose a suitable image format for optimal display and file size.

Imagine if you're only going to display a small image. You can force a big image file to be resized in the browser by setting the width and height, but you still have a big image to download, and it would not be good for people with slow internet connection.

Answer 3

Faraz Haghbayan

To make the image smaller, you can use the 'height' and 'width' attributes in the `img` tag.

Like this....
method 1 without CSS :-
Example...
<img src = "https://api2.sololearn.com/v2/certificates/CC-UKIVWCDS/image/png"width="50%" height="50%">

method 2 with CSS:-
add this in css section..
img{
display:flex;
height:100%;
width:100%;
}

Answer 4

using an image editor to resize your image to the actual size you are using in your page is also a good idea if you are hosting the image.
It would improve the load time for people with slower internet connection.

Answer 5

Thank you !

Answer 6

Sir,that's a great Idea💡 but how can I use image editor?
Do you mean width and height?

Answer 7

You are absolutely right ✅️
I will do it when I arrive home🙌
Thanks for your tip!

Answer 8

That's the PERFECT tip!😬
I really didn't thought about also giving sources 🙌Thanks sir!