웹 이미지: 크기 조정 및 완벽하게(그리고 자동으로) 변환

거의 모든 프런트엔드 개발자는 품질에 영향을 주지 않고 사용자에게 가능한 가장 작은 이미지를 제공해야 한다는 것을 알고 있습니다. 우리 모두는 그것을 달성하는 방법을 알고 있습니다. 하지만 그건 누구도 좋아하지 않는 집안일이에요. 또한 비즈니스 관점에서도 시간이 걸리며, 시간은 곧 돈입니다. 그러니 "충분히 좋다"는 말은 그냥 충분합니다.

개발자에게 더 많은 작업을 들이지 않고도 완벽한 이미지 전달을 개선하고 자동화한 방법을 공유하겠습니다.

일반적으로 수행되는 방법

당신은 아닐 수도 있지만 아마도 우리 대부분일 것입니다.

고밀도 화면에 맞게 사진을 의도한 크기의 2배로 PNG로 내보내고 꼬리표. 30초(또는 그 이상)를 추가로 사용하고 싶다면 WebP로 변환하고 두 버전을 <사진> 요소를 사용하면 브라우저가 가장 좋은 것을 선택할 수 있습니다(최고가 아니라 가장 최근에 지원되고 브라우저가 선호하는 형식만 선택함).

이것은 "충분히 좋은 것"이며 실제로도 그럴 때가 많습니다.

하지만 완벽하지는 않습니다. 새로운 iPad는 크기가 크며 2.5× 또는 3× 이미지를 활용할 수 있습니다. 반면에, 표준 기업 Lenovo ThinkPad는 추가적인 세부 사항이 필요하지 않으며 1× 이미지가 완벽합니다.

솔직히 수동 작업에는 괜찮습니다. 누구도 사진 한 장에 15분을 투자할 수 없습니다.

완벽을 위한 자동화

저의 완벽주의자 두뇌에는 '충분히 좋다'라는 표현이 없습니다. 또한 일부 고객은 경쟁이 치열한 분야에 종사하고 있으므로 옵션을 조사하기 시작했습니다. 오래 걸리지 않았습니다. 우리는 브라우저가 지원하는 이미지 형식을 나타내는 HTTP 헤더를 보낸다는 것을 이미 알고 있었습니다.

우리에게 필요한 것은 <사진> 요소는 주어진 화면의 픽셀 밀도에 따라 이미지를 로드할 수 있습니다. 이는 서버 측 렌더링으로는 거의 수행할 수 없는 작업이며 JavaScript를 통해 src를 조정하는 것은 여러 가지 이유로 불가능합니다.

이것으로 필요한 모든 것을 갖추었습니다:

• 형식 서버가 서비스할 수 있습니다.
• 프론트엔드 개발자가 요청한 이미지 크기
• 디스플레이의 픽셀 밀도.

프로세스

이미지 최적화 프로세스를 자동화하는 방법은 다음과 같습니다.

1. 모든 이미지 업로드 허용

   우리는 개발자와 관리자가 원하는 사진을 업로드하고 저장할 수 있도록 허용합니다(물론 개발자는 더 주의해야 합니다). 우리 시스템은 무엇이든 처리할 수 있습니다. 심지어 DSLR 카메라에서 직접 가져온 250MB JPEG까지 성공적으로 변환하고 크기를 조정한 다음 로그를 보고 폭소하게 만들었습니다.

2. 자동 변환 및 압축

이미지가 업로드되면 시스템이 자동으로 다음 작업을 수행합니다.

• PNG, WebP, AVIF 등 다양한 형식으로 변환합니다.
• 90% 품질 설정을 사용하여 각 버전을 압축합니다.

왜 90%인가요? 품질의 마지막 10%가 수익 감소로 이어지는 경우가 많기 때문입니다. 시각적 품질의 눈에 띄는 차이 없이 상당한 저장 공간과 대역폭을 절약할 수 있습니다.

1. 여러 해상도 생성

   각 이미지에 대해 픽셀 밀도 승수를 기반으로 다양한 크기를 생성합니다.

• 1×
• 1.5×
• 2×

• 3×

  이렇게 하면 고해상도 화면이 있는 기기에서는 선명한 이미지를 얻을 수 있고 다른 기기에서는 적절한 크기의 이미지를 얻을 수 있습니다.

  그리고 미래 보장을 위해 숫자를 추가하거나 변경하기만 하면 모든 것이 자동으로 처리됩니다(아직 VR/AR 콘텐츠를 수행하지는 않지만 이것이 도움이 될 기술이라고 생각합니다).

1. 동적 이미지 제공

   HTML 템플릿에서는 원하는 이미지 크기(너비 또는 높이)를 지정합니다. 그러면 서버측 코드는 다음과 같습니다.

• 최적화된 이미지가 있는지 확인합니다.
• 그렇지 않은 경우 처리를 위해 대기열에 넣습니다.

• 적절한 <그림> 픽셀 밀도에 대한 srcset가 있는 요소.

  브라우저는 기기 성능에 따라 자동으로 최상의 이미지를 선택합니다.

결과는 다음과 같습니다.

<picture>
  <source srcset="/Upload/2024/03/11/tn-w200-frantisek.webp 1x,
                   /Upload/2024/03/11/tn-w300-frantisek.webp 1.5x,
                   /Upload/2024/03/11/tn-w400-frantisek.webp 2x,
                   /Upload/2024/03/11/tn-w600-frantisek.webp 3x">
  <img src="/Upload/2024/03/11/frantisek.jpg" width="2222" height="2963" loading="lazy" alt="Video poster">
</picture>

큰 이미지 처리

개발자로서 사진의 완벽한 크기 조정 및 변환을 피한다면 일반 관리자나 클라이언트가 이를 기대할 수 없습니다. 그래서 우리는 사람들이 원하는 것을 업로드하고 이를 처리합니다(좋은 UX 및 클라이언트 관계).

처음에는 크기 조정이 그렇게 집중적일 것이라고 예상하지 않았으며 데모 서버를 몇 번 완전히 종료했습니다. 그래서 우리는 다음과 같은 접근 방식을 개발했습니다.

• 별도의 이미지 처리 전용 저가형 VPS에 간단한 API 서비스를 구축했습니다.
• 저희 제작 서버는 이미지와 원하는 형식/크기를 이 서비스로 보냅니다.
• 처리된 이미지는 반환되어 제공을 위해 저장됩니다.

결과

• 사용자가 만족합니다: 이미지가 빠르게 로드되고 모든 기기에서 멋지게 보입니다.
• 관리자는 만족합니다: 업로드하기 전에 이미지 크기 조정이나 최적화에 대해 걱정할 필요가 없습니다.
• 개발자가 만족합니다: 프로세스가 자동화되어 추가 작업이 필요하지 않습니다.
• 서버가 행복합니다: 사진 제공을 위한 대역폭 소비 및 CPU 부하가 감소합니다.

사진 크기 조정을 위해 공공 상용 서비스 중 하나를 사용할 수 있다는 것을 알고 있지만 솔직히 말해서 이날은 업무가 있는 오후였고(의미 - 훨씬 저렴) 모든 측면을 제어할 수 있었습니다.

상업적으로 출시하나요?

저희는 이 솔루션에 매우 만족하여 이 크기 조정 및 변환 서비스를 개선하고 귀하가 사용할 수 있도록 지원하려고 생각하고 있습니다. 그러한 서비스에 관심이 있습니까? 알려줘요. 아마도 우리는 상당한 금액을 삭감할 수 있을 것입니다.

개발자를 위한, 개발자에 의한 - 현 시점에서는 밈일 수도 있지만 이 경우에는 엄연한 진실입니다.

코드(단순화)

크기 조정 측면을 공유할 수는 없지만 선택 항목과 <사진>을 보여드릴 수는 있습니다. 창조. 우리는 PHP로 작업하며 그 방법은 다음과 같습니다.

<그림> 생성 요소

<picture>
  <source srcset="/Upload/2024/03/11/tn-w200-frantisek.webp 1x,
                   /Upload/2024/03/11/tn-w300-frantisek.webp 1.5x,
                   /Upload/2024/03/11/tn-w400-frantisek.webp 2x,
                   /Upload/2024/03/11/tn-w600-frantisek.webp 3x">
  <img src="/Upload/2024/03/11/frantisek.jpg" width="2222" height="2963" loading="lazy" alt="Video poster">
</picture>

우리는 HTML과 PHP가 혼합된 사용자 정의 템플릿 시스템을 사용합니다. (일반적이지 않다는 것은 알지만 우리 요구에 가장 적합합니다.)

<div>



<p>이 코드는 논리를 보여줍니다. 실제로 우리가 하는 일은 파일과 그 변형에 대한 데이터베이스를 보유하고 있으므로 경로 대신 배열과 개체를 사용하여 작업하는 것입니다. 하지만 제가 말했듯이 이것은 우리가 하는 일의 논리를 아름답게 보여줍니다.</p>

<p>그리고 보시다시피 프런트엔드 개발자가 이 코드를 작성하거나 <img> 태그, 소비 시간에 관심이 있는 사람.</p>

<h2>
  
  
  문제점을 지적하자
</h2>

<p>이 방법은 현실 세계에서 문제를 일으키지 않도록 만들어졌습니다. 하지만 빨리 끝내고 싶은 두 가지 개선 영역이 있습니다(완벽주의자의 관점에서 다시 한 번 말씀드리지만).</p>

<ol>
<li>
<p><strong>더블 큐잉</strong></p>

<p>프런트 엔드에서 해당 이미지를 처음 로드한 후 크기 조정을 위해 대기합니다. 웹 사이트의 트래픽이 높으면 실제로 두 번 대기열에 들어갈 수 있습니다. 실제 사용에서는 괜찮습니다. 그래서 두 번 처리됩니다. 트래픽이 많은 웹사이트에서는 1년에 단 두 번만 발생했습니다.</p>
</li>
<li>
<p><strong>대형 이미지 초기 표시</strong></p>

<p>관리자가 큰 사진을 업로드하는 경우 예약된 작업에서 발생하므로 크기를 조정하고 변환하는 데 5~10분 정도 걸립니다. 한편, 그들의 웹페이지에는 큰 사진이 표시됩니다. 실제 사용 시에는 새로운 콘텐츠가 사용자가 방문하기까지 약간의 시간이 걸리는 경우가 많기 때문에 일반적으로 관리자만 이를 볼 수 있습니다. 트래픽이 많은 웹사이트에서는 이 타이머를 1분까지 단축하므로 다시 한 번 문제가 되지 않습니다.</p>
</li>
</ol>

<h2>
  
  
  스토리지 고려 사항
</h2>

<p>이제는 모든 크기와 형식에 대한 여러 이미지가 있으므로 저장 공간이 많이 필요할 수 있다는 점을 지적하실 수 있습니다. 귀하의 웹사이트가 사진과 갤러리로 가득 차 있고 각각에 대한 썸네일과 상세 이미지가 필요한 경우에는 많은 저장 공간을 사용하게 됩니다.</p>

<p>하지만 디스크 공간은 요즘 가장 저렴한 구성 요소입니다. 성능과 사용자 경험의 이점은 일반적으로 비용보다 훨씬 큽니다. 이를 통해 CPU와 전체 인프라 부하가 감소했습니다.</p><p><strong>한편 -</strong> 왜 인프라에 관심을 두나요? 다른 사람이 그 문제를 다루고 있는 거죠, 그렇죠? 그게 제가 많이 듣는 말입니다. 단순한 사실은 그것이 사실이 아니라는 것입니다. 호스팅 회사가 더 많은 고객 없이 로드 증가로 인해 더 높은 대역폭을 위해 하드웨어를 추가해야 하는 경우 이를 유지할 수 없으며 기꺼이 해당 비용을 서버 임차인에게 전가할 것입니다.</p>

<h2>
  
  
  우리의 실제 결과와 경험
</h2>

<p>Google Search Console에서 핵심 웹 바이탈은 그 어느 때보다 친환경적이며 로드 시간은 일반적으로 훨씬 더 낮고 방문자 세션 시간은 더 높습니다(몇 퍼센트이지만 받아들이겠습니다!). 개발자나 관리자가 추가 작업을 할 필요도 없습니다. 모든 것이 원활하게 작동합니다.</p>

<p>저는 모든 개발자에게 이와 같은 것을 사용하도록 적극 권장합니다. 우리가 실제로 백그라운드에서 이 일이 존재하고 그 일을 한다는 것을 잊어버릴 수 있는 동안 그것은 우리에게 많은 일을 해주었습니다. 그리고 모든 시스템을 설정하고 다듬는 것보다 말 그대로 이 글을 더 길게 쓰고 있습니다.</p>

<h2>
  
  
  결론
</h2>

<p>이미지 최적화를 자동화하여 다음을 달성했습니다.</p>

• 각 기기에 맞는 완벽한 이미지 전달
• 페이지 로드 시간과 사용자 경험이 향상되었습니다.
• 개발자의 수작업이 줄어듭니다.

이미지 최적화 작업이 지겹다면 프로세스 자동화를 고려해 보세요. 관련된 모든 사람이 윈윈할 수 있습니다.

이미지에 체계적인 솔루션을 사용하시나요?

아니면 수동으로 변환하시나요?

AVIF를 사용해 보셨나요? 더 큰 이미지에 놀라운 이점이 있습니다.

위 내용은 웹 이미지: 크기 조정 및 완벽하게(그리고 자동으로) 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!