Responsive Images: final version
This is project that I made during my Udacity's Responsive Images course. Initially the blog looked like this.
Course journey involves understading responsive images, using grunt to optimize images and automate workflow, I also helped me to go deep in world of source set
srcset attribute and
<picture> element :)
Make sure imagemagick and graphicsmagick are installed on your machine
First you'll to need make sure you have all
node_modules and optimized images in images/ directory.
cd to project's root directory and run the following command:
There is one dependency that is not listed in package.json (webp-bin); remember to add that in with
npm install webp-bin
or just add this line
npm i -D webp-bin to your
It's time to run Grunt:
Please note that the project is configured to use ImageMagick (as opposed to GraphicsMagick) and requires that to be installed.
--> this can be also done with imagemagick command line tools. Simply used the command in terminal
mogrify -format jpg *.png
You can read more over here
I am really sorry for the messed created here :( I think this was the best I could do with my current knowledge :) `images_src/art_direction` I used an Image Editing tool to generate crop of the images and then used grunt to generate images as per my requirement. Naming convention for art_direction images is little different from other images but this is the only way it can be done without more mess. You'll know what I mean when you'll see Gruntfile.js
I thing more I would like to point here :) I have used `` element for all images. I had to because I am supplying webp for browser that support it and jpeg for that doesn't. Now here are some good general practices:
- Only use
<picture>element when you want to server files with diffrent format (here jpeg and webp) or you are dealing with art direction case.
- Only use
mediaattribute for resolution switching case
- Now for resolution-switching case we can simply use
imgwith either using 1x, 2x descriptor or Width descriptors. Now again there is a limitaion with 1x, 2x.. descriptors you can only have two images (say 2560px wide and 1280px wide) now It would be complete waste on a 320px wide viewport. This can be handle in two ways:
- We use use
<picture>to provide different images for diffrent viewport width. For our responsive blog I have used this technique. Providing large 1x, 2x images for larger viewport, medium 1x, 2x for medium sized viewport and small 1x, 2x smaller viewports. Okay I know it's not going good :( but trust me It'll get better :P . Now way we are doing it here is not recommened because we are forcing browser to choose images instead of letting browser decide what is best. So bottom line - avoid using
mediaattribute for resolution switching case
- Now other way would be much simpler - Use Width descripots. Simply use
imgand provide images with different resolution. This is much easier and here we are letting browser decide what is best for user. In our responsive images blog it can done for resolution-switching case as:
<img src="images/default,jpg srcset="large2x.jpg 1600w, large1x.jpg 800, medium2x.jpg 1024w, medium1x.jpg 640px, small.jpg 320px" alt=""See I told you naa.. I gets better :B. Now a simple question would "what if I want to provide webp support?" Well it's simply use
<picture>element and there will be no requirment for
mediaattribute. Simply use
- We use use
- Now at last I would justify myslef why i used
mediaattribute for resolution switching case. First I was asked to do so :P as Lesson:4 last Quiz asked us to do so, Second I want to keep naming of images in
images/folder less messy (Guess what! I know it's already so0 much messy :D). For the sake of this my first readme I am commenting out a code for
still_life image casein HTML. You can go there and check it how it should be done. Please note the images name I have used in the code does exist in our
Congrats I you made it till here. I am open to you suggestion so let's make this better :)
readme.md begins here
This version uses the picture element for art direction: different image crops are loaded, depending on viewport size.
The images still use
max-width: 100% – which means 'expand the image display size to fit the container, but no larger than the natural width of the image'. What defines the size of the body images? You can find out with the Dev Tools.
- Getting text size right is hard. Is the body text too big or small on some devices and window sizes? Are the headings the right size relative to the body text?
- The markup is verbose! We've gone from around 7,000 characters to over 14,000. That's twice the download size – just to start displaying text. How could we improve this?
- Check the page with Page Speed Insights: the images are still unoptimized.
Check the page with the Chrome Dev Tools:
- Open the tools, open the Network tab, reload the page and look at the number of requests, total transfer size and time to load.
- Change to device emulation mode by clicking the phone icon in the Dev Tools (at the top left next to the magnifying glass icon). Try the various throttling options to emulate a GPRS mobile phone cell connection – now look at the Network tab. Total page weight is now less than 300KB, and page load is less than 1.5s on DSL – a lot better than the very first version, which was over 3MB in size and took several minutes to load on DSL.
The page takes several minutes to complete loading. (Remember that studies by Amazon, Google and others show an increased drop off in revenue with delays of less than 0.1 seconds!) Even with a good DSL connection, load time is still over 10 seconds.
- Try out emulation on different devices, portrait and landscape (click the icon next to the dimensions). What problems do you notice with each image? Which ones look worse?
Check the page from Page Speed Insights – lots more problems!
Initial Readme me
Responsive Images: Project Part 3
- Replace all of your images with
altattributes to be a better netizen.
- (Optional) Add a custom font and try styling the text better!
How you know you're done
A code will appear in the Udacity Feedback when all Project Part 3 tests pass. Paste the code in to the Udacity classroom to complete the quiz!
Current Problems with the Page
<picture>element allows browsers to decide which image to display based on media queries and device pixel ratios. Right now, the page is downloading images that are simply too big and waste too many bytes. How low can you get the page weight once the browser starts downloading images that are as small as possible?
altattributes make your sites accessible to the vision impaired and anyone surfing the web on a screen reader. Make sure to include them!
- The blog is visually simple. What can you do to make it look better?
Share your finished blog in the Udacity forums!