Search code examples
htmlimageblurry

Why does this image get sharper after you click the zoom in button but blurrier on the default zoom.

http://www.loftuspeak.com.au/wp-content/uploads/2017/07/Loftus-Peak-Logo-Sharp-Ribbon.png

Can someone explain to me why on the default zoom it looks blurry then after clicking the + zoom it gets sharper. It displays with the blurry default zoom on my website, is there any way to get it to the sharper zoom by default?

Solution

  • The image gets sharper when you zoom in because the image takes up more pixels. The image gets more blurry when you zoom out because it takes up less pixels.

    You can make the image sharper by:

    1. Make the image file bigger. Open the image up in Photoshop or Paint.net and extend the image.

    2. In HTML, make the image smaller then the actual dimensions. For example, if you saved the image as 1000px by 1000px, make the html like this:

      <img src="image.png" width="500" height="500" />

      As you can see, in the HTML I embeded the image with only half of its actual size. This means that the image will be forced to compress and maintain the high quality.