You might have encountered the following situation: an image is visible on Google Chrome, but not in Internet Explorer and Firefox. This can be an issue if you are a web developer. Why? Because you want to make sure your web page looks the same in all browsers. Check below what to do if your image is not displayed.
Let’s take for example the below case. This is how a website looks on Google Chrome and should look in any other web browser:
But if you check on Internet Explorer or Mozilla Firefox you might have the following surprise. You will notice that the third image is not displayed!
Reason and solution
The reason why the image is not displayed it is very simple. Once you get it! That’s the annoying part! I’ve checked my CSS code, my HTML code, googled the issue, even replaced the image with another one. I reached the conclusion that the problem was with the image. Other images were visible on all browsers.
What was wrong with the image? The image was not in .jpeg or .png format (even if I had it saved as a .png). It was in Google WebP format. Unfortunately, Internet Explorer does not natively support such images (and neither do Firefox or Safari for that matter). Reaching this point the solution is pretty obvious. Go online and look for a picture converter website (like this one) and convert your picture in .jpeg or .png format. Then upload it again on your page and check it on all desired browsers.
Other articles you might find useful:
- Find out what to do if you have image quality loss after uploading into WordPress.
- Learn how debugging in WordPress works.
- Take a break and check out this Mafia 3 review.
Any questions? Leave us a comment below and we will come back to you as soon as possible. Thanks!