CarrierWave에 표시할 이미지 크기를 고려한 주석

이것은 무엇입니까?

나는 연습 중에 이미지를 처리하는 프로그램을 만들었다.그때는 예전부터 해상도와 이미지의 관계에 대해 잘 조사하고 싶었던 노트였어요.

실제 설치할 때의 비계로만 정리했기 때문에 코드를 거의 쓰지 않았다.참고 보도를 총결한 노트에 머물렀다.

컴퓨터보다 스마트폰이 더 큰 이미지를 만들어야 하는 이유

풀 HD(1920x1080px)...일반 사무실에서 사용하는 컴퓨터 이미지 크기.13인치 노트북이라면 해상도가 이보다 작을 때도 있다.

4K(3840 x 2160px)... 풀 HD 해상도의 4배동일한 화면 크기에도 풀 HD의 4배 픽셀 밀도

참조: 4K TV는 2K와 8K, HD와 풀 HD는 어떻게 다릅니까?iPhone 6plus(2014년 발매) 때 풀 고화질로 대응했고 Retina 모니터라는 모니터를 사용하면 같은 사이즈의 모니터라도 두 배의 해상도로 이미지를 표시할 수 있다.iPhone가 아니더라도 4K와 그에 상응하는 고해상도 스마트폰은 드물지 않다.
참고 자료:
스마트폰 시대에 가장 적합한 이미지 사이즈와 새로운 상식

해상도가 높은 모니터의 경우 같은 크기의 이미지가 흐려짐

예를 들어, 브라우저에 100x100px 이미지를 표시할 때

size: '100x100'

의 규격화 거리의 멱 함수.

대책

그림% 1개의 캡션을 편집했습니다.

size: '100x100'

에서 설명한 대로 해당 매개변수의 값을 수정합니다.
그러나 이럴 경우 통상적인 해상도 디스플레이를 이용하면 페이지가 불필요하게 무거워진다는 것은 부인할 수 없다.
그래서

<img src="img/photo01.jpg" srcset="img/photo01.jpg 1x,img/photo02.jpg 2x" alt="sample photo">

이렇게 모니터의 해상도에 따라 iPhone 속성을 바꾸는 이미지의 쓰기 방법도 있다.
여기에서 코드의 의미에 대한 상세한 설명은 참고할 수 있는 이 기사에 양보하고 싶습니다.
Retina 모니터에서 블로그 및 웹 사이트 이미지를 흐리지 않는 방법

Carrier Wave 이미지 표시에 가장 적합한 해상도?

그러나 srcset 이미지 크기 조정 옵션은 몇 가지 있습니다.사용 빈도가 높은 것은 CarrierWave 과 resize_to_fit 입니까?
이번에 제작된 응용 프로그램의 규격은 화면에 400x400px로 표시되며, 실제 디스플레이를 고려하면 800x800px로 이미지를 만들고 화면에 400x400px로 표시하는 것이 좋다.
더 나아가 resize_to_fill 속성으로 표시된 이미지를 분리하는 것이 좋다.
이번에는 연습용 앱이라 더 이상 설치하지 않았습니다
Rails에 srcset 속성을 사용하여 이미지를 출력하는 처리를 쓴 사람도 있기 때문에 실제로 같은 프로그램을 만드는 사람이 있다면 여기를 참조하고 싶습니다.
image_tag에서 srcset 속성을 사용할 때 Tips(carrierwave)

추억: 단순한 2배가 아니었으면 좋겠어요.

이후 "단순한 2배가 아니다"라는 지적과 함께 아래의 링크를 받았기 때문에 잊지 않기 위해 붙였다.
"응, 초상화를 전부 2배로 만들면 되겠지?"졸업하세요