0

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?

James Lin
  • 13
  • 1
  • 4
  • To be honest, I can't really notice the difference... Maybe you should try using percentage to define the width of your image rather than using pixels. – Rubenxfd Jul 13 '17 at 07:43
  • Unfortunately the theme I'm using only allows me to specify the width via px units and not by % of screen. I thought I had it set properly with the width being 2400px for both the image and the setting on my theme but I guess not. I'm just really curious why this happens because with other images I put on my wordpress site, it gets blurred down even if the original image was high res. – James Lin Jul 13 '17 at 07:46

2 Answers2

1

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.

Lars Peterson
  • 1,508
  • 1
  • 10
  • 27
  • I tested out the second option and it definitely worked. Unfortunately some of my theme's options are broken so I can't change the size of the header at the moment. At least I know how to fix it once my theme's fixed. Thanks man – James Lin Jul 13 '17 at 08:00
  • Please mark the question as answered. No problem. :) – Lars Peterson Jul 13 '17 at 08:05
0

Because it is not in its normal aspect ration when unzoomed.

If you want it to be shape every time. You have to put in in a div with max-width at 100% and height at auto.

m.nachury
  • 972
  • 8
  • 23
  • hmm I thought I had the same ratio, currently the image is 2400 x289 and it gets scaled down to 1200 x 144.5 (same ratio) – James Lin Jul 13 '17 at 07:48
  • Yeah, badly explain sorry. I meant that the browser as to do work to put it on a non natural resolution. It doesn't want to recalculate every pixel, so it just displayed a slightly approximate result. – m.nachury Jul 13 '17 at 07:53
  • 1
    Ah so the browser automatically resizes it approximately makes sense – James Lin Jul 13 '17 at 08:01