Udacity - Grow with Google Scholarship

Mobile Web - Responsive Images - Grunt

One of the things that has been giving the MWS track fits is creating responsive images.  

The course suggests setting up an automated build process using with ImageMagick or ImageOptim.  I'm running a Mac, and I chose ImageMagick.

First you have to install Node.js.  Directions are at https://docs.npmjs.com/getting-started/installing-node.  There are very good directions on this site for installing Node.js .  I used the MacOS installer and updated everything.

I then installed ImageMagick using http://imagemagick.org/script/index.php . They had suggested another link but it indicated that it didn't work with the current Mac operating system.  I am not sure how I originally installed it, but I ended up copying the latest version and putting it in the place the other one was.

ImageMagick automates a lot of the work that GIMP and Photoshop does -- resize images, make animated gifs, crop and other fun stuff.

For a mobile web app, we want to compress the images and make about three different versions, a small, medium and large version basically for phone, tablet or large desktop screens.

The next thing we need is Grunt.  Grunt is a task runner -- if we set up Grunt correctly, then we can take any group of images and make them responsive.  We're also going to use it later to set up our Mobile Web environment. 

I followed this document: https://gruntjs.com/getting-started  to get started.

There is lots of documentation on using Grunt/Imagick/Responsive Images.   The reading that was provided in the course was: https://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/

Here's the files I used for the project:  https://github.com/kathweaver/images 

 

 

 

 

 

Comments

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.

Working...
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.

Working...

Post a comment

Your Information

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