Recently, I discovered several images that aren't displaying correctly on my website.
Take this simple example for instance:
<body>
<img src="http://vignette2.wikia.nocookie.net/runescape2/images/4/47/Santa_hat.png/revision/latest?cb=20111128052051" />
</body>
The image in question should ideally be 28x23 pixels, but it appears resized when viewed in a browser.
I suspect that these images may have some formatting issues causing them to not display at their true dimensions.
Currently, the only way I have been able to get them to display correctly is by defining custom properties width and height. However, since I am loading these images dynamically using JavaScript, I do not have access to their actual dimensions. I tried retrieving the dimensions by referring to answers on sites like Stack Overflow, such as this one:
Get width height of remote image from url
Unfortunately, the dimensions returned were the scaled ones displayed on the webpage after it loads (200x164?).
I'm puzzled as to why this issue is occurring and how I can load these images with their correct dimensions intact.
On a side note, when I tested this on JS Fiddle (link), it actually did display the images in the correct dimensions.
*edit: (updating this for more visibility)