src 속성이없는 Picturefill?

Question

Picturefill polyfill에 대한 초보자의 질문 :

src 속성을 사용할 때 Firefox (33) 및 Safari (7.1)에서 잠깐 깜박임을 느꼈습니다. 이 브라우저는 추가 HTTP 요청을합니다.

<img src="images/300x180-1.jpg" 
    alt="My alt text" 
    sizes="(min-width: 768px) 364px, 100vw" 
    srcset="images/364x220@2x-1.jpg 728w, images/364x220-1.jpg 364w" /> 

• 이 Picturefill 불필요한 이미지를 다운로드에서 브라우저를 방지 안 : 이것은 내 코드?
• src 속성을 삭제할 때의 단점이 있습니까? (JS가 해제 된 사용자 또는 네이티브 반응이없는 이미지가없는 브라우저에서 대체 텍스트 만 표시됨)
• 누락 된 src 속성은 SEO에 어떤 영향을 줍니까?

Answer 1

1. 크롬에서는 이미지 다운로드를 중단 할 수 있습니다 (즉, ff 또는 사파리가 아닌 경우). SRC없는 이미지가 사전로드 파서 볼 수 없습니다
2. 은 src 속성이 규격에서 요구하는 일반적인 이미지 마크 업에 대해

을 (이미 JS를 언급). 300과 364의 차이는 매우 작습니다. 실제로 그것이 큰 차이를 줄 것이라고 생각하지 마십시오. 그러나 당신이 그것을 지키고 싶다면, 브라우저가 그 속성을 알고 (화면이 매우 작거나 대역폭이 낮은 경우), 그 속성을 알고 (그래서 그것을 사용하여) srcset에 추가하는 것도 좋다.

<img src="images/300x180-1.jpg" 
    alt="My alt text" 
    sizes="(min-width: 768px) 364px, 100vw" 
    srcset="images/364x220@2x-1.jpg 728w, images/364x220-1.jpg 364w, images/300x180-1.jpg 300w" /> 

또한 IE에서 이미지 다운로드를 취소 할려고 및 사파리에서 소스를 변경하기 위해 조금 더 기다리는, respimage를 사용하려고 할 수 있습니다/(낮은 품질의 이미지 자리 표시 기술을 구현) 파이어 폭스. 또한 더 똑똑한 리소스 선택을 사용하여 대역폭을 절약하려고합니다.

Answer 2

누락 된 src 속성이 SEO에 미치는 영향은 무엇입니까? 구글의 Fetch as Google 도구 사용

테스트

, 기본적으로 구글이 인덱스 파일이 srcset 속성에서 참조되지는 않지만 Picturefill를 사용하는 경우, 그것은 이 인덱스에게 그들을 않는 것을 알 수있다. ` `태그를 사용하여 다른 것을 사용하거나 DOM로드 후 내용을 추가하지 않는 것보다 당신이 이미지를 필요로하지 않는 경우 내가 스택 교류 웹 마스터 here