Image Sources and Formats

The External filter identifies images hosted outside the crawled site scope. SVG finds vector sources, and Data URI finds images embedded directly into markup or styles. These are classifications, not automatic problems.

Evaluate external sources

External image hosting and CDNs can improve delivery, but availability, caching, ownership, redirects, and crawler access still matter. Verify the source domain is controlled or reliable, uses HTTPS, and serves correct status and content-type headers. Google supports CDN-hosted images and recommends verifying a controlled CDN domain in Search Console where appropriate.

Understand SVG and data URIs

SVG works well for logos, icons, diagrams, and shapes that need resolution-independent scaling. Review accessible names for informative inline SVGs and sanitize untrusted SVG uploads because the format can contain active content.

Data URIs embed the asset in the containing resource:

<img src="data:image/svg+xml;base64,..." alt="Status icon" />

Inlining can avoid a separate request for a tiny asset, but increases HTML or CSS size, can reduce independent caching, and becomes inefficient for large or repeated images.

Analyze source and format choices

1. Group assets by role, size, reuse, and source domain.
2. Confirm external ownership, reliability, caching, and crawl access.
3. Inspect SVG accessibility and security context.
4. Find large or repeatedly embedded data URIs.
5. Compare delivered format, dimensions, quality, and browser support.
6. Measure actual page weight and request behavior before converting assets.

Screpy's format filters do not report every possible optimization. WebP and AVIF can be useful for raster images, but choose formats according to content, quality, compatibility, and delivery workflow rather than file extension alone.

Example decision

A tiny logo SVG used across the interface is appropriate and should remain. A 300 KB photo embedded as a data URI in every page's HTML prevents effective reuse; serve it as a cacheable responsive image instead. An external product CDN is acceptable when the organization controls it and crawlers can access stable URLs.

Verify the change

Inspect response headers, content type, caching, rendered quality, accessibility, and browser support. Test direct source access and recrawl. Compare transferred bytes and failures before and after rather than optimizing only the filter count.

Select formats by image purpose

Format choice depends on content, browser support, editing workflow, and delivery infrastructure. SVG is well suited to scalable logos, icons, and illustrations, but not every SVG is small or safe. Raster photographs usually benefit from modern compressed formats, while transparency and animation require additional consideration.

Data URIs remove a separate request but increase HTML or CSS size, cannot be cached as independent files, and can be duplicated across pages. They are most reasonable for very small, stable assets. External images can be valid when licensing, uptime, privacy, and performance are controlled.

Questions for each source type

Do not convert every SVG or external image simply to clear a filter. The report describes implementation choices; context determines whether they need action.

Interpreting distribution changes

A rise in SVG may reflect a design-system rollout. A rise in Data URI often comes from a bundler or email-oriented component leaking into web pages. A drop in External images may be positive after asset migration, but confirm that licensing and update responsibilities were transferred correctly.

After a format migration, compare visual quality, transfer size, cache headers, dimensions, and source-page coverage. Ensure old URLs do not become broken resources and that structured data or social previews reference crawlable images.

Google's image SEO best practices emphasize crawlable, contextual image resources. Screpy's source filters help you inventory the implementation before deciding what to migrate.

Related guidance

Return to the Images overview to compare source types with status, dimensions, and responsive delivery. MDN's image format guide explains browser support and the practical tradeoffs between common formats.