11

나는 웹 사이트를 구축하고 있으며 더 나은 웹 사이트 속도와 검색 엔진 최적화를 위해 가능한 한 적은 HTTP 쿼리를 만들고 싶습니다. 방금 만든 페이지는 스크롤 할 때 이미지를 표시합니다 (이미지에는 사용자가 각 이미지에서 아래로 스크롤 할 때 src로 변환되는 속성 data-scr이 있음).

모든 이미지가 data-src대신 속성 이 있기 때문에 srcW3C는 오류를 표시합니다.

현재이 문제를 해결하기 위해 두 가지 옵션을 찾았습니다.

모든 이미지의 초기 src는 빈 1x1 이미지의 URL입니다.
모든 이미지의 초기 src는 데이터베이스 64 공백 이미지입니다.

빈 1x1 이미지의 URL을 사용하면 (tools.pingdom.com으로 테스트) 1 개의 HTTP 요청이 표시됩니다. 데이터베이스 base64 빈 이미지를 사용하면 페이지의 이미지 수만큼 요청이 표시됩니다.

웹 사이트 속도를 높이고 HTTP 요청을 줄이려면 더 효과적인 방법은 무엇입니까? (사용자가 14.4kbps 인터넷 속도-첫 번째 인터넷 속도로 웹 페이지를로드한다고 가정합니다).

그러나 SEO를 위해?

다른 옵션이 있습니까?

— MM PP
소스

8

"데이터베이스 64 빈 이미지를 사용하는 경우 페이지의 이미지 수만큼 요청을 표시합니다." -거기에 약간의 문제가 있습니까? data-URI를 사용하는 요점은 외부 HTTP 요청이 없다는 것입니다. (데이터 URI를 이해하지 못하는 사용자 에이전트 만 HTTP 요청을

— 실행할

빈 이미지가 1x1 픽셀보다 크면 (그렇습니다) 렌더링 속도가 빠르기 때문에 더 큰 배경 이미지 (10x10 px, 100x100 px)를 권장합니다 .

— totymedli

3

아무것도 사용하지 않습니까? data-src를 src로 변환하는 동시에 img 태그를 동적으로 만들 수 있습니다. data-src에 빈 이미지가있는 대신 이미지 목록을 저장하고 필요할 때 태그를 생성 할 수 있습니다.

— the_lotus

@Pharap은 브라우저가 이미지가 숨겨져 있어도 이미지를 다운로드하므로 작동하지 않습니다.

— DisgruntledGoat

컨텐츠를 전달하기 위해 선택하는 방법에 관계없이 png8로 인코딩하면 JPEG보다 빠를 것입니다.

— symcbean

12

base64 이미지 옵션은 매우 적은 수의 이미지 만 있고 서버에서 그림을 가져 오는 데 따른 네트워크 오버 헤드를 제거하려는 경우에 사용해야합니다. 그러나 당신이 질문에 나타내는 것에서 이것은 많은 수의 이미지로 확장 될 수 있다고 가정합니다. 이 경우 서버에서 한 번 가져오고 브라우저와 중간 프록시 서버에 캐시되므로 캐시 수명이 긴 서버에서 단일 1px x 1px 투명 이미지를 사용합니다.

예를 들어이 이미지의 크기는 약 95 바이트 ( https://commons.wikimedia.org/wiki/File:1x1.png )이며 base64로 인코딩 된 이미지 문자열의 경우이 이미지와 크기가 같습니다. 파일 크기이지만 추가하는 모든 단일 이미지에 대해 반복됩니다.

2-5 이미지의 경우 크기와 속도는 무시할 수 있고 한 번의 전체 가져 오기를 제거하여 서버 트래픽을 줄이지 만 페이지 크기가 너무 커지기 시작하면 로딩 시간과 SEO 순위에 영향을 미칩니다.

— 크리스 러더퍼드
소스

6

빈 base64 이미지는 55 바이트를 가질 수 있습니다 data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=. 이미지의 URL이 조금 더 긴 경우 (예 : example.com/templates/template-name/files/1x1.png ) HTTP 쿼리를 작성하지 않고 바이트 단위로 작으므로 base64 이미지가 권장됩니다. 이미지 URL (페이지의 각 이미지에 대해 반복됨) + 외부 이미지 크기보다

— NETCreator 호스팅

@ NETCreatorHosting-WebDesign 귀하의 의견에 감사드립니다. base64 이미지와 외부 이미지를 사용할 때 웹 사이트 크기를 비교했으며 base64 이미지를 사용할 때 크기가 더 작습니다. 페이지 당 약 40 개의 이미지를 사용하고 있습니다.

— MM PP

또는 웹 사이트 루트에 이미지를 업로드하고 상대 URL을 사용하면 웹 사이트가 훨씬 작아집니다.

— NETCreator 호스팅

3

gzip은 반복을 처리하므로 페이지에 400 개의 base-64로 인코딩 된 이미지가 있으면 400 개의 URL URL보다 더 많은 대역폭이 필요하지 않습니다.

— user2428118

3

@Aron 페이지 크기가 25.6MB (64 82 바이트 길이의 데이터 URI가 64kB 인 = 25,568,800 바이트) 인 경우 32.8kB의 base64 인코딩 이미지보다 걱정할 큰 문제가 있습니다.

— user2428118

5

IE <8에 대한 지원이 필요한 경우가 아니라면 데이터 URI를 사용하십시오 . ( 브라우저 지원 .)

작은 이미지를 HTML에 직접 포함하면 이미지를 직접 연결하는 것보다 더 많은 대역폭을 차지하는 것처럼 보이지만 gzip을 통해 증가를 완화 할 수 있습니다 . 페이지의 크기의 유일한 차이는 사이 길이의 차이에서 오는 것 하나 빈 이미지의 데이터 URI와 하나 개의 서버에있는 이미지의 URL입니다. 빈의 GIF는 43 바이트로 작게 할 수있다. 기본 64 인코딩, 82 바이트입니다. 500 바이트 이상의 HTTP 요청 보다 비슷한 크기의 응답 을 수행하는 방법은 없으며 TCP 패킷 크기 및 기타 오버 헤드를 고려하지도 않습니다.

기본 64 인코딩 된 43 바이트 GIF 이미지는 다음과 같습니다.

data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

SEO의 경우 Google 뉴스 와 같은 Google 사이트의 소스 코드를 살펴보고 data:image/gif,base64…

— 사용자 2428118
소스

이미지가 큽니다. 55 바이트 버전에 대해서는 위의 주석을 확인하십시오.

— Joshua

1

보고 된 테스트 (2014 년 5 월)의 StackOverflow에 대한이 답변 은 1px 이미지의 많은 수 (~ 1800)를 포함하는 것이 동일한 외부 이미지에 반복적으로 연결하는 것보다 상당히 느리다는 것을 보여줍니다 . 외부 이미지는 한 번 요청되고 캐시되지만 브라우저는 HTML 구문 분석 프로세스의 일부로 모든 데이터 URI를 별도로 디코딩해야합니다. 이는 병목 현상 인 것 같습니다. 이것은 데이터 URI가 적은 수의 (작은) 이미지로 제한되어야 함을 시사하는 것 같습니다.

— DocRoot

@Joshua 해당 이미지가 내 브라우저 (Firefox)에서 올바르게 표시되지만 다른 프로그램 (예 : 페인트)으로 열 수 없으므로 이미지를 사용하지 마십시오.

— user2428118

2

현재이 문제를 해결하기 위해 두 가지 옵션을 찾았습니다. 모든 이미지의 초기 src는 데이터베이스 64 빈 이미지입니다.

이 옵션은 최신 브라우저를 필요로 할뿐만 아니라 이미지를 생성하기 위해 브라우저가 이미지 데이터를 base-64 디코딩해야하기 때문에 클라이언트 측에서 느려질 수 있습니다.

모든 이미지의 초기 src는 빈 1x1 이미지의 URL입니다.

모든 이미지 슬롯의 빈 이미지 URL이 정확히 동일한 URL이고 HTTP 헤더 "cache-control"에 긴 캐시 수명이 정의되어 있으면 괜찮습니다. 이 문제는 새로운 이미지 파일이로드 될 때 이미지 사각형이 새로운 크기로 이동하여 사용자 경험을 멋지게 만들 수 없다는 것입니다.

거의 완벽한 아이디어는 이것입니다 ...

페이지가 시작되면 각 이미지를 수용 할 수있는 고정 크기 상자가있는 격자를 표시하십시오. 전체 그리드가 화면에 맞지 않으면 괜찮습니다. 그런 다음 HTML이로드 된 후 실행되는 javascript를 작성하고 해당 javascript에서 새 이미지 요소를 작성하여 그리드의 각 셀에 첨부 한 다음 이미지 소스를 올바른 이미지 파일로 설정하십시오. 첫 화면이 가득 찰 때까지이 작업을 수행하십시오. 그런 다음 자바 스크립트 내에서 스크롤을 감지 한 다음 스크롤이 발생하면 새 셀에 대해 위의 프로세스를 반복하십시오.

이제 최고를 원하고 품질이 큰 관심사가 아닌 경우, 내가 추천하는 것은 (내 사이트에서도 구현 한 것) 그리드를 구성하고 그리드의 배경 이미지가 정사각형 이미지로 서식이 지정된 모든 이미지의 스프라이트 시트. 이 방법은 모든 이미지에 대해 하나의 요청이 필요하므로 유연하고 빠르게로드 할 수 있습니다.

빠른 경로로 가고 싶을 때 사용할 템플릿 HTML은 다음과 같습니다. 두 번만 요청됩니다. HTML 코드와 하나의 이미지. 이 코드에서는 시트의 각 이미지가 너비 100 픽셀, 높이 200 픽셀이며 각 이미지가 간격없이 서로 나란히 정렬되어 있다고 가정합니다.

<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>

내 코드에는 3 개의 점이 추가되었습니다. 즉, 스프라이트 시트에 한 줄의 이미지 만있는 경우 숫자를 늘리고 매번 위치를 100 씩 늘려 이미지를 계속 추가 할 수 있습니다. 또한 Opera와 같은 일부 브라우저에서는 배경 위치 값 앞에 음수 부호를 추가해야 작동 할 수 있습니다.

— 마이크
소스

2

이미지의 크기가 기가 바이트가 아닌 한 이미지를 base64 디코딩하면 성능에 상당한 영향을 미치지 않습니다.

— user2428118

또한 컴퓨터 시스템에 따라 다릅니다. 클라이언트에 여전히 펜티엄 1과 같은 구식 컴퓨터가있는 경우 성능이 저하 될 수 있습니다.

— Mike

1

이미지는 유지 보수성이기 때문에.

내 경험상 이미지를 사용하는 것이 좋습니다. 이것은 실제 코드에서 더 분명하고 기억하기 쉽습니다. 나는 당신이 투명 이미지를 위해 인코딩 된 문자열을 기억할 것이라고 의심합니다. 그렇더라도 당신의 succesors / collegaes.
몇 주 후에이 코드로 돌아 오면 base64를 잊어 버린 것입니다.

이미지를 사용하는 경우 코드를 유지 관리하는 것이 쉽지만 최소한의 전문가는이 무게에 미치지 않습니다.

— 마틴
소스

많은 사람들이 스크립트를 사용하여 base-64 값을 생성하므로 OP가 웹 사이트의 코드를 나타 내기 위해 HTML 파일 세트 만 사용하지 않는 한 이러한 값을 기억해야 할 필요는 없습니다.

— Mike

1

~ 3 개의 추가 바이트, 0 개의 추가 http 요청 및 0 개의 추가 img src 길이 (또는 캐시되지 않은 데이터 이미지 자리 표시 자)는 어떻습니까? 이미지에 빈 src를 사용할 수 있습니까?

<img src data-src="banannanannas.jpg" />

그들이 가지고 있다면 alt태그를 사용하면 오류에서 사람들을 숨길 수 / 이미지를 실패 :

<img src data-src="banannanannas.jpg" onerror="this.alt=''" alt="some desc" />

표시 : 없음 alt 태그를 해킹하면 이미지 자리 표시 자 테두리에서 약간의 FOUC 지연이 발생합니다. 아마도 그것은 또한 청소할 수 있습니다.

— 다우 핀
소스

2

빈 src속성이 여전히 W3C Validator에서 오류를 발생 시키지만 (이것이 우려되는 것 같습니다).

— MrWhite

@ w3dk 그래, 짜증나지만 다시 현대화는 거의 없다.

— dhaupin

W3C 규칙을 전달하려면 404 오류를 반환하는 URL이더라도 src에 대해 무언가를 지정해야합니다. 또한 이미지의 너비 및 높이 속성 값을 지정하여로드 과정 중반에 팽창하는 작은 상자 대신 실제 자리 표시자를 처음 볼 수 있도록하는 것이 좋습니다.

— Mike

빈 이미지. 사용 대상 : Base64 vs 1x1 JPEG 이미지

이미지는 유지 보수성이기 때문에.