Các bước thực tế
Mở trang cần kiểm tra và bảng điều khiển dành cho nhà phát triển của trình duyệt. Với công cụ kiểm tra tràn trên di động, trước tiên hãy bật chế độ responsive.
Xem xét mã, dán toàn bộ đoạn script vào console rồi nhấn Enter. Script đọc trang hiện tại; chỉ công cụ kiểm tra metadata sitemap và các bộ kiểm tra cùng origin mới gửi request có giới hạn.
Xem kết quả trong console hoặc CSV/JSON tải xuống. Chính sách trình duyệt, trạng thái xác thực và phương thức máy chủ không được hỗ trợ có thể khiến một số phép kiểm tra chưa kết luận được.
Script dành cho console của trình duyệt
Xem xét trước khi chạy. Script đọc trang hiện tại; chỉ các lần kiểm tra sitemap và liên kết mới gửi request cùng origin có giới hạn. Request không gửi cookie; script không thay đổi nội dung website.
(() => {
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.');
})();