Website Creation

Responsive Images - How to Set up

I do a lot of web pages and web sites that have a lot of photos.  In fact, I'm working on one now and it's been a major source of web page block.

So I'm going to create a process that automats as much of it as possible and document it for the next time(s).

First, upgrade node and npm to the latest versions.

To upgrade, run:

npm install npm@latest -g

nvm install node --reinstall-packages-from=node

I have image magic installed on my computer.  The command is magick and it is well documented at

While Grunt is a nice way to do this, it's not necessary, because I just have to do it once.  I'm usually not wanting to use grunt or another tool.






Feed You can follow this conversation by subscribing to the comment feed for this post.

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.


Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)