이미지 로드 실패 시 표시를 점검하고 대체 이미지나 의미 있는 자리 표시자 구현을 돕습니다. 오류 로그, 로딩 중 표시와 수정 결과의 검증 방법도 다룹니다.
Use when reviewing image assets, markup, and CDN or build transforms related to Handle image loading errors gracefully. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
이미지 로드에 실패했을 때 깨진 이미지 아이콘만 남지 않도록 대체 표시의 점검과 구현을 돕습니다. onerror로 대체 이미지로 전환하거나 의미 있는 자리 표시자를 보여 주는 방식을 다룹니다. 로딩 중 임시 틀을 표시하는 스켈레톤의 사용 여부와 모니터링 및 원인 조사에 쓰는 이미지 오류 로그 기록도 확인합니다.
이미지 링크가 끊어진 페이지나 로드 실패 시의 화면 표시를 정비하려는 경우에 유용합니다. 이미지 파일, HTML, 배포 설정을 살펴보고 문제가 있는 파일이나 화면 구성 요소를 구체적으로 짚습니다. 이미지 데이터 크기, 표시 크기와 로딩 전략을 함께 확인하며, 페이지를 연 직후 보이는 영역에 미치는 영향도 검토합니다.
특별한 주의 사항은 없습니다.
이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.
AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.
총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 23일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Broken image icons look unprofessional and confuse users—graceful fallbacks maintain visual consistency and user trust when images fail to load.
Check if the website handles broken images gracefully with fallback images or error states.
Implement fallback images or placeholder content for broken image scenarios.
Explain how proper error handling for images improves user experience.
Review image assets, markup, and delivery configuration related to Handle image loading errors gracefully. Flag exact files or components where format choice, sizing, or loading behavior violates the rule, and describe how to confirm the fix in DevTools.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/images/error-images
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Create and review custom 404 pages that help visitors recover from broken or moved links through search and navigation. Check the rendered page and HTTP response so missing content returns a proper 404 status.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Audit or create a dedicated About page that explains a website’s purpose and identifies its people or organization. Review the rendered output and supporting information, including expertise and contact details, to find gaps.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Review and add automated accessibility checks for components, pages, and continuous integration workflows. Use axe-based tools to detect structural and attribute issues, while identifying checks that still need keyboard or screen reader testing.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Review sign-in, registration, multi-factor authentication, and account recovery for accessibility barriers. Find blocked paste, difficult code entry, and inaccessible backup methods, then suggest authentication paths that support password managers, autofill, or device approval.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Review form errors, success messages, and live updates so screen reader users receive important notifications. Check the HTML delivered to the browser, announcement settings, display duration, and dismissal controls, then identify specific elements that need changes.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Review HTML tables so screen reader users can understand how headers and data relate. Check header markup, table descriptions, and merged cells, then identify specific fixes and ways to verify them.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.