https:\/\/docs.npmjs.com\/getting-started\/installing-node.<\/a> There are very good directions on this site for installing Node.js . I used the MacOS installer and updated everything.<\/p>\nI 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.<\/p>\n
ImageMagick automates a lot of the work that GIMP and Photoshop does — resize images, make animated gifs, crop and other fun stuff.<\/p>\n
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.<\/p>\n
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. <\/p>\n
I followed this document: https:\/\/gruntjs.com\/getting-started to get started.<\/p>\n
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\/<\/p>\n
Here's the files I used for the project: https:\/\/github.com\/kathweaver\/images <\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-45","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/posts\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":0,"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/posts\/45\/revisions"}],"wp:attachment":[{"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/media?parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/categories?post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/tags?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}