Shopify

Change Image By Size

<script>
  var width = $(window).width();
  var is_retina = window.devicePixelRatio > 1;
  $('.home-slider-image').each(function(){
    var img_src = $(this).attr('data-src');
    if (!is_retina) {
      img_src = img_src.replace('.jpg','.jpg');
    }
    $(this).attr('src', img_src);
  });
</script>

Change Slider Image By Size

  var width = $(window).width();
  var is_retina = window.devicePixelRatio > 1;
  $('.home-slider-image').each(function(){
    var img_src = $(this).attr('data-src');
    var new_size = '';
    if (!is_retina) {
      if (width<1025) {
        new_size = '1024x1024';
      } else if (width<1441) {
        new_size = '1440x1440';
      } else if (width<1601) {
        new_size = '1600x1600';
      }
    } else {
      if (width<800) {
        new_size = '1024x1024';
      } else if (width<1025) {
        new_size = '1440x1440';
      } else if (width<1281) {
        new_size = '1600x1600';
      }
    }
    if (new_size != '') {
      img_src = img_src.replace('.jpg','_'+new_size+'.jpg');
    }
    $(this).attr('src', img_src);
  });

Change Slideshow Image Size

  var width = $(window).width();
  $('.home-slider-image').each(function(){
    var img_src = $(this).attr('data-src');
    if (width<801) {img_src = img_src.replace('_1600x1600.jpg','_800x800.jpg');}
    else if (width<1025) {img_src = img_src.replace('_1600x1600.jpg','_1024x1024.jpg');}
    else if (width<1281) {img_src = img_src.replace('_1600x1600.jpg','_1280x1280.jpg');}
    else if (width<1441) {img_src = img_src.replace('_1600x1600.jpg','_1440x1440.jpg');}
    else if (width>1600) {img_src = img_src.replace('_1600x1600.jpg','.jpg');}
    $(this).attr('src', img_src);
  });

Image Size

    <picture> 
      <source media="(max-width: 480px)" srcset=" 1x, 2x"> 
      <source media="(max-width: 640px)" srcset=" 1x, 2x"> 
      <source media="(max-width: 1024px)" srcset=" 1x, 2x"> 
      <img src="" alt="">
    </picture>

Instafeed

      $(function(){
		var resolution = "low_resolution";   
        var width = $(window).width();
        if (window.devicePixelRatio > 1 && width <= 740) {
          resolution = "standard_resolution";
        } else if (window.devicePixelRatio <= 1 && width < 1220 && width > 740) {
          resolution = "thumbnail";
        }
        var userFeed = new Instafeed({
          get: 'user',
          userId: {{ settings.instagram-user-id }},
          accessToken: '{{ settings.instagram-access-token }}',
          resolution: resolution,
          template: '<a class="fancybox desktop-2 tablet-1 mobile-half padded" href="{{url}}" rel="ig" title="{{ caption }}"><img class="instagram-image" src="{{ url }}" /></a>'
        });
      userFeed.run();        

      });

Instagram feed image size

resolution - Size of the images to get. Available options are:
  thumbnail (default) - 150x150
  low_resolution - 306x306
  standard_resolution - 612x612

Lazy load image

  $('.product-images').hover(function(){
  	var secondary_image = $(this).find('.secondary-product-image');
    var src = secondary_image.attr('data-src');
    if (src != '') {
      var img = new Image();
      img.onload = function () { secondary_image.attr('src', src); };
      img.src = src;
      secondary_image.attr('data-src', ''); 
    }
  });

Lazy Loading Unveil

$(document).ready(function() {
  $(".lazy-loading-image").unveil(0, function(){
    var secondary_image = $(this).next('.hover-lazy-loading-image');
    var img_src = secondary_image.attr('src');
    if (!secondary_image.hasClass('hover-lazy-loading-image-loaded')) {
      secondary_image.attr('src', $(this).attr('src'));
    }
  });
  $('.lazy-loading-image').each(function(){
    $(this).hover(function(){
      var secondary_image = $(this).next('.hover-lazy-loading-image');
      var img_src = secondary_image.attr('data-src');
      if (!secondary_image.hasClass('hover-lazy-loading-image-loaded')) {
        secondary_image.addClass('hover-lazy-loading-image-loaded');
        secondary_image.attr('src', img_src);  
        secondary_image.attr('data-src', '');
      }
    });
  });
});
  

Load after page load

$(document).ready(function() { 
  $(window).load(function() { 

  });
});

$(document).ready(function() { 
  $(window).on('load', function () {

  });
});

Retina CSS

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
}

Slider Image Size

  $('#homepage_slider li img').each(function() {
    var img_src_full = $(this).attr('data-src-full');
    var img_src_1024 = $(this).attr('data-src-1024');
    var img_src_grande = $(this).attr('data-src-grande');
    var img_src_large = $(this).attr('data-src-large');
    var viewport_width = $(window).width();
    var img_src = img_src_1024;
    if (window.devicePixelRatio > 1) {
      if (viewport_width > 640) {
        img_src = img_src_full;
      }
    } else {
      if (viewport_width < 481) {
        img_src = img_src_large;
      } else if (viewport_width < 641) {
        img_src = img_src_grande;
      } else if (viewport_width > 1024) {
        img_src = img_src_full;
      }
    }
    $(this).attr('src', img_src);
    $(this).attr('data-src-full', '');
    $(this).attr('data-src-1024', '');
    $(this).attr('data-src-grande', '');
    $(this).attr('data-src-large', '');
  });