JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.goodboydigital.com/pixijs/examples/14/pixi.js"></script>
<p>CSS Bicubic:</p>
<div id="css-bicubic"></div>
<p>CSS Linear:</p>
<div id="css-linear"></div>
<p>Pixi.js Linear:</p>

CSS

body { color:#999; }

div {
    width:47px; 
    height:79px; 
    background-size: 100% 100%; 
    background-image:url(http://fiddle.jshell.net/img/[email protected]);
}

#css-bicubic { 
    image-rendering:optimizeQuality; 
    -ms-interpolation-mode:bicubic;
}
#css-linear { 
    image-rendering:-moz-crisp-edges; 
    image-rendering: -o-crisp-edges; 
    image-rendering:-webkit-optimize-contrast; 
    -ms-interpolation-mode:nearest-neighbor;
}

JavaScript

var stage = new PIXI.Stage(0xFFFFFF, true);
var bg = PIXI.Sprite.fromImage("../../../img/[email protected]");
bg.scale.x = .125;
bg.scale.y = .25;
stage.addChild(bg);

var renderer = PIXI.autoDetectRenderer(47, 79);
document.body.appendChild(renderer.view);
var textureHasLoaded = false;
checkIfTextureHasLoaded();

function checkIfTextureHasLoaded(){
    if (bg.texture.baseTexture.hasLoaded){
        textureHasLoaded = true;
        renderTexture();   
    }
    if (!textureHasLoaded){
        requestAnimFrame(checkIfTextureHasLoaded);
    }
}

function renderTexture(){
    renderer.render(stage);   
}