ImageSmith
Imágenes justo donde el código las menciona: detenga el puntero sobre una ruta y una tarjeta muestra la imagen, su tamaño en píxeles y el tamaño del archivo. Los SVG se dibujan, están todos los tamaños de un .ico, los GIF animados se reproducen, y la misma tarjeta sustituye a la vista previa en el Explorador de soluciones.
Gratis · Visual Studio 2022 y 2026 · 14 idiomas de interfaz · PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG
Por qué ImageSmith
Ver la imagen, no su nombre
/Assets/Icons/save.svg dice poco. ImageSmith muestra la propia imagen, justo donde está escrita la ruta (en XAML, Razor, CSS, C#, JSON, archivos de proyecto y .resx), sin abrir el archivo.
SVG y .ico incluidos
Visual Studio no muestra nada para un SVG y solo un tamaño de un icono. ImageSmith dibuja el SVG, enumera todas las imágenes de un .ico y reproduce los GIF animados.
Las imágenes que faltan se notan
Una ruta a una imagen que no está en el proyecto ni en el disco se subraya con una línea ondulada, y un icono de aplicación sin los tamaños que necesita Windows recibe una sugerencia, antes de que un usuario vea una imagen vacía o un icono borroso.
Gratis, sin letra pequeña
Sin suscripción, sin versión «pro», sin recopilación de datos, sin mensajes en la ventana Salida ni al iniciar. Lo único que le pediremos —cuando ya la haya usado durante un tiempo— es una valoración en el Marketplace. Funciona en Visual Studio 2022 y 2026, x64 y ARM64.
Características
- Una tarjeta al pasar el puntero sobre una ruta: la imagen sobre un damero, su tamaño en píxeles, el tamaño y el formato del archivo, el tamaño al que la muestra el código (mostrado al 20 %) y acciones: Abrir, Abrir en la aplicación predeterminada, Mostrar en el Explorador de soluciones, Copiar ruta.
- La misma tarjeta en el Explorador de soluciones en lugar de la vista previa integrada, con Copiar imagen.
- SVG dibujados, también a 16, 24, 32 y 48 px: tal como se verán en un botón.
- Todos los tamaños de un .ico con sus colores y su formato; Guardar todos los tamaños como PNG, Guardar como PNG para cada tamaño, Copiar tamaño seleccionado.
- Los GIF animados se reproducen en la tarjeta, con el número de fotogramas y la duración.
- Variantes de escala una al lado de otra:
_x2,_x1_25,@2x,.scale-200,.targetsize-24,-480. - Miniaturas delante de las rutas, como muestras de color.
- Sugerencias: Imagen no encontrada e Icono sin los tamaños habituales.
- PNG, JPEG, GIF, BMP, TIFF, ICO, WebP y SVG; un damero o un fondo blanco u oscuro detrás de la imagen.
La tarjeta en el código
Detenga el puntero sobre una ruta de imagen y la tarjeta se abre en la información rápida del editor. Muestra lo que hay en el archivo en el disco, tal como lo encontraría el proyecto: una ruta relativa desde la carpeta del archivo o desde el proyecto, una ruta raíz desde el proyecto (o wwwroot), un URI de paquete desde el proyecto de ese ensamblado.
| Parte | Qué muestra |
|---|---|
| Imagen | La imagen sobre un damero (la transparencia se ve), las imágenes pequeñas ampliadas con píxeles nítidos y las grandes ajustadas. Tres botones en la esquina cambian el fondo. |
| Indicador de tamaño | El tamaño en píxeles y, cuando la misma etiqueta establece Width o Height, el tamaño al que la muestra el código: 1600 × 1000 · mostrado al 20 %. Para un SVG: SVG · ajustado. |
| Datos | Nombre del archivo, tamaño en píxeles, tamaño del archivo, formato y PPP (cuando no es 96); para un SVG, la viewBox, el número de formas y si tiene degradados o texto; la ruta en la solución. |
| Acciones | Abrir (en Visual Studio), Abrir en la aplicación predeterminada, Mostrar en el Explorador de soluciones, Copiar ruta. |
Damero, blanco u oscuro
Un logotipo blanco sobre una tarjeta blanca desaparece. Los tres botones de la esquina superior derecha de la imagen alternan entre damero, blanco y oscuro; la elección se mantiene hasta que se cierra Visual Studio. El fondo con el que empieza una tarjeta es una opción.
Miniaturas delante de las rutas
Cada ruta cuyo archivo existe recibe delante una imagen diminuta, tan alta como la línea, como una muestra de color. Una lista de archivos de iconos se lee de un vistazo. Desactívelas para un editor más tranquilo.
Explorador de soluciones
Detenga el puntero sobre un archivo de imagen en el Explorador de soluciones: la tarjeta de ImageSmith se abre al lado en lugar de la vista previa integrada. Los SVG se dibujan (la vista previa integrada no muestra nada), un .ico muestra todos sus tamaños (la vista previa integrada muestra uno) y las variantes de escala de la imagen aparecen alineadas debajo.
La tarjeta permanece mientras el puntero está sobre el elemento o sobre la tarjeta, para que se pueda hacer clic en sus vínculos: aquí son Abrir, Abrir en la aplicación predeterminada, Copiar ruta y Copiar imagen. Se cierra al salir, al desplazarse, al pulsar una tecla o al hacer clic en el árbol.
Las carpetas, los archivos de código y todo lo que ImageSmith no muestra conservan la información sobre herramientas integrada. Si una actualización de Visual Studio cambia el Explorador de soluciones de forma que no se puede encontrar el elemento bajo el puntero, ImageSmith se hace a un lado.
Iconos (.ico)
Un archivo .ico contiene varias imágenes, una por tamaño. La tarjeta de un .ico las muestra todas una al lado de otra sobre el damero (los tamaños mayores de 128 px se muestran a 128) y una tabla con cada tamaño, sus colores, si está guardado como BMP o PNG, y sus bytes.
Haga clic en un tamaño (en la tira o en la tabla) para seleccionarlo. Copiar tamaño seleccionado pone esa imagen en el Portapapeles.
Guardar como PNG en una fila escribe ese tamaño en un archivo PNG; Guardar todos los tamaños como PNG… pide una carpeta y escribe un PNG por tamaño (contoso-16.png … contoso-256.png).
SVG
Los archivos SVG se dibujan (en la tarjeta en el código, en el Explorador de soluciones y en las miniaturas) con SharpVectors. Debajo de la imagen, la tarjeta la muestra a 16, 24, 32 y 48 px: tal como se verá en un botón de la barra de herramientas.
Los datos son la viewBox (o ancho × alto cuando no hay viewBox), el tamaño del archivo y el número de formas, con degradado y texto cuando el archivo los tiene. Un SVG que no se puede dibujar muestra la línea del error en lugar de una imagen.
Los archivos externos y las URL a los que hace referencia un SVG nunca se cargan.
GIF animado
Un GIF animado se reproduce en bucle en la tarjeta, y los datos indican cuántos fotogramas tiene y cuánto dura: GIF · animado, 8 fotogramas, 0,8 s. Un GIF de un solo fotograma permanece quieto. WebP, TIFF y BMP se muestran igual que PNG y JPEG.
Variantes de escala
Las imágenes suelen venir en varias escalas para pantallas con PPP altos. Cuando los archivos están uno junto a otro, la tarjeta los alinea debajo de la imagen, cada uno dibujado en proporción con su escala y su tamaño en píxeles (×2 · 64); el que se muestra aparece recuadrado. Una escala habitual que falta es un hueco discontinuo.
| Nomenclatura | Ejemplo | Hueco discontinuo si falta |
|---|---|---|
| Multiplicador (WinForms, diseñadores de informes) | 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 |
| Sufijo de tamaño | icon-16.png, icon-32.png, tent-480.jpg, tent-768.jpg | — |
Haga clic en una variante para verla en la misma tarjeta. La fila está en la tarjeta en el código y en el Explorador de soluciones.
Qué se reconoce
Una ruta se reconoce por la extensión de un archivo de imagen, en los lugares donde cada lenguaje nombra archivos:
| Dónde | Ejemplos |
|---|---|
| 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 y 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) |
| Archivos de proyecto | <ApplicationIcon>, <Resource Include="…">, <Content Include="…">, MAUI and appxmanifest images |
| .resx | Un ResXFileRef a una imagen y un valor de cadena simple que es una ruta de imagen. |
| Formatos | PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG |
Los URI de paquete a otro proyecto de la solución (/Contoso.Icons;component/Icons/save.svg, con o sin versión) se buscan en ese proyecto. ms-appx:/// también encuentra los archivos calificados de UWP y WinUI (Logo.scale-200.png para Logo.png); un logo.png de MAUI encuentra Resources/Images/logo.svg.
No se muestran, a propósito: las URL y los URI data:, los enlaces y los recursos ({Binding …}, {StaticResource …}), las cadenas interpoladas y las rutas construidas a partir de variables, las propiedades de MSBuild, los caracteres comodín, pack://siteoforigin: y los nombres de archivo sueltos en C# ("logo.png" podría ser cualquier cosa).
Sugerencias
Dos tipos de sugerencias, compartidos con la familia SmithWorks: cada texto empieza por ImageSmith:, su información sobre herramientas incluye No mostrar este tipo de sugerencia y, con LensSmith, la sugerencia también aparece al final de la línea.
| Sugerencia | Cuándo | Texto |
|---|---|---|
| Imagen no encontrada | Una ruta a una imagen que no está en el proyecto ni en el disco (una línea ondulada). No se comprueban las URL, las rutas con variables ni los nombres de archivo sueltos en el código. | ImageSmith: /Assets/banner-old.png is not in the project. |
| Icono sin los tamaños habituales | Un .ico de aplicación o del área de notificación sin 16, 32, 48 o 256 px (puntos grises): Windows escala otro tamaño y se ve borroso. No se comprueban los favicons. | ImageSmith: tray.ico has no 16 × 16 image — Windows will scale a larger one. |
Cada tipo se puede desactivar en Sugerencias en el editor en la configuración, o directamente desde la sugerencia.
Configuración
Herramientas › Opciones › SmithWorks › ImageSmith. Cada opción tiene una breve descripción de lo que hace.
| Opción | Predeterminado |
|---|---|
| Vista previa al pasar el puntero | activado |
| Tarjeta en el Explorador de soluciones | activado |
| Miniaturas delante de las rutas | activado |
| Fondo de la vista previa | Damero |
| Sugerencias: Imagen no encontrada | activado |
| Sugerencias: Icono sin los tamaños habituales | activado |
| Pedir una valoración en el Marketplace | activado |
La configuración se guarda en %LocalAppData%\ImageSmith. Restablecer valores predeterminados vuelve a activarlo todo.
Preguntas frecuentes
Detengo el puntero sobre una ruta y no se abre nada. ¿Por qué?
ImageSmith muestra una tarjeta solo para un archivo que encuentra en el disco. Compruebe que la ruta termina en una extensión de imagen y que no se construye a partir de variables, un enlace o una URL (esos nunca se muestran). Si falta el archivo, la ruta debería tener en su lugar una línea ondulada Imagen no encontrada. Los nombres de archivo sueltos en C# ("logo.png") se omiten a propósito: allí solo se leen rutas con una carpeta o un URI de paquete.
¿Por qué no aparece nada para avares://OtherAssembly/…?
Un URI avares:// o de paquete nombra un ensamblado. Cuando ese ensamblado es un proyecto de la solución abierta, ImageSmith busca en ese proyecto. Cuando procede de un paquete NuGet o de una DLL a la que se hace referencia, la imagen está compilada dentro y no es un archivo en el disco, así que no hay nada que mostrar, y ImageSmith tampoco la notifica como ausente.
Mi SVG tiene un espacio de nombres incorrecto o no lo tiene. ¿Se dibuja?
Sí. Los archivos guardados con xmlns="http://w3.org" o sin ningún espacio de nombres son habituales; ImageSmith pone el espacio de nombres SVG justo antes de dibujar, así que la tarjeta muestra la imagen. Aun así, los navegadores pueden rechazar un archivo así, por lo que vale la pena corregirlo.
La tarjeta dice que no puede dibujar este SVG. ¿Y ahora qué?
La tarjeta muestra la primera línea del error (por ejemplo, un error XML con su línea y columna). Corrija el archivo y vuelva a detener el puntero sobre la ruta: un archivo modificado se vuelve a leer.
¿Puedo conservar la vista previa integrada en el Explorador de soluciones?
Sí: desactive Tarjeta en el Explorador de soluciones en la configuración. La tarjeta en el código se mantiene.
¿Una imagen grande ralentiza el editor?
No. Las imágenes se descodifican en un subproceso en segundo plano y solo al tamaño que necesita la tarjeta; las miniaturas se descodifican en pequeño. Los archivos de más de 256 MB (SVG de más de 8 MB, ICO de más de 16 MB) muestran sus datos sin imagen.
¿ImageSmith envía algo a alguna parte?
No. Lee los archivos de imagen de su solución en su equipo y nada más: ni telemetría, ni solicitudes, y un SVG nunca carga nada de Internet.
¿Dónde informo de un problema o sugiero una característica?
Abra una incidencia en el repositorio Feedback de GitHub: hay formularios para errores, ideas y rutas que no se reconocen (cambie los nombres privados). También puede usar la pestaña Q&A en Marketplace.
Historial de cambios
1.1.0
- Un nuevo icono, dibujado en el estilo común de la familia SmithWorks.
1.0.0
- Primera versión: la tarjeta al pasar el puntero sobre rutas de imágenes en XAML, Razor y HTML, CSS, C#, JSON, archivos de proyecto y .resx; la tarjeta en el Explorador de soluciones con variantes de escala; SVG dibujados, todos los tamaños de un .ico, GIF animados; miniaturas delante de las rutas; las sugerencias Imagen no encontrada e Icono sin los tamaños habituales; una única petición de valoración.