Nutze diese Schritte als Arbeitsliste und passe sie an Belege, Umfang und Einschränkungen des Projekts an.
Praktische Hinweise
- Öffne die zu prüfende Seite und die Entwicklerkonsole des Browsers. Aktiviere für die Prüfung mobiler Überläufe zuerst die responsive Ansicht.
- Prüfe den Code, füge das vollständige Skript in die Konsole ein und drücke Enter. Es liest die aktuelle Seite; nur Sitemap-Audit und Linkprüfungen senden begrenzte Anfragen an denselben Ursprung.
- Prüfe die Konsolenausgabe oder die heruntergeladene CSV/JSON-Datei. Browserrichtlinien, Anmeldung und nicht unterstützte Servermethoden können Ergebnisse uneindeutig machen.
(() => {
const MAX_IMAGES = 5000;
const imageCount = document.images.length;
const images = Array.from({ length: Math.min(imageCount, MAX_IMAGES) }, (_, index) => document.images[index]).map((img) => {
const rect = img.getBoundingClientRect();
return {
src: img.currentSrc || img.src,
alt: img.hasAttribute('alt') ? img.alt : '[missing alt attribute]',
altAttribute: img.hasAttribute('alt') ? 'present' : 'missing',
naturalSize: img.naturalWidth + 'x' + img.naturalHeight,
renderedSize: Math.round(rect.width) + 'x' + Math.round(rect.height),
widthAttribute: img.hasAttribute('width') ? img.getAttribute('width') : '',
heightAttribute: img.hasAttribute('height') ? img.getAttribute('height') : '',
loading: img.loading || '',
loadState: !img.getAttribute('src') && !img.getAttribute('srcset') ? 'no source' : !img.complete ? img.loading === 'lazy' ? 'lazy: not loaded yet' : 'loading' : img.naturalWidth > 0 ? 'loaded' : 'failed',
excessPixelResolution: rect.width > 0 && img.naturalWidth > rect.width * devicePixelRatio * 2,
};
});
console.table(images);
const quote = (value) => '"' + String(value).replace(/[\u0000-\u0020]*[=+\-@]/, (match) => "'" + match).replace(/"/g, '""') + '"';
const rows = [['src', 'alt', 'alt attribute', 'natural size', 'rendered size', 'width', 'height', 'loading', 'load state', 'excess pixel resolution'], ...images.map((img) => [img.src, img.alt, img.altAttribute, img.naturalSize, img.renderedSize, img.widthAttribute, img.heightAttribute, img.loading, img.loadState, img.excessPixelResolution])];
const a = document.createElement('a');
a.href = URL.createObjectURL(new Blob(['\uFEFF' + rows.map((row) => row.map(quote).join(',')).join('\r\n')], { type: 'text/csv;charset=utf-8' }));
a.download = 'page-images.csv'; a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 1000);
console.info('Images found:', images.length, '· missing alt:', images.filter((img) => img.altAttribute === 'missing').length, '· failed:', images.filter((img) => img.loadState === 'failed').length, '· lazy and not loaded yet:', images.filter((img) => img.loadState === 'lazy: not loaded yet').length);
if (imageCount > MAX_IMAGES) console.warn('Only the first ' + MAX_IMAGES + ' of ' + imageCount + ' images were checked.');
})();Prüfe den Code vor der Ausführung. Er liest die aktuelle Seite; nur Sitemap- und Linkprüfungen senden begrenzte Anfragen an denselben Ursprung ohne Cookies. Website-Inhalte werden nicht geändert.