WordPress에서 깨진 이미지를 찾고 수정하는 방법

게시 됨: 2022-08-11

WordPress에서 깨진 이미지를 찾고 수정하는 방법 웹사이트에서 찢어진 그림처럼 보이는 이미지 아이콘을 본 적이 있을 것입니다. 그것은 깨진 이미지이며 교체하지 않으면 웹사이트에 부정적인 영향을 미칠 수 있습니다 .

이미지는 대부분의 웹사이트에서 중요합니다. 무엇보다도 페이지를 더 매력적으로 만들고 주요 정보를 전달하며 검색 엔진 순위를 향상시킵니다.

따라서 웹사이트에서 깨진 이미지를 발견하는 즉시 찾아 수정하는 것이 중요합니다. 이 가이드에서는 깨진 이미지가 무엇인지 설명하고 WordPress 사이트에서 이미지를 수정하는 방법을 보여줍니다.

내용물:

  • 깨진 이미지 란 무엇입니까?
  • 웹사이트에서 깨진 이미지 감지
  • 깨진 이미지 문제를 해결하는 방법
    • 잘못된 파일 경로
    • 파일 이름 교차 확인
    • 잘못된 파일 확장자
    • 상대 경로 사용
    • 이미지가 존재하는지 확인
    • 전송 문제
  • 결론

깨진 이미지 란 무엇입니까?

간단히 말해 깨진 이미지는 소스 링크를 사용할 수 없거나 손상된 이미지입니다 . 사용자가 사이트에서 깨진 이미지가 있는 섹션으로 스크롤하면 깨진 이미지 아이콘이 표시됩니다. 맞춤법이 틀린 URL, 부적절한 파일 경로 또는 더 이상 존재하지 않는 사이트에 연결되어 있기 때문일 수 있습니다.

깨진 아이콘 이미지

이것은 사용자 경험에 부정적인 영향을 미치기 때문에 중요한 문제입니다. 사용자가 사이트에서 누락된 이미지를 발견하면 경쟁업체를 위해 사이트를 떠나는 경향이 있습니다.

결과적으로 웹 사이트에서 이탈률이 증가합니다. 따라서 이러한 일이 발생하지 않도록 하려면 항상 사이트에서 깨진 이미지를 검색하고 수정하십시오. 다음 섹션에서 이를 수행하는 방법을 살펴보겠습니다.

웹사이트에서 깨진 이미지 감지

WordPress 웹사이트에서 깨진 이미지를 감지하는 가장 쉬운 방법은 플러그인을 사용하는 것입니다. 이러한 플러그인 중 하나는 Broken Link Checker입니다. 이 플러그인을 사용하면 사이트의 내부 및 외부 링크에 깨진 링크와 이미지가 있는지 검사할 수 있습니다.

깨진 링크 검사기 플러그인

플러그인을 설치하고 활성화한 후 설정 >> 링크 검사기 를 통해 플러그인 설정 페이지에 액세스할 수 있습니다.

끊어진 링크 검사기 옵션

Broken Link Checker 플러그인은 웹사이트에서 깨진 링크를 검색합니다. 문제가 있는 경우 여기에서 확인하거나 이메일로 알림을 받습니다.

검색 엔진이 깨진 링크를 따라가지 못하도록 방지

플러그인은 검색 엔진이 깨진 링크를 따라가지 못하도록 하는 옵션도 제공합니다 . 깨진 이미지가 SEO 순위에 영향을 미치지 않도록 이 옵션을 활성화할 수 있습니다.

깨진 이미지 수정

WordPress 웹사이트에서 이미지가 누락될 수 있는 몇 가지 시나리오가 있습니다. 이 섹션에서는 그 이유와 해결 방법에 대해 설명합니다.

잘못된 파일 경로

웹사이트에 이미지를 추가할 때 WordPress는 이미지의 위치를 ​​지정하는 파일 경로를 생성합니다. 웹 브라우저는 이미지 src 속성의 경로를 사용하여 이미지를 찾습니다. 이미지의 경로가 올바르지 않으면 이미지가 로드되지 않고 표시되지 않습니다.

이 문제를 해결하려면 깨진 이미지 아이콘이 있는 게시물이나 페이지를 찾아 새 이미지로 바꾸면 됩니다. 이를 위해 대시보드에 로그인하고 WordPress 게시물 페이지로 이동합니다. 그런 다음 깨진 이미지가 있는 게시물 위로 마우스를 가져간 다음 편집 을 선택합니다.

모든 게시물로 이동하여 게시물 이름 아래의 편집을 클릭합니다.

게시물 편집기에서 깨진 이미지가 있는 섹션으로 스크롤한 다음 이미지를 클릭하고 바꾸기 를 선택합니다. 미디어 라이브러리에서 이미지를 선택하거나 새 이미지를 업로드할 수 있습니다.

깨진 이미지를 클릭하고 바꾸기를 선택하십시오.

깨진 이미지를 교체한 후 업데이트 를 클릭하여 변경 사항을 저장합니다.

업데이트 버튼을 클릭하여 변경 사항 저장

클래식 편집기를 사용하는 경우 이미지를 클릭한 다음 펜 아이콘을 선택하여 깨진 이미지를 편집합니다.

펜 아이콘을 클릭합니다.

여기에서 바꾸기 버튼을 클릭한 다음 미디어 라이브러리에서 이미지를 선택합니다. 마지막으로 업데이트 를 클릭하여 이미지를 교체합니다.

미디어 라이브러리에서 바꾸기 버튼을 클릭합니다.

사용자 정의 HTML 이미지 교체

사용자 정의 HTML 또는 CSS를 사용하여 이미지를 추가한 경우 경로가 올바른지 확인해야 합니다. 이를 확인하려면 이미지를 추가한 위치를 확인해야 합니다. 추가 CSS 블록에 있을 수 있습니다. 이 경우 아래 단계를 따르십시오.

참고: 템플릿에서 이미지를 바꾸는 것은 기술적인 작업일 수 있습니다. WordPress를 처음 사용하는 경우 전문가의 도움을 받아 템플릿 문제를 해결할 수 있습니다.

먼저 WordPress 대시보드에 로그인한 다음 모양 >> 사용자 정의로 이동합니다.

wp 커스터마이저로 이동

그런 다음 추가 CSS 블록 또는 사용자 정의 CSS 메뉴를 선택합니다.

사용자 정의 CSS 메뉴 선택

코드 편집기에서 이미지가 추가된 코드 줄을 찾고 이미지 경로를 강조 표시합니다. 그런 다음 마우스 오른쪽 버튼을 클릭한 다음 Go to path-to-file ...을 선택합니다.

Go-to-path-to-file 선택

이미지를 사용할 수 없는 경우 404 찾을 수 없음 오류가 발생합니다. 이미지를 웹사이트에 다시 업로드한 다음 파일에 대한 링크를 복사하여 여기에 붙여넣기만 하면 됩니다.

404 오류 페이지

이미지를 업로드하려면 미디어 >> 새로 추가 로 이동합니다. 그런 다음 파일 선택 을 클릭한 다음 이미지 파일을 선택합니다. 업로드가 완료되면 클립보드에 URL 복사 버튼을 클릭합니다.

이미지 업로드 후 url에 복사

이제 사용자 정의 페이지로 돌아가서 깨진 이미지 링크를 방금 업로드한 링크로 교체하십시오. 마지막으로 게시 를 클릭하여 변경 사항을 저장합니다.

깨진 이미지 링크를 교체한 다음 게시를 클릭합니다.

파일 이름 교차 확인

이것은 이미지 로딩 문제의 일반적인 원인입니다. 이미지의 철자가 미디어 라이브러리의 철자와 동일한지 확인하십시오. 실수는 다른 특수 문자만큼 작을 수도 있습니다. 대시(-) 대신 밑줄(_)을 입력하면 이미지가 깨질 수 있습니다.

이 문제를 해결하려면 게시물이나 페이지의 파일 이름을 미디어 라이브러리의 원본 이미지와 비교해야 합니다. 이를 위해 WordPress 대시보드에 로그인한 다음 미디어 >> 라이브러리 로 이동합니다.

워드프레스 미디어 라이브러리

이제 검색 상자를 사용하여 비교하려는 이미지를 찾으십시오. 그런 다음 이미지 위로 마우스를 가져간 다음 보기 를 선택합니다.

주소 표시줄에 이미지의 경로가 표시됩니다. 강조 표시된 부분은 아래와 같이 이미지의 이름입니다.

이미지 파일 경로

이제 깨진 이미지가 있는 게시물로 이동하여 파일 이름도 확인하십시오. 이를 위해 브라우저에서 페이지를 연 다음 깨진 이미지를 마우스 오른쪽 버튼으로 클릭 하고 새 탭에서 이미지 열기 를 선택합니다.

새 탭에서 이미지 열기 선택

두 파일 이름이 일치하지 않는 경우 이미지가 표시되지 않는 원인일 수 있습니다. 404 찾을 수 없음 오류가 표시됩니다.

404 찾을 수 없음 오류

이 문제를 해결하려면 깨진 이미지가 있는 게시물을 편집하고 잘못된 파일 이름을 미디어 라이브러리에 있는 이름으로 바꿔야 합니다.

잘못된 파일 이름 바꾸기

파일 이름을 수정한 후 게시물 편집기에 표시된 이미지를 볼 수 있습니다. 그렇지 않은 경우 이미지를 다시 업로드하여 게시물에 추가할 수 있습니다. 변경 사항을 저장하려면 게시물을 업데이트해야 합니다.

잘못된 파일 확장자

파일 확장자도 확인해야 합니다. 경우에 따라 파일 이름의 철자가 올바르지만 파일 확장자가 올바르지 않을 수 있습니다. 예를 들어 이미지를 .jpg 파일로 업로드할 수 있지만 코드에서는 .png 확장자입니다. 문제가 발생할 수 있습니다.

또 다른 일반적인 문제는 "jpg" 및 "jpeg" 이미지 확장자에서 발생합니다. 두 형식 모두 동일하지만 서로 교환하면 이미지가 깨져 오류가 발생할 수 있습니다.

상대 파일 경로 사용

상대 경로는 홈페이지 URL과 관련하여 파일에 연결됩니다. 워드프레스에서 상대 경로는 도메인 이름을 빼고 도메인 뒤의 경로만 사용합니다.

따라서 "src" 속성에서 "https://example.com/wp-content/uploads/image.png" 대신 소스가 "/wp-content/uploads/image.png" 가 됩니다. 그리고 귀하의 이미지는 짧은 링크와 함께 잘 작동합니다.

상대 경로를 사용하는 이점 중 하나는 도메인 이름을 변경하더라도 이미지가 작동한다는 것입니다. 파일이 여전히 동일한 서버에서 호스팅되는 한 마찬가지입니다.

Make Paths Relative 플러그인과 같은 플러그인을 사용하여 WordPress가 미디어 파일에 대해 상대 경로를 사용하도록 할 수 있습니다. 플러그인은 설치 및 설정이 쉽습니다.

경로 상대 플러그인 만들기

플러그인을 설치하고 활성화한 후 경로를 상대적으로 만들기 >> 설정 으로 이동하여 플러그인 설정 페이지를 엽니다.

경로를 상대적으로 설정

여기에서 이미지의 상대 경로를 활성화하는 옵션을 선택한 다음 변경 사항 저장을 클릭하여 변경 사항 을 등록하십시오. 이제 상대 경로를 사용하여 페이지에 이미지를 표시할 수 있습니다.

이미지가 존재하는지 확인

다른 웹사이트에서 호스팅되는 이미지에 링크했을 수 있습니다. 해당 사이트가 다운되거나 다른 서버로 재배치되면 이미지가 더 이상 존재하지 않습니다.

또한 다른 사이트에 직접 연결하면 이미지를 가져오는 사이트의 서버 사용량이 늘어납니다. 호스트 웹사이트가 핫링크를 비활성화하면 이미지가 표시되지 않습니다.

이러한 일이 발생하지 않도록 하려면 페이지에 이미지를 추가하기 전에 모든 이미지를 웹사이트에 업로드하는 것이 가장 좋습니다. 또한 사용 권한이 있는 경우를 제외하고 타사 웹사이트의 이미지를 사용하지 마십시오.

전송 문제

이것은 일반적인 문제는 아니지만 발생합니다. 때로는 서버가 과부하되어 요청 시간이 초과되기 전에 모든 페이지 자산을 충분히 빠르게 로드할 수 없습니다.

주로 저렴한 웹 서버에서 발생합니다. 이를 해결하려면 서버의 용량을 업그레이드하거나 안정적인 웹 호스트로 마이그레이션해야 합니다.

플러그인을 사용하여 이미지에 대한 지연 로드를 활성화할 수도 있습니다. 활성화하면 사용자가 섹션으로 스크롤할 때만 서버에서 이미지를 로드합니다. 이렇게 하면 서버 리소스가 확보되고 웹사이트 속도도 빨라집니다. 속도 최적화 가이드 에서 이에 대해 자세히 알아볼 수 있습니다.

요약 – 깨진 이미지 수정

웹사이트에서 이미지가 깨지거나 누락되는 문제는 드문 일이 아니지만 즉시 처리해야 하는 상당히 심각한 문제입니다. 온라인 상점이 있는 경우 사용자가 상점에서 제품 이미지를 볼 수 없으면 잠재 고객을 잃을 수 있습니다.

이 가이드에서는 깨진 이미지의 몇 가지 원인과 WordPress 웹사이트에서 이미지를 수정하는 방법에 대한 팁을 설명했습니다.

깨진 이미지를 수정하는 것은 웹사이트에서 이탈률을 줄이는 한 가지 방법입니다. 또한 사이트의 성능을 향상시키려면 이미지를 최적화해야 합니다. 이에 대한 자세한 자습서는 이미지 최적화 가이드를 확인하세요.