Otimização de imagem Retina em Ruby on Rails

Não há necessidade de carregar imagens grandes se a página não for aberta em uma tela de alta resolução. Neste tutorial, usaremos um fork da joia retina-js . Basicamente, este é um invólucro de Retina.js que ajuda você a usá-lo facilmente em rubi sobre trilhos.
Dos documentos Retina.js :

Como funciona:
quando seus usuários carregam uma página, o retina.js verifica cada imagem na página
para ver se há uma versão de alta resolução dessa imagem em seu
servidor. Se houver uma variante de alta resolução, o script irá trocar
essa imagem no local.

O script assume que você usa o
modificador de alta resolução prescrito pela Apple (@ 2x) para denotar variantes de imagem de alta resolução em seu servidor.

Por exemplo, se você tiver uma imagem em sua página semelhante a esta:

<img src="/images/my_image.png" />

O script verificará seu servidor para ver se
existe uma imagem alternativa neste caminho: "/images/my_image@2x.png"

Para usar esta gema em seu aplicativo, siga estas etapas fáceis:

1. Adicione gem 'retinajs-rails', git: 'https://github.com/bohdanbenov/retinajs-rails.git'ao seu Gemfile.

2. Execute o bundle installcomando em seu terminal

3. Inclua o arquivo retina.js com esta tag <% = javascript include tag ‘retina.js’%> na página onde você precisa usar a otimização de imagens.

4. Adicione suas fotos em alta resolução (anexe @ 2x após o nome e antes da extensão) na mesma pasta com sua imagem pequena. Por exemplo, se sua imagem menor estiver em, então sua imagem grande deve serassets/images/flowers.pngassets/images/flowers@2x.png

5. Inclua suas imagens com tag image_tag_with_at2xpara visualizar. Por exemplo= image_tag_with_at2x "flowers.png"

6. Verifique se funciona. Para isso, recarregue fortemente sua página e encontre suas imagens na aba Rede. Observe o tamanho da imagem. Aumente a resolução (por exemplo, 2560×1600) nas ferramentas de desenvolvimento do Chrome e recarregue novamente. Verifique o tamanho novamente. Tem que ser maior que o anterior. Além disso, deve haver mudanças na estrutura html da tag img, o atributo src deve mudar para your_image@2x.png que indica que está tudo bem.