성능 인식 향상 : 주문형 이미지 크기 조정
- William Shakespeare원래의
- 2025-02-08 09:17:09607검색
이 기사는 성능 벤치마킹 및 최적화를위한 샘플 응용 프로그램 (다중 이미지 갤러리 블로그) 구축에 관한 시리즈의 일부입니다. (여기에서 저장소를 봅니다.)
객관적인
- .
-
> 반응 이미지?
이 게시물에서 설명 하듯이, 현대 웹의 이미지는 엄청나게 복잡합니다. 그냥
대신, 우리는 이제 다음과 같은 미친 것을 가지고 있습니다 :
이제 모든 이미지 URL은 -X를 접미사로 사용합니다. 여기서 X는 크기입니다. 이것은 SRCSET 형태로 IMG 태그에도 적용 할 변경입니다. 다음을 바꾸겠습니다
<span><span><span><picture</span>></span> </span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span> </span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span> </span> <span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span> </span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span> </span> <span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span> </span><span><span><span></picture</span>></span> </span>
.
<span><span><span><picture</span>></span> </span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span> </span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span> </span> <span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span> </span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span> </span> <span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span> </span><span><span><span></picture</span>></span> </span>
<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span> <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span> alt<span>="{{ gallery.name }}"</span>
</span></span><span> <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>
<span>public function getImageUrl(Image $image)
</span><span>{
</span> <span>return $this->router->generate('image.serve', [
</span> <span>'id' => $image->getId(),
</span> <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>
다음으로 앱에 등록합시다. 다음 내용이있는 SRC/서비스에 새로운 서비스를 추가하여이를 수행합니다.
이 서비스는 Symfony의 새로운 자동 승리 방식으로 인해 이미 선언 된 FileManager 서비스를 소비합니다. 우리는 입력 및 출력 경로를 업로드 스 디르로 선언하고 출력 DIR에 캐시 접미사를 제공하고 서버를 반환하는 메소드를 추가합니다. 서버는 기본적으로 크기 조정을 수행하고 크기가 큰 이미지를 제공하는 글라이드 인스턴스입니다.<span>public function getImageUrl(Image $image, $size = null)
</span><span>{
</span> <span>return $this->router->generate('image.serve', [
</span> <span>'id' => $image->getId() . (($size) ? '--' . $size : ''),
</span> <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>
마지막으로, imagecontroller의 ServimageAction 메소드를 수정하여 다음과 같이 보이도록합시다 : 이 방법은 이제 이미지 ID에서 크기를 분리하여 이중 돌리에 의해 이미지 ID를 폭발시킵니다. Doctrine이 데이터베이스에서 이미지의 파일 패스를 가져 오면 크기가 전달되면 크기가 파일 이름으로 다시 부착됩니다. 그렇지 않으면 원본 이미지가 사용됩니다. 이 이미지가 존재하지 않으면 원래 경로에서 생성되어 나중에 사용하기 위해 저장됩니다.
테스트
Symfony에서 주문형 이미지 크기 조정을 어떻게 구현할 수 있습니까? 주문형 이미지의 잠재적 인 단점은 무엇입니까? 크기 조정? 주문형 이미지 크기 조정 설정을 최적화하는 몇 가지 방법이 있습니다. 하나는 CDN을 사용하는 것입니다.이 이미지는 크기 조정 된 이미지를 캐시하고 사용자와 가까운 서버에서 제공 할 수 있습니다. 다른 하나는 클라우드의 이미지를 크기를 조정하여 서버의로드를 줄일 수있는 AWS Lambda와 같은 서비스를 사용하는 것입니다. 또한 품질을 줄이거 나보다 효율적인 파일 형식을 사용하여 이미지를 업로드하기 전에 이미지를 최적화 할 수 있습니다.<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>
결론
이 게시물에서는 사진 지향 사이트에서 배달을 위해 이미지를 최적화하는 과정을 살펴 보았습니다. 우리는 축소판을 최상의 결과를 위해 고정 된 크기로 유지했으며 전체 화면 이미지를 사용하여 Glide와 함께 SRCSET (모든 현대 웹 사이트에 간단한 추가)를 구현하는 데 중점을 두었습니다. 우리. <.>
그러나 우리는 이미지를 크기로 조정하는 동안 메타 데이터를 제거하여 이미지와 크기를 자동으로 최적화하는 것도 현명하지 않습니까? 그리고 사용자가 대기하는 동안 주문형으로 크기를 조정하는 것이 가장 좋은 옵션입니까, 아니면 더 실용적인 접근 방식이 있습니까? 다음 부분에서 알아보십시오. 에 대한 질문이 자주 묻습니다
주문형 이미지 크기 조정은 웹 사이트 성능을 어떻게 향상 시키는가?
주문형 이미지 크기 조정은 이미지의로드 시간을 줄임으로써 웹 사이트 성능을 크게 향상시킬 수 있습니다. 전체 크기 이미지를로드하는 대신 웹 사이트는 뷰어의 화면에 맞는 크기가 크기가 큰 버전을로드하여 일반적으로 더 작고로드가 빠릅니다. 이것은 대기 시간을 줄임으로써 사용자 경험을 향상시킬뿐만 아니라 대역폭을 절약 할 수 있으며, 이는 제한된 데이터 요금제를 가진 사용자에게 유리할 수 있습니다.
주문형 이미지 크기 조정과 기존 이미지 크기 조정의 주요 차이점은 무엇입니까? 기존 이미지 크기 조정에는 웹 사이트에 업로드하기 전에 각 이미지를 수동으로 크기로 조정하는 것이 포함됩니다. 이것은 특히 많은 이미지가있는 웹 사이트의 경우 시간이 많이 걸리고 비효율적 일 수 있습니다. 반면에 주문형 이미지 크기 조정은 사용자가 요청한대로 이미지를 자동으로 크게 선별합니다. 이것은 특정 요구와 장치 기능에 따라 동일한 이미지가 다른 크기로 다른 크기로 제공 될 수 있음을 의미합니다. Symfony LiipimagineBundle이라는 번들을 제공하여 주문형 이미지 크기 조정을 구현할 수 있습니다. 작곡가를 사용 하여이 번들을 설치 한 다음 필요에 따라 구성 할 수 있습니다. 이 번들은 스케일, 작물 및 썸네일 필터를 포함하여 이미지를 조정하는 데 사용할 수있는 다양한 필터를 제공합니다. 템플릿의 'apply_filter'함수를 사용 하여이 필터를 이미지에 적용 할 수 있습니다.
Symfony에서 업로드시 이미지를 크기로 조정할 수 있습니까? 어떻게 조정 된 S3 이미지를 즉시 제공 할 수 있습니까? AWS Lambda와 같은 서비스를 사용하여 즉시 달성 할 수 있습니다. S3 버킷에서 요청 된대로 이미지를 자동으로 조정하기 위해 Lambda 기능을 설정할 수 있습니다. 이 기능은 API 게이트웨이에 의해 트리거 될 수 있으며, 이는 요청 된 이미지 크기를 함수로 전달합니다. 그런 다음 함수는 S3에서 원본 이미지를 검색하고 요청 된 크기로 크기를 조정 한 다음 크기 조정 이미지를 사용자에게 반환합니다.
주문형 이미지 크기 조정에 CDN (Content Delivery Network)을 사용하여 이미지가 사용자에게 전달되는 속도를 크게 향상시킬 수 있습니다. . CDN에는 전 세계 서버가있는 서버가있어서 사용자와 가장 가까운 서버에서 이미지가 제공되어 대기 시간이 줄어 듭니다. 또한 CDN은 크기 조정 이미지를 캐시 할 수 있습니다. 즉, 동일한 이미지를 동일한 크기로 다시 요청하면 캐시에서 직접 제공 될 수있어 성능이 향상 될 수 있습니다.
주문형 이미지 크기 조정은 SEO에 어떤 영향을 미칩니다. ? 주문형 이미지 크기 조정을 반응 형 웹 디자인과 함께 사용할 수 있습니다. ?
예, 주문형 이미지 크기 조정은 반응 형 웹 디자인을 완벽하게 보완합니다. 반응 형 디자인을 통해 웹 사이트 레이아웃은 사용자 화면 크기에 적응합니다. 주문형 이미지 크기 조정을 통해 웹 사이트의 이미지는 사용자의 화면 크기에 적응할 수있어 웹 사이트가 모든 장치에서 훌륭하게 보이고 성능이 잘 작동하도록합니다. 주문형 이미지 크기 조정에는 많은 이점이 있지만 고려해야 할 단점도 있습니다. 이 중 하나는 즉시 이미지를 크기를 조정하는 데 필요한 처리 능력으로, 교통량이 많은 웹 사이트가있는 경우 서버에 부담을 줄 수 있습니다. 또한 주문형 이미지 크기 조정을 위해 타사 서비스를 사용하는 경우이 서비스와 관련된 비용이있을 수 있습니다.
주문형 이미지 크기 조정 설정을 최적화 할 수 있습니까?
위 내용은 성능 인식 향상 : 주문형 이미지 크기 조정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!