이제 webp를 써야 하는 이유와 품질 > 개발관련
개발관련

이제 webp를 써야 하는 이유와 품질

조회 496회 댓글 0건
  • 현재 페이지 주소 복사
  • 페이스북으로 공유
  • X 로  공유
  • 트위터로  공유
  • 네이버 블로그로 공유
  • 네이버 카페 공유하기
  • 네이버 라인 공유하기
  • 네이버 밴드 공유하기
  • 링크드인으로 공유하기
  • 핀터레스트에 공유하기

써도 되는 이유는 웹브라우저는 대체로 크롬계열과 파이어폭스 모두 지원을 한지 오래되었고 webp 또한 이제 많이 알려져 있어 거의 대부분의 프로그램에서 지원을 하고 있습니다. 만약 지원을 하고 있지 않다면 업그레이드가 최소 몇년 동안은 이뤄지지 않고 있거나 심각한 문제의 회사일 가능성이 높습니다.


* webp의 특징은

  - webp는 png와 jpg를 혼용한 것이라 생각해도 좋습니다.

  - png보다 적은 용량을 가집니다.

  - jpg보다 적은 용량을 가집니다.


아래는 같은 이미지에 대한 용량을 볼 수 있습니다.

-rw-r--r-- 1 root root  89838  5월 14 07:45 1.jpg

-rw-r--r-- 1 1024 users 18217  5월 12 22:19 1.png

-rw-r--r-- 1 root root  15590  5월 14 07:48 1.webp


-rw-r--r-- 1 root root  91490  5월 14 07:45 2.jpg

-rw-r--r-- 1 1024 users 18198  5월 12 22:19 2.png

-rw-r--r-- 1 root root  15382  5월 14 07:48 2.webp


-rw-r--r-- 1 root root  79367  5월 14 07:45 3.jpg

-rw-r--r-- 1 1024 users 13712  5월 12 22:19 3.png

-rw-r--r-- 1 root root  11136  5월 14 07:48 3.webp



 

용량 차이를 확인하게 알 수 있습니다. 트루컬러의 jpg 같은 경우 통상 20% 전후로 더 좋은 성능을 나타냅니다.

이미지의 품질에 있어서는 미세하게 차이가 있기는 하지만 쉽게 알아보기 힘들며 webp도 옵션에 따른 품질을 주는 방법을 가지고 있습니다.


혹시 jpg가 항상 압축율이 png 보다 좋다고 생각할 수 있는데 그렇지 않습니다. 일러스터 같은 단색 이미지의 경우는 jpg보다 png가 더 적은 용량을 차지 합니다.

트루컬러의 경우는 jpg가 용량을 더 작게 가져갑니다.

webp는 이 두가지의 특성을 모두 가지고 있어 적은 용량으로 서비스가 가능하여 큰 잇점 있습니다.




  • 현재 페이지 주소 복사
  • 페이스북으로 공유
  • X 로  공유
  • 트위터로  공유
  • 네이버 블로그로 공유
  • 네이버 카페 공유하기
  • 네이버 라인 공유하기
  • 네이버 밴드 공유하기
  • 링크드인으로 공유하기
  • 핀터레스트에 공유하기
전체 231건 1 페이지
  • profile_image 코드자동완성 테스트한 vscode용 확장 프로그램 continue 다운로드 사용자가 엄청나게 많은데 ... 결론 부터 말하면 실패입니다. 아래 설정이 약간 잘못 되었을수 있겠지만.채팅은 잘 되는데 코드 자동완성이 잘 안됩니다.하지만 테스트 하고 싶은분 그리고 제가 나중에 다시 테스트 해볼 경우 필요할 수 있어 올리는 글입니다. 위 이미지에서 Main Config 라고 마우스 올리면 그 옆에 톱니가 나오는데 그걸 클릭해야 합니다.잘못 만들어져서 화면이 겹치는 문제가 있습니다.제 설정은 위 이미지에 대한것은 아래와 같습니다.name: lmstudioversion: 1.0.0schema: v1models:&…
  • profile_image 내가 준 먹이를 소화해서 다른 사용자에게 주면 곤란한 문제가 생길것 같아 직접 이용해 보기로 했습니다.결론 부터 말하면 잘하는 인공두뇌에 먹이 주면서 사용하는것이 낳으니 테스트 해보고 싶으신 분들을 위해서 남기는 글 입니다.사용한 확장 프로그램    twinny - AI Code Completion and Chat    Identifier: rjmacarthy.twinny 위처럼 설정하고 자신에 맞게 모델이나 IP주소 같은것만 변경해주면 됩니다.전 UI가 좋은 LM스튜디오 사용.이걸 빠르게 사용하려면 애플 실리콘 M5 Max 노트북 16인치 추천합니다.램은 최소 64G 가능하…
  • profile_image 무슨일인지 업그레이드 실패까지 생겼는데.... 왠지 모르지만 안되는게 참 많습니다.이런 경우 다시 설치하면 되긴 합니다.아마도 추측은 초기 설치 할 때 전체 사용자 선택을 해서 설치 했는데 업그레이드는 현재 유저 기준으로 해서 그런것이 아닌가 싶습니다. old 라고 된것 삭제 삭제하고new_ 이렇게된것 new_ 삭제하고 다시 실행하고 vscode에서 Help > Check for Updates 해주고 다시 시작하면 됩니다.이때 작업표시줄에 고정한게 있으면 그것 클릭하지 말고(삭제하고) 새로 설치된 아이콘 클릭해서 실행 하면됩니다.
  • profile_image vscode 사용하면 안되는것이 참 많지요.잘 되던것도 안되고 무료가 이런게 문제인데... 유료로 갈아 타려 했는데 매달 비용발생 때문에 ...어떤 것은 그것을 또 배워야 되서 할일도 못하는데 공부해야 되고 ...우선 그때 그때 수정해서 사용합니다.▷ 파일이 열리지 않는 원인은?natizyskunk SFTP 확장(1.16.3)에 내장된 구버전 ssh2 라이브러리가 Node.js의 util 모듈에서 isDate 함수를 가져다 쓰는데최신 VS Code 1.123.0이 이전에 제공되던 'isDate' 함수를 제거하면서 잘 작동하던 프로그램에 문제가 발생그래서 SFTP 연결(목록 조회)은 되지만 실제로 파일을 열거나 다운로드할…
  • profile_image 기본적인 특징은 아래와 같으며 사용 가능한지 어떤지 테스트 하면서 정리(테스트) 한것을 다음에 필요 할 수 있어 기록해 둡니다.이 파일 디비는 동시 처리하는데 문제가 있어 동시 처리 사용하고 싶으면 MySQL 같은 것 사용해야 됩니다.이게 MySQL과 명령이 비슷한것인가요? ANSI SQL 이라서 그런가요? 후자 인데요.SQL 문법은 ANSI SQL 나머지 CLI 도구 명령들은 각 DBMS에 따라 다른 경우라고 보면 됨.  - 파일 하나가 곧 데이터베이스 (.db, .sqlite). 그렇기 때문에 DBMS서버 필요 없는 경우 유용함.- 서버 없이 동작하는 경량 임베디드 RDBMS- Android, iO…
  • profile_image 하네스 엔지니어링 결론부터 말하면 개발 기획자는 별도로 할것 없이 기존에 하던데로 그냥 하면 됩니다.이것, 저것, 문제가많네~ 이런식으로 특정하지 않는 형태로 이쁘게 만들어줘 하는 방식이 문제가 있는것으로 이렇게 언급하는 방식은 현재 사람도 의도 파악을 정확히 모르기 때문에 원하는 결과가 나오지 않습니다.문제가 많아 - 어떤 문제가 많은지 구첵적으로 알려 줘야 해결 가능.이렇게 해석해도 큰 무리가 없는것으로 어떤 문제가 있는지 명확하게 알려줘야 개선이 되고 같은 문제가 생기지 않습니다. 예를 들면.1) 상태값 기록을 위해서 테이블에 시간과 현재 상태 기록해서 체크하는것을 만들어 달라고 했더니 만들긴 잘 만들었습…
  • profile_image 이건 백엔드는 데이터베이스등 서버개발이 유용한 측면들이 많죠.테스트 서버에서 작업하고 git으로 올리는 방법도 있고 git은 백업용도로만 사용하고 다중서버에 직접 올리는 방법도 있습니다.로컬의 편리한 UI + 서버의 강력한 자원 및 환경이 두 가지 토끼를 모두 잡을 수 있는 기능으로 저사양 노트북을 사용하더라도 강력한 클라우드 서버에 연결만 되어 있다면 그 서버의 성능을 내 것처럼 활용할 수 있게 됩니다.사용해 보시면 이런 좋은것을 이제 알았다니 할것입니다. 1. 로컬 환경과의 완벽한 분리 (Clean Local Machine)가장 큰 장점은 내 컴퓨터에 아무것도 설치할 필요가 없다는 것입니다.- 의존성 관리:…

상업적 이용 금지. 컨텐츠는 개인 용도로만 사용이 가능 합니다.