Canvas e SEO

[abnersajr]

Estou desenvolvendo um projeto para um fotógrafo e novamente o designer inventou uma moda que num so dos mais fãs, mas dessa vez é necessário e não tem escapatória.
Hover de imagem em grayscale. O site é responsivo então precisaria utilizar background-size: cover ai procura daqui dali achei uma solução mas não funciona o cover então acabei optando por usar Canvas.

Gostaria de saber se alguém já teve alguma experiência em que usou Canvas e como ficou o SEO, existe alguma coisa do tipo microdata e etc para isso, digo referenciar que aquele canvas é uma imagem seia lá.

[kazzkiq]

Cara, se você não tiver problemas com navegadores muito antigos, dá pra usar CSS3 e gerar a imagem em grayscale sem usar Canvas.

Exemplo:

.gray-img:hover {
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    filter: grayscale(1);
}

Sei que essa solução não ataca a sua pergunta propriamente dita, mas as vezes já resolveria de forma mais simples.

Funciona em todos os navegadores menos nos IEs (8, 9, 10 e 11). No caso desses navegadores você pode usar uma das soluções descritas nesses links:

http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css
http://stackoverflow.com/questions/14813142/internet-explorer-10-howto-apply-grayscale-filter

[felipefialho]

Então mano. Quanto ao background-size cover, não necessariamente. Se for em imagens, o ideal é que você use o object-fit cover.

Mas como disse o @kazzkiq, se a questão for só um grayscale, resolve em CSS que é bem mais pratico 😀

[danilovaz]

Sei que não é exatamente parte da pergunta, mas vi esse artigo esses dias e acho que encaixa nisso também, mostra a diferença de performance de filters em CSS, SVG e Canvas https://www.smashingmagazine.com/2016/05/web-image-effects-performance-showdown/