<h3 dir="auto">Problem</h3>
<p dir="auto">When going through the "Image tutorial" on Firefox or Edge, when you try downloading the image of the stinkbug, it will only download as a <code class="notranslate">webp</code> file and there is no option to download as <code class="notranslate">png</code>. That is even clicking the "View Image" and trying to save it.  Below is trying to save the image in Firefox.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/12010588/95612982-393eed80-0a32-11eb-8e68-3a3ceb85f0ae.png"><img src="https://user-images.githubusercontent.com/12010588/95612982-393eed80-0a32-11eb-8e68-3a3ceb85f0ae.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">This is a problem for introductory students, trying to use this tutorial and learning how to read tutorials. They believe they are doing something wrong and wouldn't be sure how to convert it. As a more advanced user, I still could not find out how to make it a <code class="notranslate">png</code> through the tutorial page.</p>
<ul dir="auto">
<li>Tutorial Link: <a href="https://matplotlib.org/tutorials/introductory/images.html" rel="nofollow">https://matplotlib.org/tutorials/introductory/images.html</a></li>
<li>Image Link: <a href="https://matplotlib.org/_images/stinkbug.png" rel="nofollow">https://matplotlib.org/_images/stinkbug.png</a> (may say <code class="notranslate">png</code> but downloading it is as <code class="notranslate">webg</code>)</li>
</ul>
<p dir="auto">Operating System: Windows 10 Pro</p>

<h3 dir="auto">Suggested Improvement</h3>
<p dir="auto">The image needs to be updated to a <code class="notranslate">png</code> and maybe a direct link to download the image (the latter is not as important).</p>
<p dir="auto">If there is a way to do that with a module, that might be cool to include, but just an idea. I can provide more information if necessary.</p>
<p dir="auto">The <a href="https://matplotlib.org/users/image_tutorial.html" rel="nofollow">image tutorial on matplotlib.org</a> uses this sample image:</p>
<p dir="auto"><a href="https://matplotlib.org/_images/stinkbug.png" rel="nofollow">https://matplotlib.org/_images/stinkbug.png</a></p>
<p dir="auto">and notes that it is a "24-bit RGB PNG image (8 bits for each of R, G, B)". However, further inspection reveals that it is <em>not</em> a 24-bit RGB, but rather an 8-bit grayscale image.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ curl -s 'https://matplotlib.org/_images/stinkbug.png' | file -
/dev/stdin: PNG image data, 500 x 375, 8-bit grayscale, non-interlaced"><pre class="notranslate"><code class="notranslate">$ curl -s 'https://matplotlib.org/_images/stinkbug.png' | file -
/dev/stdin: PNG image data, 500 x 375, 8-bit grayscale, non-interlaced
</code></pre></div>
<p dir="auto">However, the source image in the github repository <em>is</em> an RGB image:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ curl -s 'https://raw.githubusercontent.com/matplotlib/matplotlib/master/doc/_static/stinkbug.png' | file -
/dev/stdin: PNG image data, 500 x 375, 8-bit/color RGB, non-interlaced"><pre class="notranslate"><code class="notranslate">$ curl -s 'https://raw.githubusercontent.com/matplotlib/matplotlib/master/doc/_static/stinkbug.png' | file -
/dev/stdin: PNG image data, 500 x 375, 8-bit/color RGB, non-interlaced
</code></pre></div>
<p dir="auto">I noticed this because when I tried to follow the tutorial on my own machine, I kept on getting this error in line 7:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="In [7]: lum_img = img[:,:,0]
IndexError: too many indices for array"><pre class="notranslate"><code class="notranslate">In [7]: lum_img = img[:,:,0]
IndexError: too many indices for array
</code></pre></div>
<p dir="auto">This is because <code class="notranslate">imread</code> stores a grayscale image as an ndarray with only two dimensions, not three, as documented here:</p>
<blockquote>
<p dir="auto">For grayscale images, the return array is MxN. For RGB images, the return value is MxNx3. For RGBA images the return value is MxNx4.</p>
</blockquote>
<p dir="auto"><a href="https://matplotlib.org/api/_as_gen/matplotlib.pyplot.imread.html" rel="nofollow">https://matplotlib.org/api/_as_gen/matplotlib.pyplot.imread.html</a></p>
<p dir="auto">So <code class="notranslate">img.shape</code> ends up as <code class="notranslate">(375, 500)</code> when it should be <code class="notranslate">(375, 500, 3)</code>.</p>
<p dir="auto">Let me know if I should file this here instead:</p>
<p dir="auto"><a href="https://github.com/matplotlib/matplotlib.github.com/issues">https://github.com/matplotlib/matplotlib.github.com/issues</a></p>