사이트의 이미지 최적화 : jpegtran을 사용한 일괄 처리 | optipng | PNGout

1. 전제 조건
2. 우리는 이미지에 대한 권장 사항을 사용합니다.
3. 아카이브 구조
4. 업무에 대한 간략한 설명
5. 추가
6. x64 (일명 andi)

이미지가없는 사이트 - 시대 착오적 인 현상. 많은 사람들이 생각하기에 상식이 없습니다. ���지막 시간 동안 사이트에 얼마나 오래 있었으며 얼마 동안 그 사이트에 머 무르셨습니까?

텍스트 데이터는 이미지보다 훨씬 작습니다. 그러나 사람들은 그들의 눈을 사랑하는 것으로 알려져 있습니다. 따라서 사진은 이야기의 확실한 이점이 될 것입니다.

일반적으로 텍스트에 관해서는 단락, 목록, 따옴표, 표를 비롯하여 내용과 편리한 시각적 표현을 모두 의미합니다. 그러나 이것은 충분하지 않으며 뉴스 사이트조차도 언론인 이미지를 제공하려고합니다.

이미지가 필요하다는 가정부터 시작합시다. 사진, 다이어그램, 그림 만 설명 할 수 있습니다.

푸틴 대통령이 영원 해 보이지 않았을 때, 나는 처음으로 의학 웹 포털을 만들었습니다. 아틀라스에 그림을 올려 놓아야했습니다. 그림없이 신체의 해부학 적 구조를 상상하는 것은 다소 어렵다는 것을 알 수 있습니다. 그리고 더 이상 고삐를 피우지 않고 그림을 bmp (압축되지 않은 형식)로 업로드했습니다. ��는 그들이 반죽의 무게를다는 것을 말해야 하는가? 또한 일부 브라우저는 이러한 그림을 어떻게 표시할지 모릅니다.

���렇다면 왜 이미지를 최적화할까요? 간단한 예는 사진입니다. 현대적인 휴대 전화는 8, 12 및 더 많은 메가 픽셀의 카메라를 가지고 있습니다. 12 MP는 4000 × 3000 픽셀의 이미지에 해당합니다. 장면의 복잡성에 따라 2 ~ 5 메가 바이트 크기에 해당합니다. 십여 장의 사진 - 페이지 크기가 많이 부풀어 오른다. 이미지가 컨텐츠 영역에 들어가면 브라우저는 먼저 모든 것을 다운로드하고 크기를 조정 한 다음 표시해야합니다. 약자를 위해서 가공업자 소량의 RAM이있는 경우 - 재난입니다.

이제 사용자가 전화로 사이트를보고 있다고 상상해보십시오. 이 경우 페이지 로딩은 단순히 대기 할 수 없습니다. 따라서 그림을 미리 축소해야합니다.

누군가는 이것에 아무런 의미가 없다고 주장 할 것이고 현대 CMS는 이미지를 다운로드 할 때 자동으로 미리보기를 만듭니다. ���러나 모든 사람들이 VPS 또는 VIP 요금에 사이트를 보유하고 있습니까? 하나의 12 MP 이미지를 다운로드 할 수 있지만이를 처리하기 위해 PHP는 스토리지에 35 MB 이상 (이론적으로는 실제로는 더 많은 메모리)을 할당해야하며, 더 작은 사본을 생성하는 정도는 여전히 알고 있습니다. 저렴한 관세는 즉시 초과 된 자원으로 급감합니다. 좋은 hoster는 더 이상 이것을하지 말 것을 사용자에게 요청할 것이고 나쁜 사람은 무시할 것입니다. 왜냐하면 돈만이 그에게 중요하기 때문에 서비스의 수행이 아니기 때문입니다.

그래서 우리는 올바르게 행동하기로 결정했습니다. 사전에 이미지를 축소 한 다음 사이트에 업로드합니다. 그래서 엔진은 더 쉽고, 사람도 더 쉽습니다. 모든 것이 다 정말로.

많은 편집기는 추가 정보가 포함 된 원본 청크 (메타 정보, 파일의 비 이미지 부분)를 유지합니다. 예를 들어 휴대 전화에서 사진을 찍은 다음 컴퓨터로 파일을 전송하고 올바른 키로 파일을 클릭 한 다음 "등록 정보 → 세부 정보"를 선택하면 장치에서 촬영 한 카메라, 셔터 속도, ISO 등의 데이터가 표시됩니다. 사용자에게이 정보는 쓸모가 없으므로 제거 할 수 있습니다.

글쎄, 생각 해봐, 하나의 덩어리. ���기에 무엇이 들어 있습니까, 포함 된 정보는 무엇입니까? 상상해보십시오. 때로는 수백 킬로바이트의 이러한 데이터가 포함 된 이미지를 얻을 수 있습니다. 바로 오늘, 그들은 584 KB 크기의 로고를 보냈습니다. 동시에 유용한 정보는 14KB에 불과했습니다! 나에 관해서는 방문자가 위에서 570KB를 다운로드하도록하는 것이 완전히 정확하지는 않습니다.

소계를 요약 해 보겠습니다. 사이트 사용자가 잘하기 위해서는 다음이 필요합니다.

1. 이미지의 크기를 줄입니다. 모든 그래픽 편집기를 돕기 위해.
2. 파일 부분을 버리면 불필요합니다. 사실 사용자는 그림 만 있으면됩니다.
3. 이미지의 크기를 더욱 줄여보십시오.

첫 번째 단락은 각 파일에 대한 개별 작업을 포함합니다. 시간이 오래 걸리지 만 최상의 결과를 가져옵니다. 우리는 각 파일을 열고, 자르고, 줄이고, 수용 가능한 품질로 저장합니다.

그러나 단락 2와 3은 특별 프로그램의 자비로 주어질 수 있습니다. 이미지 세트 작업을위한 소프트웨어. Google은 다음 프로그램을 권장합니다.

• JPG 이미지 형식을위한 jpegtran .
• PNG 이미지의 경우 optipng 및 pngout .

3쪽에 대해서는 조금 있습니다. 그래픽 편집자는 대개 그 점을 신경 쓰지 않습니다. 그들은 단순히 같은 설정, 양자화 계수 및 다른 것들을 사용하여 미리 압축 알고리즘을 배치하여 이미지를 저장합니다. 또한 많은 사람들이 정직하게 사용 가능한 메타 정보를 전송하고 자신의 정보를 추가하여 파일 크기를 추가로 늘립니다.

전제 조건

1 년 전, 그들은 서비스에 관해 한꺼번에 이야기하기 시작했습니다. PageSpeed ​​통찰력 google에서. 사실, 이들은 검색 자이언트가 "잘하는 법"에 대한 권고 사항입니다. 사이트의 주소를 입력하고 최적화를위한 제안 목록을 얻으십시오. 이 사이트에서 이미 최적화 된 리소스 (이미지 포함)를 다운로드 할 수도 있습니다. 사실, 이것은 체크 된 페이지에만 관련이 있습니다.

웹 사이트가있는 경우 반드시 살펴보십시오. 이 기사 . 특히 WordPress를 사용하는 사람들에게 유용합니다.

우리는 이미지에 대한 권장 사항을 사용합니다.

그것은 간단합니다 : 구글에 의해 지정된 프로그램을 다운로드하고 그들을 통해 서버에있는 모든 파일을 실행합니다. 문제는 이러한 유틸리티가 콘솔이라는 것입니다. 한 번에 하나의 파일 만 가져옵니다. 그러나 우리는 헛되이하지 않습니다. 마지막 기사 배치 파일에 시간이 걸렸지, 그렇지?

기사의 정보는 한꺼번에 자신 만의 파일 핸들러를 만들 정도로 충분하므로 어디 있는지 직접 물어 보지 않겠습니다. 나는 단지 자신을 사용하는 준비 어셈블리를 다운로드 할 것을 제안한다.

아카이브 다운로드 (212KB)

아카이브 구조

아카이브에는 [ OptimizeImg ] 폴더가 있습니다. 시작하려면 어딘가에 포장을 푸십시오. 나는 그것을 c : \ temp \에 위치 시켰지만 문제가되지 않는다. 가장 중요한 것은 경로에 느낌표가 포함되지 않는다는 것입니다.

다음. 이 폴더에는 [ uploads ] 하위 디렉토리가 있습니다. 여기서 처리가 필요한 파일을 넣어야합니다. 가장 중요한 부분은 적어도 폴더 / 파일 구조를 푸시 할 수 있다는 것입니다.

3 가지 프로그램이 추가되었습니다 : jpegtran.exe | optipng.exe | pngout.exe는 Google에서 권장하는 매우 유용한 유틸리티입니다. 해당 공식 사이트 / 저장소에서 다운로드되었습니다. 확실하지 않거나 업그레이드 만하려는 경우 신뢰할 수있는 소스에서 다운로드하고 기존 소스를 대체하십시오.

그리고 마지막으로, 톨사의 심장. Batnichki :

• 1. 박쥐
• 3. 박쥐
• 3-go.bat
• 3-opti-to-out.bat
• 3-out-to-opti.bat

첫 번째 파일 인 1.bat는 [uploads]에서 구조를 다시 만듭니다. 추가로 3 개의 폴더가 생성됩니다. [jpg_jpegtran] [png_optipng] [png_pngout] 형식의 최소화 된 파일이 처리됩니다 (jpg - * .jpg 파일 만 png와 동일).

3.bat는 실행을 위해 세 개의 배치 파일을 순차적으로 실행합니다.

• 3-go.bat는 1.bat와 거의 같습니다. 최소화 도구를 통해 jpg / png 파일을 건너 뜁니다. 작업 결과는 해당 이미지가있는 3 개의 폴더 (위 참조)가됩니다.
• 3-opti-to-out.bat는 optipng + pngout에 의해 처리 된 파일이 기록되는 [png_optipng-to-pngout] 폴더를 만듭니다 (이 순서대로).
• 3-out-to-opti.bat는 pngout + optipng로 처리 된 파일이 기록되는 [png_pngout-to-optipng] 폴더를 만듭니다. 이전 순서와 비슷하지만 다른 순서로만 나타납니다.

원칙적으로 1.bat만이 우리의 필요에 충분합니다. 배치 파일의 이전 버전에서 연구 및 오류의 결과로 3x 가방이 나타났습니다. 오류가 발생하는 동안 pngout 파일이 optipng 디렉토리에서 가져온 것입니다. 그리고 이전 버전의 출시가 업데이트 된 배치 파일보다 크기가 1.5 배 작을 때 놀랐습니다. 결과적으로 이중 처리가 그림을 "따라 잡을"수 있다는 것이 밝혀졌습니다. 그러나 거의 2 배의 시간이 걸립니다. 필요하면 스스로 결정하십시오.

업무에 대한 간략한 설명

1. 아카이브 다운로드 .
2. 포장을 푸십시오.
3. 새로 열린 [OptimizeImg] 폴더로 이동하십시오.
4. 찌르는 모든 파일은 [업로드] 폴더를 복사하십시오.
5. 1.bat을 실행하고 기다립니다. 많은 파일이 있고 png하는 경우에, 장시간 기다리십시오.
6. 검정 창에 계속하기 위해 키를 누르라는 메시지가 나타나면 모든 준비가 완료됩니다. 생성 된 폴더의 내용을 가져 와서 FTP를 통해 호스팅에 복사하여 이전 파일을 덮어 씁니다.

예를 들어. WordPress에 블로그가 있습니다. 모든 이미지는 [ / wp-content / uploads / ]에 저장됩니다. (ftp를 통해) 사이트 폴더로 가서 [ wp-content ]로 이동하여 [ uploads ]를 같은 이름의 OptimizeImg 폴더로 간단히 복사하십시오. 1.bat을 실행하고 기다립니다. 작업이 끝나면 콘텐츠 [jpg_jpegtran] (우리가 거기에 간다!)가 서버에 업로드됩니다. 기존 파일에 대한 요청은 덮어 쓰기로 응답합니다. png에 대한 비슷한 트릭이지만 먼저 [png_optipng] 또는 [png_pngout] 폴더가 차지하는 공간을 적게 차지하고 내용을 채우십시오.

다른 파일을 두려워하지 마십시오. Batniki는 jpg / png에서만 작동하며 이러한 유형의 이미지 만 새로 만든 폴더에 기록됩니다.

누군가가 유용하게되기를 바랍니다. 성공!

추가

1. [OptimizeImg]의 경로에는 느낌표가 없어야합니다 ! 및 %
2. 관리자로 스크립트를 실행할 필요가 없습니다. 또한이 경우 작동하지 않을 수도 있습니다!
3. ...

게시자

온라인이 아닌 13 시간

x64 (일명 andi)

의견 : 2846 간행물 : 395 등록 : 02-04-2009