Lidar com imagens de retina pode ser um pesadelo no código de front-end.
Para mim, a melhor solução quando se trabalha com fundação é usar o Interchange .
Essa biblioteca javascript usa consultas de mídia para carregar as imagens apropriadas para os navegadores do usuário, tornando as imagens responsivas muito rápidas.
Se você ler a documentação, o componente utiliza o data-interchange
atributo para especificar suas consultas de mídia.
O jeito clássico
= image_tag('front/static/logo.png', alt: 'Description', 'data-interchange' => "[#{image_path('front/static/logo@2x.png')}, (retina)]")
Você escreve o mesmo caminho de imagem 2 vezes …
Não é muito bom para sua saúde mental.
O ninja nindô
Basta colocar este código em seu application_helper.rb
module ApplicationHelper
def retina_image_tag(default_name, options={})
retina_name = default_name.gsub(%r{\.\w+$}, '@2x\0')
image_tag(default_name, options.merge('data-interchange' => "[#{asset_path(retina_name)}, (retina)]"))
end
end
Magia ! use para fazer o trabalhoretina_image_tag('front/static/logo.png')
Se você quiser usar outra biblioteca para imagens de retina, retina.js pode ser uma solução.