O Substituidor de Imagem permite que você clique em qualquer imagem em uma página da web e a substitua pela sua própria — seja fazendo o upload de um arquivo local ou colando a URL de uma imagem. A substituição se ajusta perfeitamente às dimensões do elemento original, preservando o layout da página. Teste como novos ativos ficam em contextos de produção, crie mockups com conteúdo real ou tire capturas de tela com imagens personalizadas.
Designers e desenvolvedores frequentemente precisam ver como uma nova imagem ficaria em um layout existente. A nova imagem hero funcionará com a sobreposição de texto atual? A nova foto do produto parece correta na grade de cartões existente? O logotipo do cliente tem o tamanho certo para o cabeçalho? Normalmente, responder a essas perguntas exige editar o código, trocar arquivos de imagem, recompilar e visualizar. O Substituidor de Imagem torna isso instantâneo — clique na imagem que deseja alterar, faça o upload de uma substituta ou cole uma URL, e a imagem é trocada imediatamente, mantendo as dimensões e o estilo do elemento original. O layout não se desloca, os elementos vizinhos permanecem no lugar e você vê exatamente como a nova imagem fica no contexto real da página. Todas as alterações não são destrutivas e são redefinidas ao atualizar a página.
Passe o mouse sobre as imagens na página para vê-las destacadas. Clique para selecionar a imagem que deseja substituir. A ferramenta reconhece elementos img, elementos de imagem de fundo CSS e elementos picture/source.
Arraste e solte um arquivo de imagem do seu computador ou clique para abrir um seletor de arquivos. Suporta os formatos PNG, JPG, WebP, SVG e GIF. O arquivo é carregado localmente — nunca é enviado para nenhum servidor.
Tem uma imagem hospedada em outro lugar? Cole a URL e ela será aplicada instantaneamente. Funciona com qualquer URL de imagem acessível publicamente — Unsplash, Imgur, seu CDN, buckets S3 ou qualquer link direto de imagem.
A imagem substituta preenche as dimensões do elemento original usando object-fit, para que o layout da página permaneça exatamente o mesmo. Sem deslocamentos de layout, sem refluxo, sem grades quebradas. A nova imagem se adapta ao espaço.
Um painel lateral rastreia todas as imagens que você substituiu na sessão atual. Veja o original vs a substituição de relance e clique em qualquer entrada do histórico para desfazer essa substituição específica.
Todas as substituições existem apenas na memória do navegador. Os arquivos de imagem reais da página e o HTML nunca são modificados. Atualize a página para restaurar instantaneamente cada imagem original. Seguro para usar em qualquer site.
Sua equipe tem três imagens hero candidatas para a página inicial. Em vez de implementar cada uma, abra o site de produção e troque a imagem hero por cada candidata. Veja como cada uma fica com a sobreposição de texto real, barra de navegação e conteúdo ao redor.
Durante uma chamada com um cliente, substitua as imagens de marcação em um site de testes pelas fotos reais dos produtos ou ativos da marca do cliente. Mostre a eles exatamente como o conteúdo deles ficará no design final — ao vivo, no navegador.
Precisa de capturas de tela mostrando diferentes conteúdos regionais? Substitua imagens de produtos, fotos da equipe ou gráficos de recursos por versões específicas da região e capture telas para cada mercado — tudo sem implementar builds separados.
Explorando como um estilo de ilustração diferente ou abordagem fotográfica ficaria em uma página existente. Troque as imagens uma a uma para construir um protótipo visual da nova direção de design sem tocar em nenhum código.
Substitua um JPG por uma versão WebP para verificar visualmente se a qualidade é aceitável. Ou troque por uma imagem de maior resolução para verificar se o layout lida adequadamente com imagens 2x. Teste as mudanças de formato de imagem visualmente antes de se comprometer com as conversões de arquivo.
Abra o dock flutuante do DevSuite Pro e clique no ícone Substituidor de Imagem. A ferramenta é ativada e as imagens na página tornam-se alvos clicáveis, destacadas ao passar o mouse.
Clique em qualquer imagem na página. Um diálogo de substituição aparece mostrando as informações da imagem atual (nome do arquivo, dimensões, tamanho) e opções para fazer upload ou colar uma URL.
Arraste e solte um arquivo do seu computador, clique para navegar ou cole a URL de uma imagem. A substituição é aplicada instantaneamente e a imagem é trocada no lugar.
Veja como a nova imagem fica dentro do layout real da página. Verifique se ela funciona com as sobreposições de texto, se ajusta corretamente ao contêiner e combina com o conteúdo ao redor.
Clique em outras imagens para continuar substituindo. A barra lateral de histórico rastreia todas as alterações. Quando terminar, atualize a página para restaurar todas as imagens originais.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
