이 블로그의 웹 마스터로서 제가 직면 한 첫 번째 과제 중 하나는 이미지와 관련된 것입니다. 서버 리소스를 최적화하고 빠르게로드하려면 매우 높은 수요로 이미지 (JPG, PNG, GIF) 를 압축 해야했습니다 .
오늘 은 진정한 닌자처럼 이미지 를 편집하고 압축 하는 데 사용하는 두 가지 방법을 설명하겠습니다 . 지난 3 년 동안 나는 모든 것을 시도했지만 결국 이것이 나에게 가장 적합한 것이기 때문에 여러분과 공유하고 싶습니다.
한 번에 하나 이상의 이미지를 가능한 가장 간단한 방법으로 압축하는 방법
많은 사람들이 이미지를 압축하기 위해 권장하는 것은 Photoshop 또는 기타 스타일의 멀티미디어 편집기와 같은 프로그램을 사용하는 것입니다. 매우 훌륭하지만 이러한 유형의 응용 프로그램 은 일반적으로 저렴하지 않으며 개인적으로 많은 프로 기능을 제공합니다. 짧은 애니메이션을 만드는 것이 아니라 몇 가지 조정을 수행하고 일부 사진을 압축하고 싶습니다. 8 분
응용 프로그램을 설치하지 않고 이미지를 편집하고 압축하는 방법
이미지를 압축하고 여백과 크기를 조정하는 것이 필요한 경우 Pixlr Express 라는 웹 도구를 사용합니다 . 오토 캐드와 마찬가지로 수년 전에 오토 캐드의 빛을 본 온라인 응용 프로그램으로, 현재 다른 회사 (123RF)에 인수되었습니다. 그러나 요점에 도달합시다 ...
문제는 여전히 무료이며 잘 작동합니다. 뿐만 아니라 등록이 필요하지 않으며 이미지를 편집하고 필터, 글꼴 및 몇 가지 효과를 추가 할 수 있습니다. 내 브라우저의 "즐겨 찾기"폴더에 오랫동안 보관했습니다.
Pixlr Express로 이미지를 압축하려면 편집기에서 이미지를로드하고 " 저장 "을 클릭 하기 만하면 됩니다. 저장할 때 도구를 사용하여 원하는 압축 수준 (0 %에서 100 %까지)을 적용 할 수 있습니다.
저장시에는 이미지를 압축 할 수 있습니다.물론 이미지의 품질은 우리가 적용하는 압축 수준과 일치합니다. 개인적인 권장 사항으로 원본과 비교하여 65 %의 압축 수준 을 적용 하는 것이 좋습니다 . 이미지가 여전히 좋아 보이고 무게가 대폭 감소되는 지점입니다.
여러 이미지를 한 번에 압축하고 연속적으로 압축하는 방법
Pixlr로 작업하는 이미지가 여러 개인 경우 약간 지루할 수 있습니다. 이러한 경우에는 JPG, GIF 및 PNG 이미지를 압축하도록 특별히 설계된 RIOT (Radical Image Optimization Tool) 라는 무료 프로그램을 사용합니다 .
RIOT를 사용하면 이미지를로드하고, 압축 수준을 조정하고, 압축이 적용된 후 어떻게 보일지 미리 볼 수 있습니다. 이것은 우리가 그것을 가능한 한 많이 조정하고 여전히 좋아 보이도록하는 것이 좋습니다.
그러나 RIOT의 진정한 마법은 "일괄"기능에 있습니다. 여기에서 한 번에 여러 이미지 (예 : 폴더 또는 하위 폴더에 포함 된 모든 이미지)를로드하고 이를 cascade로 압축 할 수 있습니다 . 이렇게하려면 " 배치 " 아이콘을 클릭 하고 대상 폴더 ( 출력 폴더 )와 소스 폴더 ( 이미지 추가-> 폴더에서 모든 이미지 추가 )를 선택하면됩니다. 원하는대로 모든 것이 준비되면 " 시작 "을 클릭 하여 선택한 모든 이미지에 대해 대량 압축을 수행합니다.
멋지네요.이미지를 하나씩 압축하는 것과 이런 식으로 수행하는 것의 차이는 단순히 끔찍합니다. 대학 직업의 모든 이미지를 최적화해야하거나 더 나쁜 경우 웹 사이트의 모든 이미지를 최적화해야한다고 상상해보십시오.
블로그 또는 웹 사이트의 이미지에 대한 완벽한 압축 수준
위에서 약간 언급했듯이 웹 페이지의 완벽한 압축 수준은 65 %입니다. 그러나 이것은 개인적인 권고 일뿐입니다 ...
그러나 웹 페이지가 있고 "완벽한"수준의 압축을 원하면 자신을 "행복한 안드로이드"라고 부르는 너트의 개인적인 추천보다 더 많은 것을 원할 것입니다.
이러한 경우 Google에는 웹 마스터 Pagespeed Insights를 위한 잘 알려진 페이지가 있습니다. 이 도구는 웹 사이트의 로딩 속도를 알려주고 다른 조언을 제공하는 것 외에도 특정 URL에 포함 된 모든 이미지의 사본을 다운로드 할 수 있습니다. 이러한 이미지 사본은 100 % 최적화됩니다.
이미지를 다운로드하려면 해당 URL을 입력하고 " 분석 "버튼을 클릭해야합니다. 분석이 완료되면 " 컴퓨터 " 탭에서 거의 끝까지 스크롤하고 " 이 페이지에 최적화 된 이미지 리소스, JavaScript 및 CSS 다운로드 "링크를 클릭합니다 . 이러한 리소스가 이미 최적화 된 ZIP 파일이 자동으로 생성됩니다.
약간 숨겨져 있지만 잔인한 유틸리티를 가진 기능입니다이 튜토리얼이 도움이 되었기를 바랍니다. 이 프로젝트를 시작할 때 그런 글을 읽을 수 있었다면 분명히 많은 골칫거리를 구했을 것입니다.
추신 : 과거의 내 "나"에게 바친 게시물. 배우면 봐, 꼬마 야!
당신이 있습니까 전보가 설치되어 있습니까? 채널에서 매일 최고의 게시물을 받아 보세요 . 또는 원하는 경우 Facebook 페이지 에서 모든 것을 찾아보세요 .