I added a new field in umbraco where I upload pictures with max width 400px and I only have 5 images there, which I load when the width is less than 400px. However, I probably have reduced the quality of the images a bit too much, but what else do you think about this solution?

<script type="text/javascript">
if (window.matchMedia("(max-width: 460px)").matches)
{
    @{


      var mediaID5 = Model.Content.GetProperty("mobileimages").Value.ToString().Split(',');
    @:jQuery(function($){
                @:$.supersized({
                        @:slideshow         :   1,          // Slideshow on/off
                        @:autoplay          :   1,          // Slideshow starts playing automatically
                        @:start_slide       :   0,          // Start slide (0 is random)
                        @:slide_interval    : 3000,              // Length between transitions
                        @:fit_always        :0,
                        @: slides: [
                                     foreach (var mediaID in mediaID5){
            var media = umbraco.uQuery.GetMedia(mediaID);

    @:{ image: '@media.GetImageUrl()'},
                             }
@:],
                                      @:});
             @:});
                 }
}
else
@{


    var mediaID1 = Model.Content.GetProperty("images").Value.ToString().Split(',');
    @:jQuery(function($){
        @:$.supersized({
            @:slideshow         :   1,          // Slideshow on/off
        @:autoplay          :   1,          // Slideshow starts playing automatically
        @:start_slide       :   0,          // Start slide (0 is random)
        @:slide_interval    : 3000,              // Length between transitions
        @:fit_always        :0,
        @: slides: [
                     foreach (var mediaID in mediaID1){
            var media = umbraco.uQuery.GetMedia(mediaID);

        @:{ image: '@media.GetImageUrl()'},
        }
@:],
    @:});
 @:});
}