Why do `.jpg` embedded from the Wikimedia commons not display properly?

Question

Almost all images embedded on stack exchange (SE) are hosted at i.sstatic.net.

However, there are a lot of pictures on Wikipedia for which the copyright is conducive to sharing images with others.

It is almost as if the images are in the public domain, except that the images are not more than eight decades old.

The Wiki-Media Foundation encourages people to share and embed images from the wikimedia commons on websites like stack exchange.

![A picture of a small trash can](https://commons.wikimedia.org/wiki/File:%D7%A4%D7%97_%D7%90%D7%A9%D7%A4%D7%94_%D7%A2%D7%9D_%D7%A4%D7%93%D7%9C_%D7%9C%D7%A4%D7%AA%D7%99%D7%97%D7%94_%D7%95%D7%9E%D7%99%D7%9B%D7%9C_%D7%A4%D7%A0%D7%99%D7%9E%D7%99_%D7%94%D7%A0%D7%99%D7%AA%D7%9F_%D7%9C%D7%A9%D7%9C%D7%99%D7%A4%D7%94.jpg)

Why is it that whenever I try to embed an image from the wikimedia commons, the image does not display properly?

Answer 1

This is happening because you are linking to the image information page, not the image itself. Confusingly, MediaWiki (the software on which Wikimedia Commons, along with Wikipedia and many other wikis, runs) puts image file extensions on Web pages about the images. This is arguably poor practice, but is beyond our control.

Below an image on that page, you will see links to the image in various sizes. These links go to actual images. Choose an appropriate one (the default preview is probably a good choice unless you have a reason to choose a larger size), and copy that URL. That is the URL that you should use to embed an image.

![A picture of a small trash can](https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/%D7%A4%D7%97_%D7%90%D7%A9%D7%A4%D7%94_%D7%A2%D7%9D_%D7%A4%D7%93%D7%9C_%D7%9C%D7%A4%D7%AA%D7%99%D7%97%D7%94_%D7%95%D7%9E%D7%99%D7%9B%D7%9C_%D7%A4%D7%A0%D7%99%D7%9E%D7%99_%D7%94%D7%A0%D7%99%D7%AA%D7%9F_%D7%9C%D7%A9%D7%9C%D7%99%D7%A4%D7%94.jpg/450px-%D7%A4%D7%97_%D7%90%D7%A9%D7%A4%D7%94_%D7%A2%D7%9D_%D7%A4%D7%93%D7%9C_%D7%9C%D7%A4%D7%AA%D7%99%D7%97%D7%94_%D7%95%D7%9E%D7%99%D7%9B%D7%9C_%D7%A4%D7%A0%D7%99%D7%9E%D7%99_%D7%94%D7%A0%D7%99%D7%AA%D7%9F_%D7%9C%D7%A9%D7%9C%D7%99%D7%A4%D7%94.jpg)

It is a good idea to link to the description page as well, for attribution purposes. To do this, wrap the whole image code in a regular link.

[![A picture of a small trash can](https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/%D7%A4%D7%97_%D7%90%D7%A9%D7%A4%D7%94_%D7%A2%D7%9D_%D7%A4%D7%93%D7%9C_%D7%9C%D7%A4%D7%AA%D7%99%D7%97%D7%94_%D7%95%D7%9E%D7%99%D7%9B%D7%9C_%D7%A4%D7%A0%D7%99%D7%9E%D7%99_%D7%94%D7%A0%D7%99%D7%AA%D7%9F_%D7%9C%D7%A9%D7%9C%D7%99%D7%A4%D7%94.jpg/450px-%D7%A4%D7%97_%D7%90%D7%A9%D7%A4%D7%94_%D7%A2%D7%9D_%D7%A4%D7%93%D7%9C_%D7%9C%D7%A4%D7%AA%D7%99%D7%97%D7%94_%D7%95%D7%9E%D7%99%D7%9B%D7%9C_%D7%A4%D7%A0%D7%99%D7%9E%D7%99_%D7%94%D7%A0%D7%99%D7%AA%D7%9F_%D7%9C%D7%A9%D7%9C%D7%99%D7%A4%D7%94.jpg)](https://commons.wikimedia.org/wiki/File:%D7%A4%D7%97_%D7%90%D7%A9%D7%A4%D7%94_%D7%A2%D7%9D_%D7%A4%D7%93%D7%9C_%D7%9C%D7%A4%D7%AA%D7%99%D7%97%D7%94_%D7%95%D7%9E%D7%99%D7%9B%D7%9C_%D7%A4%D7%A0%D7%99%D7%9E%D7%99_%D7%94%D7%A0%D7%99%D7%AA%D7%9F_%D7%9C%D7%A9%D7%9C%D7%99%D7%A4%D7%94.jpg)

Here's the format:

[![alternate text](direct image file URL)](image information page URL)