How to resize image so that it is not blurred or pixelatted-CodePudding

So I just created a blog on Blogspot. And I'm currently using a simple free blog template from the internet.

You can refer my blog here - https://hariinisayarasa.blogspot.com

Im using the free template from here - https://www.way2themes.com/2020/08/sylva-blogger-template.html

As you can see, you can compare the slider image on my blog is blurry and pixelated compared to the one on the Demo Page here - https://sylva-way2themes.blogspot.com/

Is there any way I can resize my image or any setting that can be done in my template coding so that the slider images are not blurry anymore?

Please let me know if I can provide any code for you so that you can help me solve this problem. Or you can download the code here - https://www.way2themes.com/2020/08/sylva-blogger-template.html

CodePudding user response：

One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element.

Resizing img with HTML

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
 width="400" 
 height="500" />

Resizing img with CSS

img { width: 400px, height: 300px}

CodePudding user response：

From what I've seen, you're using very small raster images.

notice the 'intrinsic size' property

same goes here

Photographs are always saved as raster images. It means that the data of an image is stored in the form of a pixel map - a matrix of squares. If you try to scale the image up, every pixel is also scaled up. Therefore, you lose quality, and the pictures seem pixelated/blurry.

There's no way to keep both the size and detail. Alternatively, you could try to keep the initial size of an image (or at least scale down) - this would, on the other hand, not fill the entire container space.

now check the intrinsic size of one of the images on the demo page

The more scaled image is, the more blurry it gets. The pictures on the demo page have the scale aspect of 2. However, your photo that is 72 x 72px has been scaled up a lot more.

If those photos have been taken by you in higher quality, you might want to use the raw version.