A Quick and Dirty automatic responsive image generator for plain HTML sites.
So you've made a website, but all the images are huge. Obviously it doesn't make sense to load the huge images on every person's iPhone 4 and 480p monitor, so most people will recommend that you create a set of images at different sizes that will load depending on the image's final size. Just one problem: it's just so annoying.
QDsrcset will automatically create a set of responsive images at a variety of sizes and implement them in your HTML. It's easy to install and configure, and can be run with a single command.
First, add qdsrcset
to your website using NPM or Yarn:
npm install --save-dev qdsrcset
Next, create a configuration file in either your project's root or in a config/
folder named .qdsrcsetconfig.json
. Here's an example:
{
"inDir": "src/",
"outDir": "out/"
}
Then, tell NPM to run the program:
npx qdsrcset
This will format a site located in inDir
and place the formatted site in outDir
. Don't make these the same folder.
That's it! It's certainly quick, hopefully not too dirty (and getting less dirty) srcset for each of your website's images!
The json configuration file can be located in either /.qdsrcsetconfig.json
or /config/qdsrcsetconfig.json
.
It contains the following fields:
inDir
: This is where your website is located. QDsrcset will scan here for HTML files (and images, ifimgDir
is not set.)outDir
: This is where your final, formatted website is located. It cannot be the same as inDir.imgDir
(Optional): This is where qdsrcset will search for images. It is relative toinDir
. For example, ifinDir
issrc/
andimgDir
isimg/
, qdsrcset will look insrc/img/
for images.ignore
(Optional): An array of paths to directories or files for QDsrcset to ignore. It is relative toinDir
. For example, ifinDir
issrc/
andignore
containsimg/favicon/
, qdsrcset will ignoresrc/img/favicon/
.sizes
(Optional): An array of integer widths that each image will be resized to. If an image is smaller than some of the specified sizes, QDsrcset will simply compress the image at its original size. Defaults to:[150, 200, 300, 400, 600, 800, 1000, 1500, 2000, 2500]
Let's say your website is structured like this:
myWebsite/
├── src/
│ ├── img/
│ │ ├── favicon/
│ │ │ └── favicon.ico
│ │ ├── img1.png
│ │ ├── img2.jpeg
│ │ └── img3.webp
│ ├── index.html
│ ├── stylesheet.css
│ └── page/
│ ├── index.html
│ └── stylesheet.css
└── .qdsrcsetconfig.json
Your config file might be set up like this:
{
"inDir": "src/",
"outDir": "out/",
"imgDir": "img",
"ignore": [
"img/favicon/"
]
}
If, for whatever reason, you wanted a specific set of sizes for your respnsive images, the config could look like this:
{
"inDir": "src/",
"outDir": "out/",
"imgDir": "img",
"ignore": [
"img/favicon/"
],
"sizes": [
100,
200,
500,
1000,
2000,
4000
]
}