Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Responsive Images Image Delivery with Srcset and Sizes Srcset with Picturefill

Anton Bredl
Anton Bredl
15,359 Points

picturefill.js vs. picturefill.min.js

What is the difference between the two files?

If I am planning to use these files and link them to an HTML doc via a <script> tag do I simply just save the picturefill file within the project folder and then link it to the HTML doc?

Also I have encountered many mentions of using an HTML5 shiv that is somehow similar to or used with Modernizer. Could someone provide me with more information on this?

Anton Bredl
Anton Bredl
15,359 Points

Thanks a lot Marcus. This explanation really helps!

If you want to repost your answer in the answers section rather than the comment section I would be happy to upvote your answer. If not - thanks again.

Okay cool, yea I posted it as an answer. I just wanted to comment at first because I didn't answer your full question but a part of it.

2 Answers

Just to give you a bit of information about your heading question "picturefill.js" vs "picturefill.min.js", the difference between files like this are that one is considered a source file and one is considered a minified file. If you don't see a "min" in the filename, it is likely a source file and is probably well formatted with comments. In a minified version, all unnecessary spacing is removed including most comments and variable names are converted to the shortest forms possible to drastically reduce the size of the file.

<shamelessPlug>For example, I wrote a JS library that normalizes access to experimental math methods and adds 11 new ones. My source file is about 29 kb. The minified version is 11 kb. That's a good size drop in file size. You can imagine how much memory you'd save with larger projects. You can see it here: https://github.com/marcusparsons/ExtraMath.js. </shamelessPlug>

kevinardo
seal-mask
.a{fill-rule:evenodd;}techdegree
kevinardo
Treehouse Project Reviewer

Unminified JS files for different scripts like picturefill.js for example is also a great way to learn how JavaScript can be used. By inspecting and trying to understand how the script is put together!

And the most common use case is to have unminified files or scripts in this case in development and use the minified smaller version as Marcus explained in production.