Is the a way that I can reduce the size of my image?

Is the a way that I can reduce the size of my image?

you could shrink the actual image with tools like photoshop or use css to manipulate width/height of image on a webpage

1 Like

Hmm.
This is a difficult concept.
If you want to shrink it in HTML, you simply use the width and height elements used in a video.

  <img width="320" height="240" src="https://www.wikihow.com/images/6/6a/Draw-a-Brain-Step-14-Version-3.jpg"/>

Setting both the width and height is not preferable, this might destroy the ratio of the image.

Yes stetim94 is correct. But in case we don’t have the tools to properly resize an image, giving width and height might be the only option but we need to keep the aspect ratio. What I personally do to get the correct aspect ratio is to paste the image into Paint, go to resize and shrink it to whatever size i want with Keep aspect ratio clicked. I do this only to see the new sizes with a good aspect ratio. Maybe there are more efficient ways to do this - someone can share ( i feel like my method is quite rookie).

In the old days, when the internet was much, much slower than it is today, download times were a critical concern. More than a few seconds and the visitor was likely to bounce. That meant using only web optimized images that could be downloaded quickly, and it meant having fewer images in the page.

Today it does not seem to be a concern if some sites are any indication. They have one huge image file on the server, then fashion it to fit whatever viewport it is meant to fit, depending upon the device. In this case, the width attribute is the one to set and leave the height attribute out.

Ideally, we should constrain our images to within a ballpark of their potential viewports. If there are three different media queries, then produce three images, one for each, optimized for the best image quality at high compression.

image_wide.png
image_normal.png
image_narrow.png

Bottom line, it is not a good idea to have one huge image for every purpose.

2 Likes

Aside

For anybody who has some PHP wherewithal, it is possible to extract a thumbnail from the EXIF object in the image header.

Totally another topic, and one that very few will ever investigate.