> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/core-web-vitals/desempenho/sprite-formas-de-pagamentos.md).

# Sprite formas de pagamentos

#### O que é Sprite de imagens

Sprite de imagens é uma técnica que combina várias pequenas imagens em uma unica imagem maior. Ao utilizar esse método reduzimos o número de requisições HTTP.

Por exemplo, se uma loja utiliza 10 ícones pequenos de 30 x 30 pixels, carregá-los separadamente resultaria em 30 requisições diferentes. Usando sprite, esses 10 ícones seriam combinados em uma imagem 300 x 300 pixels e somente uma única requisição precisaria ser feita.

Para exibir as imagens individuais corretamente carregadas por Sprinte, usamos a propriedade CSS `background-position`.

#### Sprite de imagens de pagamentos

A Tray disponibiliza a técnica de sprites para as imagens das formas de pagamento. Como a maioria das lojas possuem diversas formas de pagamento e elas geralmente são exibidas em ícones, usa-la faz muito sentido.

Utilizamos a classe `.pag` para identificar onde a imagem de pagamento deve ser carregada e a classe `.pag-lazy` para efetivamente carregar o sprite das imagens de pagamento. Cada forma de pagamento é identificada por uma classe própria iniciando por `.pag-`. 

A tabela abaixo mostra a classe e uma imagem representativa. A imagem carregada pode ser ligeiramente diferente.

| Classe                                                                                                                  | Ícone                            |
| ----------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| `.pag-bb`                                                                                                               | ![](/files/8FR1xOpDSJ8IFzXiLe8C) |
| `.pag-itau`                                                                                                             | ![](/files/zTdVG8iOJPzsOB3cizwx) |
| `.pag-bradesco`                                                                                                         | ![](/files/3NStu0U13HH4l1JTqc0H) |
| `.pag-caixa`                                                                                                            | ![](/files/imv7mJDvrz5hhpny7Nr6) |
| <p><code>.pag-avista</code></p><p><code>.pag-banrisul</code></p>                                                        | ![](/files/CqbMkJN6VZ2Nyu2vxYjI) |
| `.pag-pix`                                                                                                              | ![](/files/7HfDO8Do7lt4TuAyrdLw) |
| `.pag-bank_billet`                                                                                                      | ![](/files/Yu1YLO2mBsVqVpOzZSit) |
| `.pag-deposit`                                                                                                          | ![](/files/nhnkFUVeCFZETSkpyXcV) |
| <p><code>.pag-</code></p><p><code>.pag-base</code> </p><p><code>.pag-bcash</code> </p><p><code>.pag-billing</code> </p> | ![](/files/4lBepj7XPrRKO8St5kvR) |
| `.pag-visa`                                                                                                             | ![](/files/Dje5TXMjtIA7aTAtVOTl) |
| `.pag-visaelectron`                                                                                                     | ![](/files/da7dzDVEZ2CPlHwiOlpB) |
| `.pag-mastercard`                                                                                                       | ![](/files/f9uNRJpjOQFUSk5fGYW0) |
| `.pag-maestro`                                                                                                          | ![](/files/8YEuAxL3MgRmleCYa6TD) |
| `.pag-elo`                                                                                                              | ![](/files/sh4fe1bvQQVc7Hnwx35p) |
| `.pag-jcb`                                                                                                              | ![](/files/2Zi69eAOmlORloUdSFok) |
| `.pag-hiper`                                                                                                            | ![](/files/ARvxg9dKhJgPcEDe350I) |
| `.pag-hipercard`                                                                                                        | ![](/files/bwLYtTbfyV03QrWTfOe6) |
| `.page-amex`                                                                                                            | ![](/files/19BhN4q2eHGM1hHgDRJs) |
| `.pag-diners`                                                                                                           | ![](/files/wug9ZcLyYdP4XiwGHjIM) |
| `.page-aura`                                                                                                            | ![](/files/xbrE5uA5OsnFOK80fwDh) |
| `.pag-discover`                                                                                                         | ![](/files/nvNxaYP4GFaAlWJmCAPg) |
| `.pag-pagseguro`                                                                                                        | ![](/files/PQZBY63X5DoFJLy3MU2y) |
| `.pag-mercadopago`                                                                                                      | ![](/files/VjuEVgYsftlwmdiJm0Fp) |
| `.pag-vindi`                                                                                                            | ![](/files/o41bdlQV0Gv8tNDKCgoH) |
| `.pag-paypal`                                                                                                           | ![](/files/ww3iEuvWwbaYhJYtZQXm) |
| `.pag-moip`                                                                                                             | ![](/files/sQNOhGTrfHKPwmY709Jr) |
| `.pag-peela`                                                                                                            | ![](/files/juXonNOyQ0RsDgqeCcS8) |
| `.pag-check`                                                                                                            | ![](/files/wlzOnSiJghgJL1LCKwIV) |
| `.pag-dinheiromail`                                                                                                     |                                  |

O código abaixo mostra a implementação dos ícones de forma de pagamento utilizando a técnica de sprinte.

{% code title="Código" %}

```html
<ul class="payment-list row">
    {% for payment in paymentMethods.order %}
        <li class="col-sm-2 col-xs-2 payment-form">
            <i class="pag {{ payment.sprite_class }}" aria-label="{{ payment.display_name }}"></i>
        </li>
    {% endfor %}
    {% for payment in paymentMethods.credit %}
        <li class="col-sm-2 col-xs-2 payment-form">
            <i class="pag {{ payment.sprite_class }}" aria-label="{{ payment.display_name }}"></i>
        </li>
    {% endfor %} 
</ul>
```

{% endcode %}