\n Houve um tempo em que voc\u00ea podia diferenciar com seguran\u00e7a entre uma p\u00e1gina da web para desktop e uma p\u00e1gina da web para celular. Tanto assim, de fato, que toda uma ind\u00fastria cresceu em torno do reaproveitamento de sites de desktop para dispositivos m\u00f3veis.\n<\/p>\n
\n Por um tempo, voc\u00ea n\u00e3o era ningu\u00e9m se n\u00e3o tivesse um site m\u00f3vel separado em um dom\u00ednio separado. Ent\u00e3o as coisas come\u00e7aram a mudar.\n<\/p>\n
\n Os monitores m\u00f3veis melhoraram al\u00e9m de qualquer reconhecimento. O mesmo aconteceu com os navegadores m\u00f3veis. Os tablets lan\u00e7aram outro elemento na equa\u00e7\u00e3o. 4G veio junto. As telas Retina ofereciam novos n\u00edveis de clareza para os usu\u00e1rios finais.\n<\/p>\n
\n De repente, a linha entre desktop e mobile parecia t\u00eanue.\n<\/p>\n
\n Ao mesmo tempo, havia uma diversidade crescente no tamanho e na resolu\u00e7\u00e3o dos monitores de desktop.\n<\/p>\n
\n E uma dor de cabe\u00e7a crescente para web designers.\n<\/p>\n
\n J\u00e1 se foram os dias em que voc\u00ea s\u00f3 precisava atender a um punhado de tamanhos de viewport. As coisas estavam ficando complicadas.\n<\/p>\n
\n Felizmente, a ajuda estava dispon\u00edvel na forma de consultas de m\u00eddia e no conceito de design responsivo.\n<\/p>\n
\n Gra\u00e7as \u00e0s consultas de m\u00eddia, tornou-se poss\u00edvel variar estilos e layout \u2013 at\u00e9 mesmo conte\u00fado \u2013 dependendo da largura da janela de visualiza\u00e7\u00e3o do usu\u00e1rio e da resolu\u00e7\u00e3o da tela. \u00c9 claro que as consultas de m\u00eddia n\u00e3o s\u00e3o de forma alguma a \u00fanica ferramenta na bolsa de truques do designer responsivo, mas \u00e9 justo dizer que elas formam a base da t\u00e9cnica.\n<\/p>\n
\n Esta foi uma \u00f3tima not\u00edcia para celular. O design responsivo significava que voc\u00ea poderia fornecer efetivamente diferentes vers\u00f5es do mesmo site para diferentes dispositivos. Tudo sem desenvolver um site m\u00f3vel separado em um dom\u00ednio diferente.\n<\/p>\n
\n Os propriet\u00e1rios de sites est\u00e3o come\u00e7ando a perceber que os usu\u00e1rios finais se preocupam com o desempenho. Os varejistas, em particular, est\u00e3o come\u00e7ando a perceber que a redu\u00e7\u00e3o de milissegundos no tempo de carregamento pode se traduzir em milh\u00f5es no balan\u00e7o.\n<\/p>\n
\n Felizmente, os sites responsivos oferecem um claro benef\u00edcio de desempenho em rela\u00e7\u00e3o aos seus primos m\u00f3veis dedicados: o redirecionamento para um dom\u00ednio m\u00f3vel \u00e9 eliminado.\n<\/p>\n
\n No entanto, apesar disso, o design responsivo conseguiu adquirir uma reputa\u00e7\u00e3o de baixo desempenho.\n<\/p>\n
\n De certa forma, isso \u00e9 bastante injusto, mas vale a pena olhar para os desafios extras de desempenho que o design responsivo oferece aos incautos\u2026\n<\/p>\n
\n Os arquivos de imagem s\u00e3o grandes. E por serem grandes, geralmente s\u00e3o os culpados pelos tempos de carregamento lentos. Eles s\u00e3o, portanto, um bom ponto de partida para qualquer pessoa que esteja tentando otimizar o desempenho de um site.\n<\/p>\n
\n Infelizmente, uma das primeiras solu\u00e7\u00f5es para fornecer imagens de forma responsiva n\u00e3o era boa para o desempenho.\n<\/p>\n
\n A t\u00e9cnica \u00e9 maravilhosamente simples. Basta usar max-width: 100% para garantir que as imagens sejam dimensionadas para a largura do elemento que as cont\u00e9m:\n<\/p>\n
img\n{\nmax-width: 100%;\n}<\/code><\/pre>\n\n \u00c0 medida que o cont\u00eainer encolhe para caber em viewports menores, todas as imagens dentro dele encolher\u00e3o. F\u00e1cil!\n<\/p>\n
\n Mas h\u00e1 um problema. O tamanho da imagem pode diminuir na tela, mas o tamanho do arquivo permanece o mesmo. Isso est\u00e1 longe de ser ideal do ponto de vista do desempenho. Voc\u00ea pode estar enviando uma imagem de 800 x 800 pixels pelo fio, apenas para ser exibida em 80 x 80 pixels: em outras palavras, voc\u00ea pode estar transmitindo centenas (ou milhares) de bytes desnecess\u00e1rios. Al\u00e9m de a imagem demorar muito para carregar, todos esses bytes redundantes podem esgotar o valioso subs\u00eddio de dados do usu\u00e1rio final.\n<\/p>\n
\n No entanto, esta n\u00e3o \u00e9 a \u00fanica \u2013 nem mesmo a melhor \u2013 maneira de entregar imagens responsivas. Por um lado, uma imagem que funciona com 800 pixels de largura n\u00e3o funcionar\u00e1 necessariamente t\u00e3o bem em v\u00e1rias fra\u00e7\u00f5es desse tamanho.\n<\/p>\n
\n Para lidar com isso, voc\u00ea pode usar uma consulta de m\u00eddia para exibir diferentes vers\u00f5es da imagem, dependendo do tamanho da janela de visualiza\u00e7\u00e3o, usando uma consulta de m\u00eddia e exibi\u00e7\u00e3o: nenhum.\n<\/p>\n
\n CSS:<\/strong>\n<\/p>\n@media (min-width: 601px) {\n#croppedImage\n{\ndisplay:none;\n}\n}\n@media (max-width: 600px) {\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n\n HTML:<\/strong>\n<\/p>\n<img id=\"largeImage\" width=\"400\" height=\"400\" alt=\"\" src=\"images\/largeImage.webp\" \/>\n<img id=\"croppedImage\" width=\"200\" height=\"200\" alt=\"\" src=\"images\/croppedImage.webp\" \/><\/code><\/pre>\n\n Isso permite que voc\u00ea exiba diferentes vers\u00f5es de uma imagem, em vez de apenas a mesma imagem em tamanhos diferentes. No entanto, n\u00e3o reduz o n\u00famero de bytes. Na verdade, o tamanho geral da p\u00e1gina ser\u00e1 maior, pois todas as imagens ser\u00e3o carregadas, sejam elas exibidas ou n\u00e3o.\n<\/p>\n
\n Uma alternativa melhor \u2013 se for pr\u00e1tica \u2013 \u00e9 usar imagens de fundo em vez de <img src=\"https:\/\/inform.click\/wp-content\/uploads\/2024\/11\/inform.click\" \/><\/code>elementos. Isso \u00e9 prefer\u00edvel porque as imagens referenciadas em CSS s\u00e3o carregadas apenas se forem usadas (desde que n\u00e3o sejam URIs de dados):\n<\/p>\n@media (min-width: 601px) {\n#largeImage\n{\nwidth:400px;\nheight:400px;\nbackground-image:url(\/images\/largeImage.webp);\n}\n#croppedImage\n{\ndisplay:none;\n}\n}\n \n@media (max-width: 600px) {\n#croppedImage\n{\nwidth:200px;\nheight:200px;\nbackground-image:url(\/images\/croppedImage.webp);\n}\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n\n Isso funciona bem: os visitantes baixam apenas as imagens de que precisam, como e quando precisam. O problema \u00e9 que \u00e9 desordenado, tratando efetivamente o conte\u00fado como estilo. Como tal, potencialmente cria um problema de manuten\u00e7\u00e3o e tamb\u00e9m pode resultar em imagens importantes sendo ignoradas pelos mecanismos de pesquisa.\n<\/p>\n
\n Em vez disso, por que n\u00e3o usar SVG (gr\u00e1ficos vetoriais escal\u00e1veis): um formato de imagem que \u00e9 dimensionado por sua pr\u00f3pria natureza? As imagens SVG tamb\u00e9m t\u00eam a vantagem de serem facilmente estilizadas com CSS (veja este \u00f3timo tutorial<\/a> sobre como tornar SVGs responsivos com CSS). Isso \u00e9 perfeito para \u00edcones e logotipos, mas infelizmente voc\u00ea n\u00e3o poder\u00e1 usar SVGs para fotos \u2013 para isso voc\u00ea ter\u00e1 que recorrer a formatos raster, como JPEG.\n<\/p>\n\n Outra op\u00e7\u00e3o \u00e9 usar uma das v\u00e1rias solu\u00e7\u00f5es JavaScript para fornecer imagens responsivas. Essa \u00e9 uma maneira popular de fazer isso, mas acrescenta outra camada de complexidade. Al\u00e9m disso, como o JavaScript bloqueia a constru\u00e7\u00e3o do DOM, qualquer solu\u00e7\u00e3o que envolva JavaScript tem o potencial de atrasar a renderiza\u00e7\u00e3o. Portanto, embora existam alguns plug-ins muito inteligentes por a\u00ed, apenas introduzindo o JavaScript na equa\u00e7\u00e3o, voc\u00ea est\u00e1, at\u00e9 certo ponto, resignando-se ao menor dos dois males.\n<\/p>\n
\n At\u00e9 recentemente, essas eram as \u00fanicas op\u00e7\u00f5es.\n<\/p>\n
\n Agora, no entanto, os elementos e <source \/><\/code>e os atributos srcset e tamanhos est\u00e3o finalmente trazendo imagens verdadeiramente responsivas para a web. A nova especifica\u00e7\u00e3o tamb\u00e9m est\u00e1 come\u00e7ando a ganhar suporte ao navegador, com suporte total no Chrome e no Opera, e suporte para troca de resolu\u00e7\u00e3o no Safari. At\u00e9 que outros navegadores o alcancem, h\u00e1 um excelente polyfill<\/a> de JavaScript .\n<\/p>\n\n Neste admir\u00e1vel mundo novo, voc\u00ea pode usar srcset para definir uma lista de imagens candidatas para o navegador escolher. Voc\u00ea pode usar uma consulta de m\u00eddia no atributo de tamanhos para ditar o tamanho no qual a imagem ser\u00e1 exibida. Usando o elemento junto com consultas de m\u00eddia dentro de um ou mais elementos, voc\u00ea pode especificar um intervalo diferente de imagens para diferentes condi\u00e7\u00f5es (por exemplo, para viewports at\u00e9 uma certa largura, use image a, b ou c, e para viewports maiores use image x, y ou z). Isso \u00e9 \u00fatil se voc\u00ea precisar fornecer uma vers\u00e3o cortada de uma imagem para usu\u00e1rios com telas pequenas.\n<\/p>\n