'로딩속도'에 해당되는 글 5건

  1. 2017.07.31 이미지 포맷 GIF와 JPG,PNG (4)
  2. 2013.06.21 사이트 로딩속도 향상
  3. 2013.02.09 로딩속도와 방문자 (1)
  4. 2011.05.28 웹사이트 오프닝 속도 (2)
  5. 2010.01.22 로딩속도와 대문 그림


이미지 포맷 JPG,GIF,PNG

웹사이트 로딩속도와 압축율과 이미지 포맷을 알아본다.- GIF-지프-기프.
GIF 이미지의 장점은 간단히 움직이는 이미지를 만들수 있다는것과 로딩속도를 획기적으로 개선할 수 있는것이 아닌가 생각하면서 박새를 가지고 단순한 동작을 시연해 본다.
아래 움직이는 이미지는 단두장의 GIF파일로 이루어진 것 이다.



얼마전에 블로그 스킨을 손대보려다가 로딩속도 때문에 고생했다.
물론 지금도 빠른 로딩속도를 내지는 몯하지만 고생하면서 얻은 지식을 공유하려고 한다.

좋은 사진이나 이미지를 보여주고 싶은 마음과 그것때문에 느려지는 블로그 로딩(오프닝)속도는 서로 간에 잘 타협해서 조율해야한다.
나는 좀 느리드라도 좋은사진을 그대로 보여주고 싶어하는 쪽에 속한다.

웹에서 주로 쓰는 이미지 포맷은 GIF,JPG/jpeg,PNG등 많지만 최근에 많은 사용을 하는 이미지는 GIF를 시작으로 대부분의 유저들은 JPG를 사용하는 것으로 나타나며 소프트웨어 하는분들이 PNG를 많이 사용하는것으로 나타나고 있다.

로딩속도로 본다면 웹에서 가장 많은 사용을 했으며 지금도 고품질 사진이 아니라면 256컬러로서 가벼운 이미지포맷으로 많이 사용하는 이미지이다.
다만 큰 앞축율로 용량을 줄이고자 할때 GIF는 JPEG/JPG보다  압축율이 많이 떨어지지요.

앞축을 해서 가공한다면 여러가지 방법으로 압축율을 조절할수있는 JPG/JPEG가 강세이며 지금 대부분의 유저들이 사용하는 것이다.
 JPG/JPEG사진포맷을 기본적으로 사용하는 디지털 카메라 때문에도 대부분의 이미지가 JPG/JPEG포맷으로 사용되고 있으며 가장 고품질 이미지를 출력하지만 상대적으로 대용량을 나타낸다.

사진 자체의 품질을 위주로 하지 않는 단순 이미지를 대용량 JPG 풀칼러를 사용할 필요는 없을것이다.

먼저 GIF는 어떤 이미지 포맷인가 알아본다.

GIF는 Graphics Interchange Format 이라는 영문단어의 첫자를 택한 줄임말이다.
즉 비트맵 그래픽파일 포맷이라는 말인데,
1987년 컴퓨서브(CompuServe)라는 회사에서 발표하여 월드와이드 웹(WWW)에서 가장 많은 사용을 하였고 대중적인 파일 포맷임은 잘 알려진 사실이다.

이 포맷은 16비트 PC에서 당시에 화려한 색감을 자랑했던 256Color로 저장할 수 있는 비손실압축 형식의 포맷이다.
이 알고리즘은 LZW 라는 형식으로 유니시스가 그 특허를 가지고 있다.
이 GIF의 특성을 가지면서 256Color 이상을 지원하는 PNG 포맷이 나왔다.

GIF는 우리가 대부분 지-아이-에프라고 읽지만 영어권이나 개발사에서는 지프(발음:dʒɪf)나 기프(발음:ɡɪf)로 읽는데 국제화 시대에 맞춰서 참고할 일이다.
GIF 포맷의 저자는 지프라고 발표 했지만, 영어식 발음이 기프도 되기 때문에 저작자가 불러달란 뜻과 상관 없이 기프가 많이 사용되고 있다.

언듯 보기에 품질이 별로인 GIF가 사랑 받고 있는 이유는 딱 두가지라고 생각됩니다.
첫째 이유는 GIF를 사용하면 간단히 움직이는 사진을 만들어 집니다.
두번째 이유는 첨부터 이 이미지는 용량이(256컬러) 작고 전송 속도가 빠르다.

위의 두가지 중에 두번째 이유에 속하는 내용은 중요하며 지금도 사용되는 이유인데 인터넷속도가 느린 국가에서 접속한다든지 저속 인터넷을 사용하는 분들에게는 지겨운 기다림을 없애주는 알고리즘이 포함된 인터레이스(Interlace)라는 속성의 GIF기능때문이다.

인터레이스(Interlace)에 대해서 잠간 언급 한다면,
주로 웹에서 느린환경의 유저가 이미지를 불러올때에 처음부터 이미지를 다 나오게 하지않고 흐릿하게 뭉개진 이미지를 먼저 윤곽적으로나마 표시해서 지루하지 않게 유저를 달래주고(이때는 이미지의 용량이 오리지널 보다 작기때문에 속도가 매우 빠르지요.)완전한 이미지를 천천히 보여주는 방식입니다.
이것 때문에 초기 전화선 인터넷을 쓸때는 각광받게 되었으며 지금도 환경이 열악한 온라인 유저에게는 바람직한 방법일 것 입니다.

.


위의 사진처럼 천천히 흐린 사진에서 완전한 사진이 될때까지는 실제로 상당한 시간이 걸릴지라도 아무것도 안나온것과 는 상당한 심리적인 효과가 있어서 지루함을 보상 하게 되지요.

[지프 파일 두개를 연결해서 단순한 반복을 보여주는 예입니다.]

또하나의 큰 장점은 특별한 방법없이 그냥 이미지를 연속 나열함으로서 동영상 효과를 보일수 있기 때문에 간단한 움직임을 설명할때 유용한기능이 GIF의 장점 이라고 할수 있습니다.

또 큰장점은 아니지만 편리한 기능중에 아이콘이나 작은 로고이미지의 배경을 지정하기가 쉽습니다.
웹페이지의 어떤 색갈에 들어갈지 모르는 로고나 아이콘의 배경이 임의 색갈을 뛰고 있다면 사용자에게는 그 아이콘이 별로 유용하지 않을것입니다.
지프에서는 배경을 투명하게 하는기능이 있으며 임의색갈로 지정할수도 있습니다.
.


[각각 배경색을 달리하거나 투명하게 지정한 모습]

GIF가 가지는 장점은 많습니다.
그러나 단점또한 있기 때문에 시대와 더불어 사용자가 엇갈리게 된다고 봅니다.
본인은 이미지 알고리즘에 대한 실제적인 기술을 모릅니다.
다만 발표된 LZW 압축 알고리즘을 사용한다면 무손실로 데이터를 압축 한다고 하며 실제로 페인트샵이나 포토샵으로 동일한 이미지를 포맷만 바꿔서 저장하고 불러와서 확대해 본다면 두 이미지 화일의 특성이 드러날것입니다.

GIF 파일이 상대적인 기본용량이 작은것은 이미지의 정보를 저장할때 유사한  컬러단위를 만들어 그 단위를 몇개의 패키지로관리하여 저장 한다고 합니다.
그러니까 이해가 되는군요.
결과적으로 그 많은 픽셀 정보 를 저장하지 않기때문에 상대적으로 색갈 분포가 불규칙적으로 연속 변하는 많은 색상을 포함하는 이미지라면 도리어 용량이 크게 증가하는 결과를 낳게 되는군요.
256컬러로서 트루컬러인 JPEG보다 색감이 좋지 않으면서도 그라이데이션이 포함한 파일은 오히려 용량이 크게 될수도 있게 되는것입니다.

즉 표현 가능한 색상이 256컬러인데 더 많은 애매한 색상이 포함될경우 적당히 인접한 색갈에 묶어서 대체함으로 색갈 경계가 발생합니다.


이 글은 이미지 전문지식으로 쓰는 글이 아니며 일반적인 지식수준으로 공부한 내용이기 때문에 미흡한 내용이 많을것으로 생각합니다.
전문가 분 들이 보신다면 추가로 리플로 보충하신다면 더욱 감사 하겠습니다.


Posted by 블로그에세이-BlogEssay Dramatique

댓글을 달아 주세요

  1. Favicon of https://device.feeden.net BlogIcon 꼬마낙타 2010.01.14 14:53 신고  댓글주소  수정/삭제  댓글쓰기

    많은 디지털 카메라와 폰 카메라들이 jpg 포맷을 사용하고 있어서 저도 별다른일이 없으면 jpg로 쓰고 있었는데, 홈페이지를 제작하시는 분들은 거의 대부분이 gif 포맷을 사용하시더라고요.
    전송 속도의 차이가 있나봅니다. 저도 블로깅 할 때, 이미지 확장자를 gif로 저장해서 업로드 하는 습관을 들여야 겠네요. ㅎ 좋은 정보 감사합니다.

  2. Favicon of http://liquidus.tistory.com BlogIcon LiquiduS. 2010.01.15 14:03 신고  댓글주소  수정/삭제  댓글쓰기

    뭐 상황에따라 선택해서 쓰는게 답이겠죠

    근데 PNG는 여러면에서 장점들을 합쳐놓았다고 하지만 아직 웹상에서도 그렇고

    제대로 안되는곳이 많더군요..


페이지 로딩속도 올리기
PageSpeed Insights , Make your web site faster
웹사이트 웹페이지 체적화


블로그나 사이트의 웹페이지가 열리는 속도를 사이트 오프닝 속도나 로딩속도라고 하지요.
이 로딩속도가 느려터저서 한참 기다려야 겨우 페이지나 그림이 조금씩 보인다면 그 사이트나 페이지를 기다리고 앉아있을 사람은 극히 드물것입니다.

그래서 아무리 좋은 콘텐츠로 잘 구성된 사이트나 블로그일지라도 일단은 빨라야 하는것입니다.
웹페이지의 생명력은 스피드에 있는것이라고 해도 과언은 아닙니다.

구글 디벨로퍼(Google developers)서는 블로그나 사이트 관리자를 위한 개발자 서비스를 하고 있습니다. 
구글개발자지원 Google developers 에서 Make your web site faster 라는 서비스가 잇습니다.

웹마스터를 위한 이 사이트 아날라이저( Analyzer)에서 URL을 입력하면 사이트스피드에 악영향을 주는 모든항목을 체크해서 고칠수 있도록 자세히 안내하고 있습니다.

웹마스터라면 구글이 지원하는 스피드업을 위한 개발자 지원을 이용해 보시기 바랍니다.

https://developers.google.com/speed/pagespeed/insights

Make your web site faster

구글디벨로퍼 사이트 아날라이저 바로가기

 




     

Posted by 블로그에세이-BlogEssay Dramatique

댓글을 달아 주세요


사이트 로딩속도와 방문자


블로그나 웹사이트 운영자는 방문자 증가를 위해서 부단한 노력을 한다.

그리고 양질의 콘텐츠를 만들과 여러가지 SEO 관리를 하지만 그 중에서도 사이트 로딩속도 즉 오프닝 속도는 가장 중요한 요소이다.


정상적인 서버에서 제대로된 사이트 구조에서 로딩 속도가 진연되는 이유 몇가지를 알아본다.
1.이미지 크기.

2.외부로 연결된 복잡한 자바스크립트.

3.여러곳의 뉴스나 RSS 크로스 링크.

등 일 것이다.

이 속에는 잘못된 스크립트 문법구조 등으로 인한것 들 도 포함된다고 본다.


정상적인 사이트나 블로그의 로딩속도는 2초 내외로 본다.

3~4초까지도 대형 포털에서는 흔한 일 이지만,5초 이상 걸린다면 방문자는 특별한 목적으로 꼭 열고 말겠다는 충신파 유저가 아니라면 기다리지 않고 나갈것이다.


일반 랜덤 방문자나 검색으로 들어온 나그네 방문자는 인내심 강한 네티즌 이라도 5초정도는 지루하게 생각한다.


항상 1~2초 안에 열리는 웹사이트라면 방문자를 놓지지는 않는다.

지금 당신의 웹사이트-블로그-까페-보드 등이 열이는 속도를 체크해 보시기바랍니다.


로딩속도 체크 바로가기


로딩속도 체크 바로가기  



[분류 전체보기] - 드루팔 추천모듈


[컴퓨터/인터넷/네트웍/IT] - 티스토리와 텍스트큐브


[컴퓨터/인터넷/네트웍/IT] - 웹사이트 최적화의 첫걸음


[소프트웨어/스크립트천국] - 메타태그 알아보기


[소프트웨어/스크립트천국] - 트래픽 링크 체커


Posted by 블로그에세이-BlogEssay Dramatique

댓글을 달아 주세요

  1. Favicon of http://www.walkview.co.kr BlogIcon 워크뷰 2013.02.12 03:56 신고  댓글주소  수정/삭제  댓글쓰기

    중요한 정보입니다
    제가 한 게시판에 사진을 많이 올렸더니 스크롤압박이 심하다고 난리를 겪어서 그런지
    와 닿습니다^^





웹사이트 열리는 속도와 방문자 수

각종 웹사이트나 블로그등 웹페이지가 열리는 속도가 느리면 방문자가 들어오지 않을것입니다.
특별한 경우에는 인내심을 발휘해서 기다릴지 모르지만 대대는 잘안열리는 사이트를 굳이 열려고 기다리지 않을것입니다.

아래의 링크에서 자기 블로그나 웹페이지 URL을 넣고 체크해 보시기바랍니다.

너무느리다면 원인을 찾아서 제거해야할것입니다.

보통은 3초이내에 열려야할것입니다.


Website speed and loading time check.
 
http://rssfamily.com/speed/
.
.
Posted by 블로그에세이-BlogEssay Dramatique

댓글을 달아 주세요

  1. Favicon of https://dramatique.tistory.com BlogIcon 블로그에세이-BlogEssay Dramatique 2011.05.28 22:23 신고  댓글주소  수정/삭제  댓글쓰기

    http://www.nytimes.com/2011/05/20/world/middleeast/20speech.html?smid=tw-nytimes&seid=auto

  2. Favicon of https://dramatique.tistory.com BlogIcon 블로그에세이-BlogEssay Dramatique 2011.05.28 23:04 신고  댓글주소  수정/삭제  댓글쓰기

    http://www.nytimes.com/2011/05/20/world/middleeast/20speech.html?smid=tw-nytimes&seid=auto




블로그 스킨을 만지다가..

왕초보 스킨만지기-이틀동안 만지고 내블로그 스크립트 구조가 대충 이해가 된다.

티스토리스킨



블로그 스킨을 만지다가 이것 저것 시작하게 되면 자꾸 만지게 되고 나중에는 맘에 안들어 리셋도 시킨다.
괜히 건드리다가 시간만 잔뜩 날리고 별로 좋아진것도없이 되고 만다.
전문가도 아니고 서투른 솜씨로 1년에 한두번 해보는 스킨 만지기이니까 여간 해 봐야 맘에들게 되지도 않는다.

하는수 없이 찍어논 사진중에서 적당한 사진을 대문위에 올려서 간단히 처리하고 만다.
그런데 이게 문제가 더 심각해 진다.
보기좋은 고품질 사진을 올리는것 많큼 거의 비례해서 블로그 뜨는속도가 내려 앉는다.

아무리 근사하게 잘만든 집이면 머하노,
교통이 불편해서 아무도 안오게 되는데...

대문 그림은 시원하고 큼지막한 사진을 하나 올리고 싶지만 아예 블로그가 뜰생각을 안한다.
누가 5초씩이나 내 블로그 뜨길 기다려서 왕림하겠는가?...
이미지를 짜르고 모자이크도 하고 별 지랄을 해봐야 기본적으로 첨부터 만나는 이미지는 온라인 고속도로에서 정체를 유발하고 만다.

하는수 없이 텅빈 대문보다는 용량을 줄이고 줄여서 사진같은 냄새가 날뚱말뚱 하는지경까지 낮추고 그림도 3쪼가릴 내서 퍼즐로 맞추고 하여 로딩속도 겨우 2초대로 진입시켰다.

어휴 !!
괜히 스킨한번 건드려서 꼬박 이틀이 걸렸다.
이제 올 크리스마스 전후 해서 한번 건드릴 요량으로 스킨 만지기 끝이다...
멋모르고 건드려서 사이드바가 몽땅 리셋되고 등등 시행착오를 많이 격었다.

애물단지 애드센스를 첨부터 자동 위치 고정으로 스크립트 안한게 지금 후회되지만 어쩔수 없이 글쓸때 미리 만들어 놓은 틀에 에디터로 쓰는거 빼고는 그리 불편하지는 않다. 

 




Posted by 블로그에세이-BlogEssay Dramatique

댓글을 달아 주세요



티스토리 툴바