이번 2.1.20 변경사항에 이미지 width/height/mimetype등을 반환하도록 기능이 추가되었습니다.
이중에서 에디터를 이용해서 파일 업로드시 width/height을 자동으로 지정할 수 있도록 파일을 수정합니다.
width/height 지정시 다음과 같은 이점이 존재합니다.
1. 엄청 낮은 네트워크 환경에서 이미지조차 불러오지 못하는 초기에 레이아웃이 늘어나는 크기 변화현상이 없어집니다.
2. lazyload 사용시 정확한 이미지 위치 파악이 가능하기 때문에 lazyload를 사용하기 유리해집니다.
3. 특정 lightbox형태의 갤러리 라이브러리들에서 정확하게 이미지 사이즈를 파악하기 때문에 관련 처리가 훨씬 쉬워집니다.
common/js/plugins/jquery.fileupload/js/main.js의 360번째 줄의 다음의 소스코드가 있습니다.
if (filename.match(/\.(gif|jpe?g|png|webp)$/i)) {
html = '<img src="' + file.download_url + '" alt="' + filename + '"'
+ ' editor_component="image_link" data-file-srl="' + file.file_srl + '" />';
}
이 내용을 다음과 같이 바꾸어줍니다.
if (filename.match(/\.(gif|jpe?g|png|webp)$/i)) {
html = '<img src="' + file.download_url + '" alt="' + filename + '"'
+ ` width="${file.width}" height="${file.height}"`
+ ' editor_component="image_link" data-file-srl="' + file.file_srl + '" />';
}
이러면 width/height이 지정됩니다.
+ ) lazyload와 fetchpriority를 통한 조금의 페이지 로딩속도 개선
이젠 브라우저 기본 기능으로 lazyload가 가능합니다.
해당 코드는 loading=lazy와 fetchpriority=low가 중복선언되는 형태인데, loading=lazy의 영향을 받지않는 첫 화면에서는 fetchpriority=low가 미세하게나마 도움이 됩니다.
lazyload는 긴 글 혹은 이미지를 다 읽지 않고 이탈하는 유저들에 대한 트래픽 절감에도 도움이 됩니다.
기존에 올라가있던 이미지들에 적용되는것은 아니니, 최대한 지금 올라오는 이미지들에 대해서라도 도움이 되었으면 하는 생각이면 다음과 같은 코드로 바꾸어주시기 바랍니다.
if (filename.match(/\.(gif|jpe?g|png|webp)$/i)) {
html = '<img src="' + file.download_url + '" alt="' + filename + '"'
+ ` width="${file.width}" height="${file.height}" loading="lazy" fetchpriority="low"`
+ ' editor_component="image_link" data-file-srl="' + file.file_srl + '" />';
}
이미지 외에도 video에도 loading="lazy"를 사용하는것을 '구글'은 적극 권장하고 있습니다.
근데 플레이 하기 전까지 트래픽이 소요되지 않는데 뭔가 도움이 되나 싶긴 해서 해당 내용은 제외하였고, 관련 코드는 동영상에도 적용됩니다.