App이 아니라 mobile Web이다.
앱뿐만 아니라 모바일 웹에서도 retina display, amoled 같은 고밀도 화면을 위해서 이미지를 따로 준비해야겠더라.
그냥 PC용에서 알맞고 왜곡없이 나오던 로고 이미지 등이
고밀도 모바일 기기에서 보니까 좀 뿌옇게 나오는 느낌이 들어서 이미지들 모두 2배 정도 크기로 다시 만들어서
엘리먼트 width height는 그대로인데 이미지 소스 파일 크기만 크게해서 올려두고 브라우저에서 알아서 출력해주니까.
그렇게 출력하니 이제 깔끔하고 선명하게 나온다.
모바일 웹도 고밀도 배율 따라서 2x 3x 별도로 다 이미지 만들고 css나 srcset으로 설정하던데 이러면 뭔 이미지 하나하나 마다 매번 엄청 힘들거 같고
그냥 2배 정도로 이미지 준비해서 이걸 그냥 width height 절반 정도로 줄여서 내보내는 게 편해서 이러는데
예상되는 이러면 생길 수 있는 문제로는 이미지 파일이 100x100 크기인데 이걸 width 200, height 200으로 늘려서 출력하면 당연히 흐릿하게 나오겠지.
그런데 거꾸로 이미지 파일이 100x100 인데 이걸 w 50, h 50으로 줄여서 출력해도 랜더링하면서 나머지 절반을 버리든가 2개를 1개로 병합하든가 등등의 사용되는 알고리즘에 의해서 이미지 특정 부위가 깨져보이는듯하거나 원치않게 왜곡되어서 나올 수 있는 잠재적 문제가 있긴하지만
별로 안 중요하다면 고밀도 배율에 따라 같은 이미지를 해상도 별로 여러개 준비하는 것보다 대충 2배 정도 이미지 1개로 퉁치는 게 여러모로 편하겠지?
이미지서버 만들어다가 다이내믹하게 가져오면되자너
서술했듯이 고밀도 배율에 따라 이미지 해상도별로 여러개 준비하기 싫어서 2배 정도 크기 1개로 모든 디스플레이에 퉁치려고 함. 이미지 서버에서는 그냥 저 2배 비율 이미지 1개만 정적 호스팅하려고 함. 예를 들어서 동적으로 가장 큰 거 4배를 하나 올릴 때 3배, 2배,1.5배, 1배 이렇게 동적으로 해상도 변경해서 더 만들어 준다거나 하는 비용 원치 않음.
svg 이런 걸로는 안되겠지?
아이콘이나 로고 같은 것은 이게 요즘 트렌드에 가장 부합하지. 그런데 비트맵 사진 이미지같은 것을 써야하는 곳들은 백터를 쓸 수 없으니까.