Twitter 부트 스트랩 및 이미지

Question

저는 부트 스트랩에 다소 익숙하지만 사이트 개발 및 CSS에 능숙합니다 ... 부트 스트랩이 다양한 뷰포트 크기에 맞게 최적화 된 이미지를 처리하는 방법에 대해 머리를 감싸는 데 어려움을 겪고 있습니다.

내 경험에 의하면, 내가보고있는 장치에 맞게 이미지를 최적화해야하고, 부트 스트랩에있는 모든 정보가 나를 믿어 의심치 않습니다. 단순히 하나의 큰 이미지를 사용하고 CSS를 사용하여 크기를 축소 (또는 위로)하는 것처럼 보입니다. 이는 모바일 장치가 풍부한 경험을 갖추고 있지만 더 작은 파일을 사용하여 속도를 최적화하려는 경우 직관력이 떨어집니다.

예를 들어, 레이아웃이 900px (~ 200k)라고 말하는 레이아웃으로 데스크톱에 이미지를 멋지게 표시하려면 해당 크기에 맞게 이미지를 최적화해야합니다. 레이아웃 너비가있는 휴대 전화의 경우 400px (~ 50k)에서 최적화 된 버전을 사용할 수 있습니다.

내 시스템에서 우리는 사용자 에이전트를 통해 사전 검색하고 컴파일하는 동안 적절한 이미지를 채 웁니다. 모든 정보를 부트 스트랩에 넣을 수 있다는 것을 알았지 만, 유사한 기능을위한 메커니즘, 나는 너무 많이 기대 했는가?

뷰포트 크기가 발견 될 때까지 부트 스트랩이 어떻게 페이지 내용의 이미지로드를 연기 할 수 있는지 알 수 없으므로 해당 크기에 최적화 된 올바른 파일이 활용됩니까? 내가 여기서 뭔가를 놓치고 있니?

---- 편집 난 당신이 뷰포트 크기에 따라 부트 스트랩 CSS에 이미지 경로를 정의 할 수 있습니다 확신 해요,하지만이 처음로드 할의 질문에 대답 넣은 사람은 아니다

?

---- 편집 십일 2014

참고로,이 질문은 아주 오래된 ... @media 쿼리는 별개의 파일 요청을 수행 할 것입니다,하지만 당신은 여전히 ​​각각의 크기로 개별 파일 중 하나가 필요합니다 또는 동적으로 생성하는 방법. 어느 쪽이든, 로딩은 모든 불일치에 대해 연기되므로 어느 정도 최적화되어 있습니다. 모바일 사용자의 경우 요청 시간에 사용자 에이전트를 식별하고 모바일 특정 파일/클래스를로드하는 데는 쓸모가 없으므로 상황을 느리게하는 데 도움이되므로 추가로 최적화하는 것이 여전히 유용합니다.

Answer 1

기본적으로 부트 스트랩은 CSS를 사용하여 이미지의 크기를 조절하므로 파일 크기가 적당하지 않습니다.

Adaptive Images은 좋은 옵션 중 하나이며, 화면 크기에 따라 다른 크기의 이미지를 제공합니다. 소급해서 추가하기가 쉽기 때문에 쉽게 작동하는지 확인하십시오.

다른 가능성도 있습니다. 미디어 쿼리를 사용하면 서로 다른 뷰포트에서 서로 다른 배경 이미지를 지정할 수 있습니다. 그러나 이미지가 많으면 약간 지저분 해집니다.

환상적으로 보이고 싶다면 http://responsejs.com은 기술적으로 잘 작동해야합니다.

물론 다른 옵션도 있습니다.

행운을 빈다.

편집 다른 프레임 워크를 사용하는 옵션 인 경우

, Zurb Foundation는 다른 뷰포트에서 다른 이미지를 지정할 수있는 새로운 교류의 구성 요소를 가지고있다. 아주 매끄럽다. 예 :

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]"> 
<!-- or your own queries --> 
<img data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))], [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]">