Use responsive images where appropriate

[humphd]

In #46 we're adding the Docusaurus ideal-image plugin. It lets you use an <Image /> component in your Markdown, and then automatically generates ideal image sizes, based on props you include:

import Image from '@theme/IdealImage';
import thumbnail from './path/to/img.png';

// your React code
<Image img={thumbnail} />

// or
<Image img={require('./path/to/img.png')} />

We should look at where to use this in our docs. Ideal candidate images would be those that are large enough, and can be given multiple sizes for different viewports. This would help a lot on mobile.

[humphd]

We're seeing a lot of people trying to do image centering with various CSS techniques. Instead of inventing our own, let's rely on what we get for free from IdealImage. NOTE: it is actually based on https://github.com/endiliey/react-ideal-image, which does a lot for us.

[a-rokay]

input-functions.md is in need of this.

[nguyenhung15913]

Hi @humphd, I am new to this project and this issue is interesting. Which specific files should I apply this features?

[humphd]

@nguyenhung15913 it's a good question. There's a few things we need:

• centering the images horizontally, which this plugin will do
• creating different sizes of larger images. This will depend on finding some bigger images. You might start by looking at the file sizes of the existing images and focus on a few large ones to learn.

[nguyenhung15913]

@humphd Hi David, I applied and use Plugin-ideal-image but there was not any prop to center image. Should I keep the original method inside the src/css/custom.css

[nguyenhung15913]

@humphd Also the props which are sizes and size do not work.

import Image from "@theme/IdealImage";
import ima from "/img/programmer.png"

<Image size={100} img={ima} />;

However width of react ideal image works.

<Image width={100} img={ima} />;