इन चरणों को काम की checklist की तरह इस्तेमाल करें और इन्हें परियोजना के साक्ष्य, दायरे और सीमाओं के अनुसार ढालें।
व्यावहारिक चरण
- जिस page की जाँच करनी है, उसे और browser developer console खोलें। Mobile overflow checker के लिए पहले responsive mode इस्तेमाल करें।
- Code की समीक्षा करें, पूरा snippet console में paste करें और Enter दबाएँ। यह मौजूदा page पढ़ता है; केवल sitemap metadata tool और same-origin checkers सीमित requests भेजते हैं।
- Console output या डाउनलोड की गई CSV/JSON देखें। Browser policies, authentication और unsupported server methods के कारण कुछ जाँचें निर्णायक नतीजा नहीं दे सकतीं।
(() => {
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.');
})();चलाने से पहले review करें। यह मौजूदा page पढ़ती है; केवल sitemap और link audits सीमित same-origin requests भेजते हैं। Requests में cookies शामिल नहीं होते; script site content नहीं बदलती।