So I have a responsive image implementation that’s full screen. I am loading picturefill.js and this is in WordPress.
<img class="site-content__home__heroimg"
src="http://example.com/wp-content/uploads/2014/07/new_crane-300x225.jpg"
srcset="http://example.com/wp-content/uploads/2014/07/new_crane.jpg 3264w,
http://example.com/wp-content/uploads/2014/07/new_crane-3000x2250.jpg 3000w,
http://example.com/wp-content/uploads/2014/07/new_crane-2250x1688.jpg 2250w,
http://example.com/wp-content/uploads/2014/07/new_crane-2000x1500.jpg 2000w,
http://example.com/wp-content/uploads/2014/07/new_crane-1800x1350.jpg 1800w,
http://example.com/wp-content/uploads/2014/07/new_crane-1550x1163.jpg 1550w,
http://example.com/wp-content/uploads/2014/07/new_crane-1300x975.jpg 1300w,
http://example.com/wp-content/uploads/2014/07/new_crane-1024x768.jpg 1024w,
http://example.com/wp-content/uploads/2014/07/new_crane-800x600.jpg 800w,
http://example.com/wp-content/uploads/2014/07/new_crane-550x413.jpg 550w,
http://example.com/wp-content/uploads/2014/07/new_crane-300x225.jpg 300w,
http://example.com/wp-content/uploads/2014/07/new_crane-150x150.jpg 150w" sizes="100vw" alt="Paper Crane">
Everything seems to be working but the google page speed tool keeps yelling at me about this image.
Compressing and resizing http://example.com/…nt/uploads/2014/07/new_crane-800×600.jpg could save 42KiB (91% reduction).
I am missing something? I am using only one size (100vw) because the image needs to always be 100% of the view port.
