그냥 JPG, GIF 등의 이미지 파일들을 보고 생각했습니다.

 

'웹사이트에서 제일 트래픽을 많이 차지하는게 이미지 파일 아닐까?'

'용량이 크면 사용자가 받는데 시간도 오래걸릴테고, 트래픽 = 돈 이니까 좀 줄여봤으면 좋겠다..'

 

 

 

처음 시도한건

Compressor.io , jpegmini, kraken.io 같은 온라인 이미지압축 서비스들..

 

jpg 등의 일반 이미지 사진들은 무손실압축이 한 20%가량씩은 되는듯한데..

gif 등의 애니메이션 효과가 있는것들은 잘 지원이 안됨.

해당웹사이트에 한번 올려서 변환과정을 거쳐 다시 내려받아 내 사이트로 또 올려야하니 노가다......

(api같은걸 이용해서 어쩌고하는 서비스들도 있었지만 유료라 패스..)

 

 

두번째로 생각해본건

imgur 연동업로더가 나왔을때 생각한 '그래 imgur로 올리면 내 트래픽 걱정은 없어도 되지' 라는 안일한 생각.

 

비슷하게 사용하려했던 나무위키를 위시한 다량의 한국사이트들이 막히고

올렸던 이미지들이 모두 엑박으로 나타나는.. 꼼수를 쓰면 어찌어찌 될꺼같긴하지만 포기..

 

 

 

세번째로 생각해본건

imgur가 안된다면 picasa를 이용해보자

 

picasa업로드를 도와주는 모듈을 만들려고 하셨던 분이 계셨으나... 공개된건 없는듯..

업로드는 거의 무제한이지만.. 트래픽이 한번에 너무 몰리면 제한이 있는것도 같고... 

일단, 모듈이 없으므로 나는 picasa로 올린다 해도 사용자들은 일반 업로드를 하게되니 트래픽 감소효과 미미...

 

 

 

네번째로 생각해본건

webp, webm 등의 새로나온 이미지포맷을 이용해보자

 

일단 파일크기는 못해도 50%정도로 줄어드는 효과. 

하지만, 업로드하면서 변환하는 모듈이 xe에 없으므로 나만 해봤자 트래픽 감소효과 미미....

게다가 지원하는 웹브라우저가 한정적.

 

 

다섯번째로 생각해본건

mod_pagespeed 를 이용해보는것.

 

jpg, gif 등의 파일을 webp를 지원하는 브라우저일경우 webp로, 지원하지 않으면 원래 포맷으로 보여줌.

파일들 중에서 변환이 되는것도 있고 안되는것도 있는듯함. (메모리 문제일지도..)

잘 모르겠지만.. 이미지를 보여줄때마다 변환해서 보여주는거면 서버에 의외의 부하가 갈 수도 있을듯...

 

 

여섯번째로 생각해본건

그냥 닥치고 cloudflare나 쓰는거....

 

클라우드플레어 쓰면 캐싱되서 트래픽감소효과가 있다고 하니..

아직 제대로 안써봐서 모름..

 

 

 

그냥 상상만 해본거는

이미지 프로세스 모듈이 업로드 된 이미지의 사이즈 축소나 워터마크를 입힐수 있으니까

비슷한식으로 업로드한 이미지를 gifsicle이나 jpeg_optim 등을 이용해서 용량압축된 이미지파일을 서버에 넣을수도 있지 않을까? 하는 상상만......

 

 

 

 

익스플로러 놈들아 왜 Webp 지원안하냐

  • profile

    그냥 클플이 편해요 ㅋㅋ

     

    .htaccess에 몇 줄 추가해서 gif, jpg 등의 확장자에 아주 오랫동안 캐시를 걸어버리고, 클플에서도 오랫동안 캐시하도록 설정해 놓으면 사용자들이 같은 이미지를 100번 보든 1000번 보든 트래픽은 1번만 나옵니다.

  • profile profile
    트래픽도 트래픽인데, 아무래도 용량이 작아지면 다운받고 화면에 뿌려지는 시간도 줄일수 있을꺼 같아서....

    만약에 익플로 접속한 유저에겐 a.gif 원본 그대로 뿌려지고
    크롬으로 접속한 유저에겐 a.gif.webp라는 변환된 이미지로 뿌려지는 페이지가 있다면
    클플을 쓰게되면 클플에서도 위에처럼 접속 브라우저에 따라 해당되는 이미지가 뿌려질까요?
    (어차피 클플에서 뿌려지는거라 상관없을라나...?)
  • profile
    저는 xe에서 생성하는 섬네일들이 무손실파일로 압축됐으면..하는생각을 해보긴했어요
  • profile profile
    섬네일까진 생각못했었네요 ㅎ
  • profile
    물리적으로 용량을 줄일려면 해상도를 줄이면 됩니다.
  • profile profile
    이미지 프로세스 모듈을 이용하면 해상도를 줄일수 있는거 같은데..
    제가 위에 말한 https://compressor.io/ 나 https://kraken.io/ 는
    해상도나 화질(?)은 거의 그대로 유지하면서 용량을 줄인다고해서요.
    눈으로 구분은 안되는 수준인데 용량은 20~30%정도 줄어드니까ㅎ
  • profile profile
    컴퓨터 상에서(웹에서) 화질은 이미지 크기만 영향있습니다.
    해상도 1로 해도 웹상에서 화질은 영향 없습니다.
    해상도는 프린트할 때 필요한 것이라서 프린트용도가 아니라면 1로 줄이면 획기적으로 줄어듭니다.
    컴튜터화면을 프린트하려면 72dpi, 인화지에 프린트할 거면 300dpi 가 필요한데
    웹용도로만 사용할 이미지는 해상도 1로해도 상관없습니다.
    다만 해상도를 1로 변경하면 컴퓨터 화면을 프린트하면 하얗게 나오죠.

    카메라로 찍으면 300dpi 인데 이것을 72dpi 또는 1dpi로 하면 용량을 많이 줄일 수 있습니다.
  • profile profile
    아하~ 해상도라는게 DPI 말하시는거였군요.
    전 해상도를 640x480 같은 이미지사이즈를 말하는줄 알고 ㅎ

    dpi쪽은 잘 모르겠네요. 초보라 프로그램이나 검색으로 해결하는데
    그쪽을 변환해주는 프로그램같은건 아직 잘 못본거 같아요.
    그쪽도 한번 알아보도록 하겠습니다!
  • profile
    방금 mod_pagespeed 적용해봤는데 XE하고 잘 안맞는지 아니면 정교한 필터링이 필요한지 빨라지는건 모르겠고 랙 같은 느낌이 들어 별로네요. 마지막줄 아쉬움은 걷으셔도 될듯 하네요. 아파치 2.4.17 에 적용해봤다가 지금은 off 했습니다.
  • profile profile
    전 연습용사이트라 그런걸 느낄만한..
    제 추측인데 mod_pagespeed가 서버에서 이것저것 최적화를 해주는건데 (gzip압축이라던가 css,js압축, 이미지변환 등등)
    라이믹스나 xe에는 이미 적용된 부분도 많이 있어서 2중으로 되는건 아닐까싶어요.
    설명서를 읽어봐야될꺼같은데 영어라... ㄷㄷㄷ

    webm은 모바일에서 gif처럼 안되서 좀 그렇지만..
    webp는 jpg,gif 용량을 확 줄여주니 좋은데.. 대중화가 되었으면 하는 바램..
  • profile profile
    변환한 이미지를 어디에 캐시를 했다가 보여주는건지는 모르겠지만 이미지변환뿐 아니라 여러 동작을 하는데 가상서버정도의 하드웨어는 좀 뭔가 영향이 있어 보이는듯 한 느낌을 받았습니다.
    페이지 이동시마다 그런 불편함을 느낀다면 뭔가 제대로 사용법을 알거나 혹은 하드웨어스펙을 맞추거나 하는 등의 방법을 확인 후 사용해야 할 듯했어요.

    메인페이지만 볼때도 캐시를 적절히 적용해 놓아서 꽤 빠른 응답이 나오도록 해 놓았는데 mod-pagespeed 가 개입되니 뭔가 더 추가적인 작업시간이 필요해졌고 이로 인해 약간의 랙? 같은 느낌이 발행합니다. 그것도 아주 일률적이지 못하고 불규칙한 매끄럽지 못한 느낌입니다.

    물론 그러한 작업을 거친 후 로드되는 것들이 경량화되어 전체 로드타임을 줄여줄수 있다고 하는 기술일텐데 워낙 느린 웹페이지의 경우 기대한 효과를 긍정적으로 볼 수 있을텐데 저희와 같은 케이스는 오히려 응답시간과 전체로드타임 모두 다 손해를 보게되네요.

    물론 세부세팅 전혀 없이 기본설치로 사용했을 경우라 저도 그 외 부분은 잘 모르겠네요.
  • profile profile
    웹지기님 사이트는 워낙 노력을 많이 해놓은 사이트여서 거기에 mod_pagespeed가 무작정 개입되면 오히려 안좋을꺼 같긴해요 ㅎㅎ

    아마 mod_pagespeed on만 해놓으면 이미지쪽은 건드리지 않을꺼에요.
    css,js 같은걸 다시 압축하니까 그런거 아닐까하는 추측? (이미 압축이 되어있으니 효과없는걸 반복하는??)

    저는 원래 mod_pagespeed로 최적화도 최적화지만
    이미지 용량을 줄일수 있나 알아보려고 했던거라
    화질의 차이가 없다면 아무래도 300kb짜리 이미지를 보여주는거보다 50kb짜리를 보여주는게 사용자가 더 빠르게 볼 수 있을테니까요.
  • profile profile
    아니요. 이미지까지 다 건드립니다. 페이지를 한번 읽고 나서 다시 로드해보면 변환된 이미지로 보여줍니다.

    이렇게 생각하시면 쉽습니다. 이 기술의 예시 사례들을 보면 5초 걸리던게 2-3초로 줄고 10초 걸리던게 5-6초로 줄고 합니다.
    그럼 이러기 위해 추가되는게 1초라면 상당한 이득이 되겠죠.

    하지만 원래 페이지 로드 자체가 1초대로 끝나는 곳이라면 이게 오히려 마이너스로 작용하게 되는 상황입니다.
    압축되어있는걸 반복해서 압축한다고 더 느려진다고 보지는 않아요. 제가 보았을때는 전체적인 이 기술에서 실행해야 하는것이 이것저것 꽤 많은데 그걸 수행하는 최소요구시간이 페이지전체로드하는 시간에 추가되었을때 영향은 사이트마다 득이될수도 있고 독이 될수도 잇는 상황 같습니다.

    5-6초 로드 시간이 필요한 사이트에 이 기술로 말씀하신 css,js 압축과 합치기 이미지변환 등을 하는데 추가적으로 1초를 들여 경량화된 것으로 로드하여 2초를 줄여 4-5초로 개선시겼다면 분명 도움이 됩니다.

    하지만 1초대의 로드타임을 가진 이미 충분히 빠른 곳에서는 별 도움이 안되거나 저희처럼 기존보다 응답하는 시간이 길어져 약간 느려진 느낌을 받게 되네요. 이미지와 나머지들이 개선되어 전체로드타임이 줄어드는건 미미해서 크게 개선되지 않는듯 합니다.