3

For some reason I've been experiencing a weird problem with my website for a long time now, and I still haven't figured out what is causing the problem.

This is what my webpage looks like in Chrome: (and this is what it should look like in any browser):

This is how it looks in IE11: Image 2

As you can see the third image from the left isn't showing up, yet on Chrome it does show up. This has happened on multiple occasions. I've already checked the width and height parameters and all of those are correct: yet IE says that the dimensions of my image are 283x16px instead of 349x240px (rightclick > properties).

<img width="349" height="240" src="http://exofeed.nl/wp-content/uploads/2015/01/Belgian-film-student-travels-more-than-5000-miles-to-be-friends-with-a-complete-stranger__880-1-349x240.jpg" class="attachment-grid-post wp-post-image" alt="Belgian-film-student-travels-more-than-5000-miles-to-be-friends-with-a-complete-stranger__880 (1)" title="Man reist 8000 kilometer af om een compleet vreemde te ontmoeten van Facebook"/>

The page on which the problem occurs: http://exofeed.nl/ - I'm using wordpress by the way.

Has anyone else ever encountered this problem before? Or does anybody know what could be causing this?

UPDATE: Looks like it doesn't work either on Firefox...

I'd be gratefull for any kind of help!

Sampson
  • 265,109
  • 74
  • 539
  • 565
Yannick
  • 235
  • 3
  • 12

1 Answers1

5

It's because the image in question is not a JPEG (or GIF or PNG) but rather Google WebP, and Internet Explorer does not natively support such images (and neither do Firefox or Safari for that matter).

enter image description here

The easiest solution is to just convert it to JPG.

Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
  • @JonathanSampson It sounds like you're either looking at the wrong image, or you have an add-on that adds support for WebP in IE11. The image most definitely does not load in IE. Here's the direct link to it: http://exofeed.nl/wp-content/uploads/2015/01/Belgian-film-student-travels-more-than-5000-miles-to-be-friends-with-a-complete-stranger__880-1-349x240.jpg – Chuck Le Butt Jan 07 '15 at 18:23
  • (If you're still sceptical, download the image and open it up in a HEX editor. You'll see `WEBPVP8` at the beginning of the file.) – Chuck Le Butt Jan 07 '15 at 18:25
  • No add-ons, I'm on IE 11, and [that image works](http://i.imgur.com/HARkgNP.png). The server may be returning WebP in some instances, and JPEG in others. You appear to be checking in Chrome though, which is not the browser in question :) – Sampson Jan 07 '15 at 18:28
  • There's definitely some voodoo at play here - but if the server is *ever* responding with WebP, that is very likely the issue here. I'm still getting JPEG when I request the file, and I have no addons installed. Curious, what is your ua-string? – Sampson Jan 07 '15 at 18:34
  • Have you tried downloading the file directly and opening it in a HEX editor like I suggested? http://i.imgur.com/6diMLOg.png – Chuck Le Butt Jan 07 '15 at 18:35
  • It certrainly is strange. Why would I upload a WebP file? Convert a JPEG to WebP, sure, but I don't know why the server would show IE users a WebP version of the image instead of the JPEG. Just to make it clear: I've never converted an image from JPEG to WebP so it's quite odd that there appear to be WebP images being served to my visitors.. – Yannick Jan 07 '15 at 18:44
  • @Yannick Hmm. Did you create that image, or just find it elsewhere on the internet? If you have direct access to that file, could you try opening it in IE11 from your computer. Thanks. – Chuck Le Butt Jan 07 '15 at 18:46
  • @Chuck I mostly use images with Creative Commons licences from Flickr, which doesn't use the WebP format as far as I know. The image that doesn't work in the OP was a screenshot I took and saved as a JPEG. And there's one other thing that's odd: why is the extension of a WebP file .jpg? Wouldn't it be .webp? – Yannick Jan 07 '15 at 18:49
  • 1
    @Yannick File extensions are completely independent, and it's not that uncommon to see incorrect ones when it comes to images re-saved from the internet. – Chuck Le Butt Jan 07 '15 at 18:53
  • 1
    @Chuck I'm stunned. The original image has the same problem: it's a WebP file. http://i.imgur.com/11003B8.png - Guess that leaves me no other option other then to just replace all of those images and resave them again as JPEG in a photo editor tool. Feeling quite stupid that I didn't even consider the fact that there could be a problem with the image format. Thank you so much! – Yannick Jan 07 '15 at 18:56
  • @Yannick Thanks for confirming! I'd never even heard of WebP before this question, so we all learned something :) Please accept my answer, if you're happy I'm right. One question remains: How did Jonathan manage to see a JPEG when the original file wasn't one? Jonathan? – Chuck Le Butt Jan 07 '15 at 19:04
  • @Chuck Of course I will accept your answer! I'll do that once Jonathan has replied, otherwise he won't be able to leave a comment. You can never learn enough ;) – Yannick Jan 07 '15 at 19:06
  • @Chuck What is your user-agent string? Also curious what the ua-string is for the Asker. – Sampson Jan 07 '15 at 19:08
  • 3
    @Yannick You can still leave comments after the answer has been accepted :) – Chuck Le Butt Jan 07 '15 at 19:09
  • @JonathanSampson I have to leave now, but I took this screenshot for you. I'll be back later. http://i.imgur.com/h6j2186.png – Chuck Le Butt Jan 07 '15 at 19:10
  • @Chuck Yes, I am viewing the HEX: http://i.imgur.com/zb0wKg7.png. My ua-string is also visible there. – Sampson Jan 07 '15 at 19:11
  • @Chuck Thank you for the screenshot, but it doesn't share your user-agent string. Please check the request header for that. – Sampson Jan 07 '15 at 19:12
  • @JonathanSampson If you'll excuse the Dutch language: http://i.imgur.com/ylYMVOH.png – Yannick Jan 07 '15 at 19:14
  • @JonathanSampson That's not the hex of the file, that's the hex of the http request. Very different. Download the file to your desktop (maybe in a different browser?) and open it in a hex editor from there. I'll send my UA string soon. – Chuck Le Butt Jan 07 '15 at 22:04
  • @Chuck No, that was the HEX of the HTTP Response, which contains the file. [Here's an expanded view](http://i.imgur.com/klr3bOA.png) showing my request (top), and response (bottom). Note the format of the response is JFIF (JPEG File Interchange Format). – Sampson Jan 07 '15 at 22:18
  • Sorry, response, not request. Something odd going on with that server, but the original file was WebP. Very strange. – Chuck Le Butt Jan 07 '15 at 22:23
  • @JonathanSampson UA String: Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko – Chuck Le Butt Jan 08 '15 at 14:28
  • 2
    Sometimes this isn't even a question of what format the origin image is in. ModPageSpeed is a common module that will transcode images from one format into a better performing format. In some cases, this is WebP for Android/Chrome browsers. So even if you save the files in another format, they may be served in one session as WebP, and served in another as PNG/JPEG/etc. You should check your hosting solution to see if you are using MPS, and ensure that WebP transcoding is turned off if you have concerns in the short term. In the long term, the module will have updates to address this. – tobint Jan 08 '15 at 23:06
  • @Yannick tobint is right. While you did upload a WebP image, so that's what would have been served to everyone, it appears your hosting is trying to help out by serving it as a JPG when it feels it's appropriate. Confusing things. – Chuck Le Butt Jan 09 '15 at 18:00