interactive_design/web_design

웹사이트 디자인을 위한 이미지최적화 & 화일 포맷

jisunlee 2020. 11. 25. 21:45

https://help.behance.net/hc/en-us/articles/204484614-Guide-Formatting-Images-For-Display-On-Behance


비핸스 사이트에서 제공하는 이미지 업로드에 대한 가이드 페이지 입니다. 


중요사항 1! 한페이지에 전체 들어가는 이미지를 50M로 제한해 주세요. 이 이상이되면 페이지가 로딩되지 않거나 에러가 발생됩니다. 물론 더 적은 용량의 이미지 페이지가 빨리 뜨게 됩니다. 


" 3초 안에 콘텐츠를 불러오지 않으면 모바일 사용자의 53%는 사이트를 닫습니다."


중요사항2! 한 개의 이미지가 1M가 넘지 않도록 해주세요. 이런 경우 비핸스 업로드시 에러가 발생할수 있다고 합니다. (에러가 발생하지 않으면 그냥 업로드해도된다는…)




이미지를 그냥 저장하는 것이 아닌 이미지 성격에 맞게 이미지 압축 포맷을 선택해서 사용해야 합니다. 


https://dydtjr1128.github.io/image/2019/07/01/Image-compression.html


https://freaking.tistory.com/359




포토샵의 파일 메뉴아래의 다른이름으로 저장하기의 웹용으로저장(레거시)…를 이용하면 다양한 포맷의 저장 방법을 효율적으로 선택할 수 있습니다. 


https://m.blog.naver.com/PostView.nhn?blogId=marketoong&logNo=221338022343&categoryNo=0&proxyReferer=https:%2F%2Fwww.google.com%2F




에펙으로 작업한경우 gif로 포토샵에서 변환 가능합니다. gif의 프레임 수를 줄여서 용량을 작게 할수 있습니다. 


https://m.blog.naver.com/PostView.nhn?blogId=marketoong&logNo=221338022343&categoryNo=0&proxyReferer=https:%2F%2Fwww.google.com%2F