Conqrean security blog

추석 인사 이미지를 만들어 카톡 프로필에 올렸더니 양쪽 끝 글자가 잘려 나갔습니다. 정사각형으로 만들었고 해상도도 충분했는데 "한가위 잘 보내세요"가 "가위 잘 보내세"처럼 보였습니다.카카오 고객센터를 찾아보면 "프로필 사진은 640×640 정사각형", 그리고 "글자가 들어간 이미지는 중요한 텍스트가 가장자리에 오지 않도록 배치하라" 고 되어 있습니다. 맞는 말인데, 가장자리가 어디부터인지는 안 알려줍니다. 그래서 직접 계산하고 잘라봤습니다.답은 한 변의 70.7% 입니다. 이 글에는 그 숫자가 어떻게 나왔는지와, 그 규격으로 만든 추석 인사 이미지 10장이 들어 있습니다. 아래에 원본을 그대로 올려뒀으니 저장해서 쓰셔도 됩니다.1. 정사각으로 만들어도 절반은 날아간다프로필 자리는 정사각형이 아니라 원으..

티스토리는 SEO 기본 태그를 생각보다 많이 넣어줍니다. 글 페이지 원본 HTML 을 재보니 description · OG 5종 · 구조화 데이터(BlogPosting) · canonical · 사이트맵이 전부 자동이었습니다. 플러그인을 안 깐 워드프레스 공식 기본 테마 데모는 description 도 OG 도 구조화 데이터도 0개였습니다.대신 스킨과 설정에서 세 군데가 새고 있었습니다. 글 제목이 h3, 본문 이미지 130장 전부 alt 없음, 구글 모바일 크롤러를 /m/ 주소로 돌려보냄. 셋 다 고쳤고, 고친 전후를 같은 자로 다시 쟀습니다.어떻게 쟀나검색엔진이 받는 것과 같은 조건으로 봤습니다.요청할 때 구글봇 User-Agent 를 붙이고, 자바스크립트를 실행하지 않은 원본 HTML 만 봅니다비교..

블로그 로딩 속도를 개선하려고 페이지 전송량 9MB 를 재보니, 제일 큰 건 이미지가 아니라 폰트(4,588KB, 전체의 49%) 였습니다.블로그 글에 이미지를 넣다 보면 페이지가 무거워집니다. 그래서 이미지 최적화부터 손댔습니다.그런데 실제로 페이지 전송량을 재보니, 범인은 이미지가 아니었습니다.먼저 이미지부터 — WebP가 압도적입니다블로그용으로 만든 이미지 39장(PNG, 합계 4.7MB)을 포맷별로 변환해봤습니다.포맷합계원본 대비장당PNG 원본4.7MB100%122KBJPG 품질 923.9MB84%103KBJPG 품질 853.1MB67%82KBWebP 품질 851.4MB31%38KBWebP 무손실2.5MB53%64KBWebP 품질 85면 원본의 31%입니다. JPG보다도 절반 이하입니다.눈에 띄는..