lane-county-fair - file size

[robertdenton]

The Lane County Fair repo is weighing in at a hefty 65 MB and crashing mobile browsers especially Facebook and Twitter.

Need to look into displaying lower res photos (and maybe audio? don't know if that's possible...) on mobile.

[mhulse]

For audio files, I've reduced size: https://github.com/rgpages/lane-county-fair/issues/13

Might not hurt to play with image compression a tad? Or not worry about it for this project, but remember these issues for the next project that's similar. :+1:

[robertdenton]

Mobile file size research:

• shot down (or maybe not?) and where we may be going (2013)
• Why we need responsive images: Part deux (2013)
• Testing for how images load (2012)
• Techniques for using media queries to minimize & why mobile sites are a good thing (2010)
• srcset & sizes

[mhulse]

Here's what I've done in the past: https://github.com/mhulse/vogue

Probably other/better techniques … Like this one (maybe):

https://github.com/scottjehl/picturefill

[robertdenton]

:+1:

[robertdenton]

Conclusion: Will try out SoundCloud player with image or other tried and true methods in the future. Don't want to completely rule out HTML5 video/audio and high-res pics but may not be the best in every situation.

In future projects may want to plan for mobile first with smaller files and move up from there. Possibly use above methods including picturefill or vogue.

[robertdenton]

Grunt responsive images

package.json

• Add "grunt-responsive-images": "~0" under dependencies.
• npm install

Gruntfile.js

• Add grunt.loadNpmTasks('grunt-responsive-images'); to Tasks list.
• Add this to init. Several options and file options available here.

responsive_images: {
    dev:{
        options: {
            sizes: [
                {
                    name: 'small',
                    width: 400,
                }, 
                {
                    name: 'medium',
                    width: 800,
                },
            ],
        },
        files: [
            {
                expand: true,
                src: ['images/*.{gif, jpg, png}'],
                cwd: './files/',
                dest: '../dev/',
            },
        ],
    },
},