ImageSmith
Imagens bem onde o código as menciona: pare o ponteiro sobre um caminho e um cartão mostra a imagem, seu tamanho em pixels e o tamanho do arquivo. SVG é desenhado, todos os tamanhos de um .ico estão lá, GIFs animados são reproduzidos — e o mesmo cartão substitui a visualização no Gerenciador de Soluções.
Gratuito · Visual Studio 2022 e 2026 · 14 idiomas de interface · PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG
Por que o ImageSmith
Veja a imagem, não o nome dela
/Assets/Icons/save.svg diz pouco. O ImageSmith mostra a própria imagem, bem onde o caminho está escrito — em XAML, Razor, CSS, C#, JSON, arquivos de projeto e .resx — sem abrir o arquivo.
SVG e .ico incluídos
O Visual Studio não mostra nada para SVG e só um tamanho de um ícone. O ImageSmith desenha o SVG, lista todas as imagens dentro de um .ico e reproduz GIFs animados.
Imagens ausentes se destacam
Um caminho para uma imagem que não está no projeto nem no disco recebe um sublinhado ondulado, e um ícone de aplicativo sem os tamanhos de que o Windows precisa recebe uma dica — antes que um usuário veja uma imagem vazia ou um ícone borrado.
Gratuito, sem pegadinhas
Sem assinatura, sem versão “pro”, sem coleta de dados, sem mensagens na janela Saída ou na inicialização. A única coisa que vamos pedir — depois que você a tiver usado por um tempo — é uma avaliação no Marketplace. Funciona no Visual Studio 2022 e 2026, x64 e ARM64.
Recursos
- Um cartão ao passar o mouse sobre um caminho: a imagem sobre um quadriculado, o tamanho em pixels, o tamanho e o formato do arquivo, o tamanho com que o código a exibe (exibida a 20%) e ações — Abrir, Abrir no aplicativo padrão, Mostrar no Gerenciador de Soluções, Copiar caminho.
- O mesmo cartão no Gerenciador de Soluções em vez da visualização interna, com Copiar imagem.
- SVG desenhado, também em 16, 24, 32 e 48 px — como ficará em um botão.
- Todos os tamanhos de um .ico com suas cores e formato; Salvar todos os tamanhos como PNG, Salvar como PNG por tamanho, Copiar o tamanho selecionado.
- GIFs animados são reproduzidos no cartão, com o número de quadros e a duração.
- Variantes de escala lado a lado:
_x2,_x1_25,@2x,.scale-200,.targetsize-24,-480. - Miniaturas antes dos caminhos, como amostras de cor.
- Dicas: Imagem não encontrada e Ícone sem os tamanhos usuais.
- PNG, JPEG, GIF, BMP, TIFF, ICO, WebP e SVG; fundo quadriculado, branco ou escuro atrás da imagem.
O cartão no código
Pare o ponteiro sobre o caminho de uma imagem e o cartão se abre na dica de ferramenta Informações Rápidas do editor. Ele mostra o que está no arquivo em disco, do jeito que o projeto o encontraria: um caminho relativo a partir da pasta do arquivo ou do projeto, um caminho raiz a partir do projeto (ou de wwwroot), um URI pack a partir do projeto daquele assembly.
| Parte | O que mostra |
|---|---|
| Imagem | A imagem sobre um quadriculado (a transparência fica visível), imagens pequenas ampliadas com pixels nítidos, as grandes ajustadas. Três botões no canto trocam o fundo. |
| Selo de tamanho | O tamanho em pixels e, quando a mesma tag define Width ou Height, o tamanho com que o código a exibe: 1600 × 1000 · exibida a 20%. Para um SVG: SVG · ajustado. |
| Detalhes | Nome do arquivo, tamanho em pixels, tamanho do arquivo, formato e DPI (quando não é 96); para um SVG, o viewBox, o número de formas e se tem gradientes ou texto; o caminho na solução. |
| Ações | Abrir (no Visual Studio), Abrir no aplicativo padrão, Mostrar no Gerenciador de Soluções, Copiar caminho. |
Quadriculado, branco ou escuro
Um logotipo branco em um cartão branco desaparece. Os três botões no canto superior direito da imagem alternam entre quadriculado, branco e escuro; a escolha vale até o Visual Studio ser fechado. O fundo com que um cartão começa é uma opção.
Miniaturas antes dos caminhos
Cada caminho cujo arquivo existe recebe uma pequena imagem antes dele, da altura da linha — como uma amostra de cor. Uma lista de arquivos de ícones pode ser lida num relance. Desative-as para um editor mais limpo.
Gerenciador de Soluções
Pare o ponteiro sobre um arquivo de imagem no Gerenciador de Soluções: o cartão do ImageSmith se abre ao lado em vez da visualização interna. SVG é desenhado (a visualização interna não mostra nada), um .ico mostra todos os tamanhos (a visualização interna mostra um) e as variantes de escala da imagem ficam alinhadas abaixo dela.
O cartão permanece enquanto o ponteiro está sobre o item ou sobre o cartão, para que seus links possam ser clicados — aqui são Abrir, Abrir no aplicativo padrão, Copiar caminho e Copiar imagem. Ele fecha ao sair, ao rolar, com uma tecla ou com um clique na árvore.
Pastas, arquivos de código e tudo o que o ImageSmith não mostra mantêm a dica de ferramenta interna. Se uma atualização do Visual Studio mudar o Gerenciador de Soluções de forma que o item sob o ponteiro não possa ser encontrado, o ImageSmith não atrapalha.
Ícones (.ico)
Um arquivo .ico contém várias imagens, uma por tamanho. O cartão de um .ico mostra todas lado a lado sobre o quadriculado (tamanhos acima de 128 px são exibidos em 128) e uma tabela com cada tamanho, suas cores, se está armazenado como BMP ou PNG e seus bytes.
Clique em um tamanho — na faixa ou na tabela — para selecioná-lo. Copiar o tamanho selecionado coloca essa imagem na área de transferência.
Salvar como PNG em uma linha grava esse tamanho em um arquivo PNG; Salvar todos os tamanhos como PNG… pede uma pasta e grava um PNG por tamanho (contoso-16.png … contoso-256.png).
SVG
Arquivos SVG são desenhados — no cartão no código, no Gerenciador de Soluções e nas miniaturas — com o SharpVectors. Abaixo da imagem, o cartão a mostra em 16, 24, 32 e 48 px: como ficará em um botão da barra de ferramentas.
Os detalhes são o viewBox (ou largura × altura quando não há viewBox), o tamanho do arquivo e o número de formas, com gradiente e texto quando o arquivo os tem. Um SVG que não pode ser desenhado mostra a linha do erro em vez de uma imagem.
Arquivos externos e URLs referenciados por um SVG nunca são carregados.
GIF animado
Um GIF animado é reproduzido no cartão, em loop, e os detalhes dizem quantos quadros ele tem e quanto dura: GIF · animado, 8 quadros, 0,8 s. Um GIF com um único quadro fica parado. WebP, TIFF e BMP são exibidos como PNG e JPEG.
Variantes de escala
Imagens costumam vir em várias escalas para telas de alta densidade. Quando os arquivos ficam lado a lado, o cartão os alinha abaixo da imagem, cada um desenhado em proporção com sua escala e tamanho em pixels (×2 · 64); o exibido fica contornado. Uma escala usual que está faltando é um espaço tracejado.
| Nomenclatura | Exemplo | Espaço tracejado se faltar |
|---|---|---|
| Multiplicador (WinForms, designers de relatórios) | Chart.png, Chart_x2.png, Chart_x1_25.png, Chart_x1.5.png | ×1, ×2 |
| @2x (web, iOS, React Native) | Chart.png, Chart@2x.png | ×1, ×2 |
| scale- (UWP, WinUI, MSIX) | Logo.scale-100.png, Logo.scale-200.png | 100, 200 |
| targetsize- (UWP, WinUI, MSIX) | Square44x44Logo.targetsize-24.png | 16, 24, 32, 48 |
| Sufixo de tamanho | icon-16.png, icon-32.png, tent-480.jpg, tent-768.jpg | — |
Clique em uma variante para vê-la no mesmo cartão. A linha aparece no cartão no código e no Gerenciador de Soluções.
O que é reconhecido
Um caminho é reconhecido pela extensão de um arquivo de imagem, nos lugares em que cada linguagem indica arquivos:
| Onde | Exemplos |
|---|---|
| XAML (WPF, WinUI, MAUI, Avalonia) | Source="/Assets/logo.png", pack://application:,,,/Contoso;component/Icons/save.svg, /Contoso.Icons;component/…, ms-appx:///Assets/hero.jpg, avares://Contoso.App/Assets/logo.png |
| Razor, Blazor e HTML | <img src="~/images/tent.jpg">, srcset, <link rel="icon">, style="background: url(…)" |
| CSS, SCSS, LESS | url("../images/hero.webp"), url(…) without quotes, image-set(…) |
| C# | "Assets/hero.jpg", @"Assets\splash.png", new Uri("pack://…"), Path.Combine("Assets", "logo.svg") |
| JSON | "icon": "images/icon-192.png" (appsettings.json, manifest.json) |
| Arquivos de projeto | <ApplicationIcon>, <Resource Include="…">, <Content Include="…">, MAUI and appxmanifest images |
| .resx | Um ResXFileRef para uma imagem e um valor de cadeia simples que é o caminho de uma imagem. |
| Formatos | PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG |
URIs pack para outro projeto da solução (/Contoso.Icons;component/Icons/save.svg, com ou sem versão) são procurados nesse projeto. ms-appx:/// também encontra os arquivos qualificados de UWP e WinUI (Logo.scale-200.png para Logo.png); um logo.png do MAUI encontra Resources/Images/logo.svg.
Não exibidos, de propósito: URLs e URIs data:, associações e recursos ({Binding …}, {StaticResource …}), cadeias interpoladas e caminhos montados a partir de variáveis, propriedades do MSBuild, curingas, pack://siteoforigin: e nomes de arquivo soltos em C# ("logo.png" pode ser qualquer coisa).
Dicas
Dois tipos de dicas, compartilhados com a família SmithWorks: cada texto começa com ImageSmith:, sua dica de ferramenta tem Não mostrar este tipo de dica e, com o LensSmith, a dica também aparece no final da linha.
| Dica | Quando | Texto |
|---|---|---|
| Imagem não encontrada | Um caminho para uma imagem que não está no projeto nem no disco (um sublinhado ondulado). URLs, caminhos com variáveis e nomes de arquivo soltos no código não são verificados. | ImageSmith: /Assets/banner-old.png is not in the project. |
| Ícone sem os tamanhos usuais | Um .ico de aplicativo ou da área de notificação sem 16, 32, 48 ou 256 px (pontos cinza): o Windows redimensiona outro tamanho e o ícone fica borrado. Favicons não são verificados. | ImageSmith: tray.ico has no 16 × 16 image — Windows will scale a larger one. |
Cada tipo pode ser desativado em Dicas no editor nas configurações, ou diretamente na dica.
Configurações
Ferramentas › Opções › SmithWorks › ImageSmith. Cada opção tem uma breve descrição do que faz.
| Opção | Padrão |
|---|---|
| Visualização ao passar o mouse | ativado |
| Cartão no Gerenciador de Soluções | ativado |
| Miniaturas antes dos caminhos | ativado |
| Plano de fundo da visualização | Quadriculado |
| Dicas: Imagem não encontrada | ativado |
| Dicas: Ícone sem os tamanhos usuais | ativado |
| Pedir uma avaliação no Marketplace | ativado |
As configurações ficam em %LocalAppData%\ImageSmith. Restaurar padrões ativa tudo de novo.
Perguntas frequentes
Paro o ponteiro sobre um caminho e nada abre. Por quê?
O ImageSmith mostra um cartão só para um arquivo que encontra no disco. Verifique se o caminho termina com uma extensão de imagem e não é montado a partir de variáveis, uma associação ou uma URL (esses nunca são exibidos). Se o arquivo estiver faltando, o caminho deve ter um sublinhado ondulado Imagem não encontrada. Nomes de arquivo soltos em C# ("logo.png") são ignorados de propósito — ali só são lidos caminhos com uma pasta ou um URI pack.
Por que não aparece nada para avares://OtherAssembly/…?
Um URI avares:// ou pack indica um assembly. Quando esse assembly é um projeto da solução aberta, o ImageSmith procura nesse projeto. Quando ele vem de um pacote NuGet ou de uma DLL referenciada, a imagem está compilada dentro dele e não é um arquivo no disco — então não há nada para mostrar, e o ImageSmith também não a informa como ausente.
Meu SVG tem um namespace errado ou ausente. Ele é desenhado?
Sim. Arquivos salvos com xmlns="http://w3.org" ou sem nenhum namespace são comuns; o ImageSmith coloca o namespace SVG logo antes de desenhar, então o cartão mostra a imagem. Os navegadores ainda podem recusar um arquivo assim, então vale a pena corrigi-lo.
O cartão diz que não é possível desenhar este SVG. E agora?
O cartão mostra a primeira linha do erro (por exemplo, um erro XML com linha e coluna). Corrija o arquivo e pare o ponteiro sobre o caminho de novo — um arquivo alterado é lido novamente.
Posso manter a visualização interna no Gerenciador de Soluções?
Sim — desative Cartão no Gerenciador de Soluções nas configurações. O cartão no código continua.
Uma imagem grande deixa o editor lento?
Não. As imagens são decodificadas em um thread em segundo plano e só no tamanho de que o cartão precisa; as miniaturas são decodificadas pequenas. Arquivos acima de 256 MB (SVG acima de 8 MB, ICO acima de 16 MB) mostram seus detalhes sem imagem.
O ImageSmith envia algo para algum lugar?
Não. Ele lê os arquivos de imagem da sua solução no seu computador e nada mais — sem telemetria, sem requisições, e um SVG nunca carrega nada da internet.
Onde relato um problema ou sugiro um recurso?
Abra uma issue no repositório Feedback no GitHub — há formulários para bugs, ideias e caminhos não reconhecidos (troque nomes privados). Você também pode usar a aba Q&A no Marketplace.
Histórico de alterações
1.1.0
- Um novo ícone, desenhado no estilo comum da família SmithWorks.
1.0.0
- Primeira versão: o cartão ao passar o mouse sobre caminhos de imagens em XAML, Razor e HTML, CSS, C#, JSON, arquivos de projeto e .resx; o cartão no Gerenciador de Soluções com variantes de escala; SVG desenhado, todos os tamanhos de um .ico, GIFs animados; miniaturas antes dos caminhos; as dicas Imagem não encontrada e Ícone sem os tamanhos usuais; um pedido único de avaliação.