Bonjour Plugin #20 🔌 – Imagify, pour optimiser vos images sur WordPress

요리사 님, Alex입니다! #BonjourPlugin에 오신 것을 환영합니다 WordPress 확장명을 나타냅니다

에피소드 번호 20의 경우 Imagify 확장 프로그램에 남아 있습니다 가자! [음악] 그렇다면 Imagify 란 무엇입니까? 나는 이미 블로그에서 그것에 대해 이야기했지만 구체적으로 그것은 우리 사이트의 이미지를 압축하는 데 사용될 확장입니다 때때로 우리는 너무 큰 이미지를 보내고 갑자기 시간이 걸립니다 페이지를로드하는 데 시간이 오래 걸리면 사이트 또는 비즈니스 용이 아닙니다 결국에는 아무도 끝나지 않으므로 귀하의 관심사는 빠르게로드되는 이미지 그것이 Imagify가 매우 흥미로운 이유입니다 또한 중요한 것은 이미지가 종종 무게의 50 % 이상을 차지한다는 것입니다 웹 페이지를 최적화 할 수 있다면 (저기서 마이크로 최적화하지 않고) 우리 사이트에

기술적 인 프로필이없는 경우 확장명이있는 이미지에 초점을 맞 춥니 다 Imagify와 같이 모든 것을 바꿀 것입니다 내가 지금 제안하는 것은 Imagify를 가져가는 것입니다 지정하지 않았지만 확장명 "프리미엄"입니다 한 달에 25MB의 이미지를 최적화 할 수있는 무료 부분이 있습니다

도착한 달에 25MB의 새 크레딧이있는 경우) 또한 "한 번에"월 패키지 또는 팩이 있습니다 나는 실제로 큰 소비가 없기 때문에이 솔루션을 선호합니다 Marmite 및 내 모든 사이트의 사진이지만 모든 것은 프로젝트에 따라 다릅니다 개인적으로이 작은 팩을 더 권장합니다 비디오를 촬영하기 직전에 3GB의 작은 팩을 구입했는데 비용이 24였습니다

-$ 25 (따라서 $ 19 + 프랑스 부가가치세) 거기에 3GB가 남았으므로 1 년 이상 걸릴 것입니다 우리는 그립을 공격? 어서 가자! 여기 내 로컬 사이트의 WordPress를 관리하고 있습니다 계정을 만들라는 Imagify를 설치했습니다 거기에서 내 계정이 이미 생성되었으므로 새 계정을 만드는 것은 쓸모가 없습니다

그런 다음 사이트를 서비스에 연결하려면 API 키를 복구해야합니다 이미지가 Imagify로 이동하여 다시 이미지를 보내므로 Imagify의 압축 "Recover my API key"를 클릭합니다 당신에게 그것을 보여주지 마라, 나는 멋지지만 나도 좋은 사마리아인이 아니다) "연결"을 클릭하면 링크가 만들어집니다! 지금 더 많은 설정이 있습니다 작은 괄호 : Imagify 웹 사이트에서 직접 이미지를 최적화 할 수도 있습니다

드래그 앤 드롭 할 수 있습니다 WordPress에서 필요하지 않은 경우에도 갈 수 있습니다 서비스를 통해 직접 이미지를 압축합니다 이제 설정이 완료 되었습니까? 간단하게 일반, 공격적 및 울트라의 세 가지 최적화 모드가 제공됩니다 물론 "울트라"는 가장 잔소리가 있습니다 일반적으로 기본 이미지와 압축 이미지간에 차이가 없습니다

좀 더 부끄러워서 "공격적"을 선호합니다 "Normal"에서는 할 수 있지만 지금은 "Aggressive"에 넣는 것을 선호합니다 "Ultra"에서 테스트를 할 수 있다면 좋을 것입니다! 우리는 넣어 "Ultra"에서, 우리는 미쳤다! 따라서 "송신 된 이미지를 자동으로 최적화하십시오": 예 (목적, 모든 것이 구성된 후에는 만지지 마십시오 이미지를 보낼 때마다 최적화됩니다 우리는 "원본 이미지의 사본을 유지합니다" 예 "이미지의 모든 EXIF ​​데이터를 유지하십시오": 당신은 사진 작가가 아닙니다 이 데이터가 필요하면이 데이터가 없으면 클릭하십시오 필요하지 않은 채로 두십시오

그는 또한 WEBP 최적화를 제안합니다 WEBP는 내가 틀리지 않은 경우 Google에서 개발 한 이미지 형식입니다 그렇지 않으면 실제로 매우 압축 된 이미지를 가질 수 있습니다 비트 기록 형식 인 JPEG 또는 PNG로) 새로운 "테두리"는 WEBP이므로 "창조" WEBP 이미지 형식 " "이미지 크기 조정이 너무 큼": 너무 그렇습니다 이미 2000 픽셀 너비로 크기 조정이 흥미로울 수 있습니다

이 이미지를 나중에 최적화 할 수 있습니다 너무 큰 공간을 잃어 버리고 매우 큰 크레딧에 대한 Imagify 크레딧을 소비하지 않습니다 이미지 거기서 Astra를 사용하고 테마 이미지도 최적화 할 수 있으므로 클릭하겠습니다 여기에 어떤 이미지 크기를 최적화해야하는지 묻는 메시지가 표시됩니다 (참조 귀하의 사이트에서 사용하는 것)

나는 모든 것을 남기는 경향이 있으므로 모든 것이 최적화되었지만 후에는 최적화하지 않으려는 이미지 형식 (표시되지 않을 수 있음) 사이트)의 선택을 취소 할 수 있습니다 아무것도 크레딧을 사용하지 않아도됩니다 마지막 옵션은 "도구 모음에 메뉴 표시"입니다 : 숨기거나 떠나라 상상해보십시오 나는 그것을 유지하는 경향이 있지만 나중에 당신이 상단에 너무 많은 일을하면 비활성화 할 수 있습니다

우리는 변경 사항을 저장하고 짜잔, Imagify가 구성되었습니다! 여기에 새 기사를 만들고 이미지를 보내겠습니다 나는 코르시카에서 돌아온다 우리는 사랑하는 아들과 아들과 함께 10 일을 보냈으므로 사진을 찍을 것입니다 코르시카에서 압축하면 좋은 사례가 될 것입니다 우리는 휴일에 관한 기사를 코르시카에 썼다고 말할 것입니다 blah blah blah 그리고 지금 사진을 넣고 싶습니다

이름을 바꿉니다 (여전에도 이미지 이름을 바꾸는 것이 좋습니다 "아작시오의 피 묻은 섬의 코르시카" 코르시카에 가면 산책하러 가면 좋습니다 슈퍼 좋아요 그래서 여기에서 이미지가로드되는 것을 볼 수 있듯이 이미지의 균형을 맞 춥니 다

거기서 그녀는 서버로 보내지고 Imagify가 그것을 처리 할 것이라고 상상한다 자동으로 그래서 여기는 완전히 투명하고, 우리는 상상 행위조차 보지 못합니다 "대체 텍스트": "피의 섬에서 산책" 이제 게시하겠습니다 정말 미니멀 한 기사지만 그것은 당신에게 보여줄 것입니다

다시 돌아 가면 이미지가 있습니다 (기본 이미지는 87MB : 비프 다) Imagify가 직업으로 무엇을했는지보기 위해 행정부에서 미디어 거기에 최적화되어 있으므로 조금 기다려야합니다 – 여기서 우리는 이미이 로컬 사이트에서 다른 이미지를 다른 사람들에게 보냈습니다

#HelloPlugin 에피소드 예를 들어이 이미지는 3MB ~ 352KB 그래서 시작의 이미지는 8MB에서 1MB로 바뀌 었습니다 우리는 91 % 이상을 얻었으므로 꽤 시원합니다 ( "Ultra") 원본과 최적화 된 그래픽 차이가 있는지 살펴 보겠습니다 Aaah

보트를 보면 여전히 차이가 있습니다 "Ultra"에서는 원본 이미지보다 조금 더 흐릿하다고 생각합니다 그래서 내가 부끄러워 할 권리가있었습니다

우리가 할 일은 "공격적"으로 다시 최적화하고 우리는 큰 차이가 있는지 실제로 볼 것입니다 그 후 이미지가 축소되면 이미지가 표시되지 않는 것이 사실입니다 전체 크기 분명하지 않습니다 -사진을 확대하면 약간 픽셀 화됩니다

– 여기에서 이미지는 "공격적"으로 다시 최적화됩니다 우리는 그 일이 일어나기를 기다리고 있습니다 입니다! 이후 사진을 다시 최적화했습니다 복원하기 위해 더 잘했을 것입니다 따라서

"원본과 최적화 비교": 선호합니다! 더 흥미 롭습니다 -당신이 볼지 모르겠지만 차이점이 없습니다 좋아요 – 우리는 8

27MB에서 300KB로 끝났으므로 잘 작동합니다 Imagify에서 할 수있는 또 다른 일은 "대량 최적화"입니다 어떻게해야하는지 보여 드리겠습니다 "미디어", "대량 최적화"를 클릭하면 다른 인터페이스가 있습니다 : "미디어 라이브러리"에서 "IMAGIF'EM ALL"버튼을 클릭하십시오

후 클릭하면 모든 것이 최적화됩니다 글쎄, 나는 이미 완료되었으므로 모든 것을 다시 최적화하지 않을 것입니다 하나를 최적화하기 위해 많이 사용되지 않는다고 생각합니다 여기에 내가 상상을했다고 생각합니다 이것에 대해 다른 말을해야합니까? 상상은 프랑스어입니다

WPMedia 팀에 의해 설계되었으므로 확장 프로그램을 게시 한 회사는 WPRocket 나는 당신에게 많은 시간을 이야기했습니다, 그것에 대해 이야기하는 것도 좋습니다 이미지를 최적화하기 위해 무엇을 사용하는지 알고 싶습니다 당신은 상상을 계속하거나 다른 확장 기능을 가지고 있습니까 정기적으로 사용 하시겠습니까? 또는 이미지를 보내기 전에 이미지를 최적화 할 수 있습니다 WordPress에서 사진 소프트웨어 또는 다른 소프트웨어를 사용하고 있습니까? 관심이 있어요 의견에 대해 알려 주시면 물론 구독 해 보시기 바랍니다 #BonjourPlugin의 향후 에피소드와 다른 모든 시리즈 비디오를 (모든 것은 #DisSeeAlex, # InstantTheme 등입니다) 이것에 나는 당신에게 당신의 위치에 행운이 있기를 바란다

!

How To Optimize Images For WordPress

– 다른 비디오로 돌아 왔습니다 제 이름은 래리 스노우 (Larry Snow)입니다

이 비디오에서, 두 가지 이미지 압축 도구를 보여 드리겠습니다 내가 매일 사용하는 내 웹 사이트에 이미지를 업로드하기 전에, 왜 이미지 압축을하는지 알려 드리겠습니다 빠른 로딩 웹 사이트에서 큰 요소입니다 시작하겠습니다 (전기 터지는 소리와 정적 잡음) 이미지는 종종 대부분의 다운로드를 차지합니다

웹 페이지의 바이트 및 자주 차지할 수도 있습니다 상당량의 시각 공간 결과적으로 이미지를 최적화하면 종종 가장 큰 바이트 절약 중 일부 웹 사이트의 성능 개선 브라우저가 다운로드해야하는 바이트 수가 적을수록, 클라이언트의 대역폭에 대한 경쟁이 줄어들고, 브라우저가 더 빨리 다운로드 할 수 있습니다 유용한 콘텐츠를 화면에 표시합니다 큰 이미지가있는 사이트에서 한 번도 기다리지 않았다면 파일을로드해야하는 이유는 이미지 압축 필수적이다

이미지를 압축하려면 멀리 가져 가야 함을 의미합니다 또는 이미지의 일부를 다시 그룹화하거나, 그래서 적은 공간을 차지합니다 로드 시간이 길면 더 많은 고객이 발생합니다 다른 페이지를 찾아 귀하의 페이지를 포기하십시오 로드 시간이 길면 웹 사이트에 영향을 줄 수 있습니다

Google 검색 결과 순위 압축에는 두 가지 기본 알고리즘이 사용됩니다 손실과 무손실 손실 된 압축으로 인해 변경됩니다 더 낮은 품질의 이미지를 만듭니다

파일을 작게 만들수록 더 눈에 띄게됩니다 원본과의 차이점 압축 된 파일이됩니다 무손실 압축 알고리즘 어떤 정보도 버리지 말고, 그래서 그들은 더 큰 파일을 만들어 낸다 손실 압축보다 생성됩니다 무손실 압축은 더 나은 방법을 찾습니다

정보를 저장하고 그림 어떤 품질을 잃지 않습니다 손실 유형의 이미지의 예는 JPG이며, 또는 JPEG 또는 JPEG GIF 이미지 (GIF)가 또 다른 예입니다 무손실 이미지 유형은 PNG 및 TIFF, TIFF입니다 사용할 수있는 여러 가지 도구가 있습니다

이미지를 압축합니다 이 동영상에서는 Google 크롬 실험실을 보여 드리겠습니다 웹 앱, Squoosh 및 Optimizilla 내가 시도한 다른 것들은 Compressorio, TinyPNG 및 Compressnow

Squoosh와 Squoosh로 시작합시다 내가 지금 화면에 가지고있는 것입니다 프로그레시브 웹 앱 또는 PWA입니다 데스크톱 및 모바일의 모든 브라우저에서 작동하며, 동급 최강의 코덱을 제공합니다 브라우저 내에서 이미지를 압축하고 비교할 수 있습니다 Chrome OS 사용자 및 Windows 10 사용자는 PWA이므로 최신 버전의 Chrome 사용 네이티브 앱처럼 Squoosh를 사용할 수 있습니다

자, 여기서부터 시작하겠습니다 그들이 가지고있는 데모를 바로 여기 있습니다 우리는 그것을 클릭 할 것이고, 이것은 인터페이스입니다 왼쪽에있는 것은 원본입니다 당신이 옳은 것은 압축하는 것입니다

그리고 그 사이의 경계는 각각의 차이입니다 여기에있는 도구 중 일부를 살펴 보겠습니다 그래서 저는 맨 아래에 크기를 줄일 수 있습니다 내가 뭘보고 있는지 그래서 전체 그림을 얻거나 확대 할 수 있습니다

이미지를 다른 방향으로 배치하는 방법이 있습니다 오른쪽에는 압축 도구가 있습니다 실제로 크기를 조정할 수는 있지만 압축하지는 않습니다 그러니 실수하지 마십시오 하지만 Facebook 크기처럼 크기를 조정할 수 있습니다

또는 당신이 무언가 사각, 또는 그 유형의 것을 원한다면 또한 이미지 품질을 지니고 있습니다 이제 이것은 Photoshop에서 볼 수 있습니다 나는 Photoshop에서 우리가 낮은, 중간, 높은 것을 알고있다 그리고 당신은 여기에서 그것들을 또한 선택할 수 있습니다

당신이 그것을 크기를 조정할 때 팔레트를 줄이는 방법도 있습니다 이는 색상 수를 줄이는 것을 의미합니다 화면에 표시됩니다 또한 압축률을 선택할 수 있습니다

당신이 원하는 버전 이제 크롬이 사용하고있는 것, 그리고 그들이 지금 추진하고있는 것은 WebP입니다 그것은 다른 것들을 가지고 있으며 MozJPEG로 기본 설정되어 있습니다 Squoosh를 처음로드 할 때 그러나 JPEG를 PNG로 변경할 수 있습니다

OptiPNG 또는 브라우저 PNG를 사용하여, PNG를 업로드하는 경우 JPEG로 축소 할 수 있습니다 다음 단계는 품질 범위입니다 그래서 0에서 100의 척도로 따라서 이미지를 처음로드 할 때, 그것은 당신에게 75 품질을 제공 할 것입니다 이것은 원래와 아주 가깝다고 말할 것입니다

그리고 이것은 내가 그것을 줄일 수있는 한 똑같이 보이게하십시오 그리고 내가 일반적으로하는 일은 그것을 해치려 고 노력하는 것입니다 우선, 나는 279 메가 바이트를 업로드하지 않고있다 Squoosh에게 웹 사이트를 줄이기 위해

어쩌면 뭔가를 갖고 싶어 킬로바이트 단위로 표시하고 그것을 업로드하여 그것을 줄이려고합니다 더 낮은 킬로바이트를 얻으려면, 맞죠? 그래서 내가 얼마나 멀리 갈 수 있는지에 대한 연구를 시작합니다 품질을 많이 잃지 않고? 이제 당신은 여기를 볼 수 있습니다, 제가 이것을 조금만 움직이면, 여기 오른쪽에서 볼 수 있습니다 그건 픽셀 화되기 시작 했어

우리가 27의 질에 그것을 가지고있을 때 그래서 나는 보통 60 주위에 끝납니다 자, 여기에 원본을 보면, 당신은 그 차이를 실제로 말할 수 없습니다 그러나 다시 한번 말하지만, 이것은 거대한 이미지입니다 그래서 그것을 79 % 줄였습니다

환상적입니다 그러나 다시, 나는이 유형의 예제를 사용하지 않을 것이다 하지만 이것은 당신들에게 핸들을주기위한 것입니다 Squoosh가 정확히 무슨 일을하는지 이제 여기서 다른 옵션들을 사용한다면, 압축 옵션, WebP로 전환하면 더 많은 옵션이 있습니다

압축 도구에서 이제 고급 설정을 보여 드리겠습니다 따라서 특정 채널을 압축 할 수 있으며, 알파 품질과 마찬가지로 알파 필터 품질 필터 강도를 조정할 수도 있습니다 다른 전환을 할 수 있습니다

따라서 전환에 대한 자세한 내용은 WebP로 전환하면 브라우저 PNG를 클릭하면 당신은 매우 많은 옵션을 가지지 않을 것입니다 그래서 저는 보통 MozJPEG입니다 왜냐하면 그것이 가장 단순하기 때문입니다 일을하는 길 나는 WebP의 일부를 정말로 탐구하지 않았다

나는 이미지를 빨리 꺼내야하기 때문에, 그래서 저는 보통 MozJPEG를 사용하여 품질을 봅니다 내가 원본을 비교하는지 확인하십시오 내가 압박하고있는 사람에게 내가 아는 한 그것은 꽤 가까운 비교 일 예정이다 그런 식으로 나는 꽤 좋은 이미지를 가지고 있음을 안다 그것은 웹 사이트에서 볼 수 있습니다

그래서 Squoosh입니다, Optimizilla로 가보자 그리고이 두 가지 모두 무료입니다 나는 그것을 언급하지 않았다 따라서 Optimizilla는 또 다른 온라인 이미지 최적화 프로그램입니다 최적화 된 스마트 조합을 사용합니다

JPEG 축소를위한 손실 압축 알고리즘 및 PNG 이미지를 가능한 최소 크기로 요구되는 수준의 품질을 유지합니다 Squoosh와 달리 무손실 옵션이 있습니다 우리가 WP 버전으로 간다면, 여기서 우리가 할 수있는 무손실 버전이 어떤지보십시오 Optimizilla에는 무손실 버전이 없습니다 그것은 단지 손실입니다

그래서 Optimizilla의 위대한 기능 중 하나 한 번에 20 개의 파일을 업로드 할 수있는 기능입니다 한 번에 20 개의 이미지 그리고 드래그 앤 드롭 만하면됩니다 또는 업로드를 클릭하고 최대 20, 그들을 안으로 수입하십시오 이 데모를 위해, 나는 단지 우리 사진을 부여 잡을 예정이다

우리 Squoosh로부터, 그리고 그것은 압축을 할 것입니다, 그리고 말할 것입니다 좋습니다 이것이 최고의 결과입니다 나는 너를 줄 수있어 원본과 비교해보십시오

다시 한 번 거대한 이미지이므로 43 % 나 줄였습니다 우리는 조금 더 잘할 수 있다고 생각합니다 비교가 있으므로 여기를 확대 할 수 있습니다 눈을 보자 나는 눈을 생각한다

가장 세부 사항이 있습니다 자, 제가 70으로 줄이면, 우리는 눈이 시작되고 있음을 알게 될 것입니다 조금 흐려지기 그리고 제가 조금 더 줄일 수 있다면, 훨씬 더, 축소 할 때도 상대적으로 같습니다 우리가 0, 10, 당신은 분명히 거기 pixelation을 볼 수 있습니다

원래 대비 그래서 저는 제 이미지에 픽셀 화를 원하지 않습니다 하지만 나는 가능한 한 많이 줄이고 싶다 이미지 품질과 스타일을 손상시키지 않습니다 나는 그것이 꽤 좋다라고 생각한다, 눈을 보게 해주세요

그래서 우리는 그것을 85 % 줄였습니다 그것은 환상적입니다 특히 그러한 큰 이미지의 경우 그래서 여기에서, 당신은이 다운로드를 클릭 할 것입니다 여기에있는 버튼, 노란색 하나, 또는 둘 이상이있는 경우 모두 다운로드를 클릭 할 수 있습니다

그래서 두 가지를 비교해 보면 알 수 있습니다 업로드 한 JPG를 변경할 수 없습니다 여기에 업로드 한 JPEG 사진은 변경할 수 없습니다 JPG로 다운로드됩니다 내가 들어갈 수있는 Squoosh와는 달리, 나는 말한다

좋아, 나는 그것을 훨씬 더 크게 원해 OptiPNG를하고 싶습니다 그러면 OptiPNG를 다운로드 할 수있게됩니다 JPG의 PNG 그래서 그것은 Squoosh에게 독특한 것입니다 그래서 이것은 JPEG를 업로드하고 JPEG를 다운로드합니다

그래서 그것은 하나의 차이점입니다 또한, Optimizilla는 훨씬 간단한 제어 기능을 가지고 있다고 생각합니다 잠시 동안 여기에서 나는 모든 것을 알아 내려고 노력했다 Resize 옵션이 마음에 들지만 압도적 인 느낌이었습니다

특히 WebP로 전환 할 때, 이 모든 것이 무엇을 의미하는지 알아 내기 위해, 특히 당신이 진보 된 것을 보여줄 때 이제 나는 이미지에 아주 능숙한 사람이 될 것이라고 확신한다 및 이미지 품질, 그리고 아마 사진 작가, 또는 사진에 관심이 있거나 이러한 모든 옵션을 알고 있다면, 그러나 웹 개발자, 마케팅 담당자, 당신이 알고 싶은 모든 것, 이것이 내 이미지를 압축합니까? 충분히 좋으며 여전히 품질을 유지해야합니다 내 웹 사이트에 업로드 할 수 있습니다 조금 더 빨리로드 할 수있게하려면? 이 동영상을 시청 해 주셔서 감사합니다

나에 대한 더 자세한 정보는 LarrySnowme로 이동하십시오 다음 비디오에서 뵙죠

How to Add Images to WordPress Blog Posts and Pages

안녕하세요! 이것은 WinningWP가있는 Topher입니다 이 동영상에서 우리는 WordPress 블로그 게시물에 이미지를 추가하는 방법

나는 곧바로 다이빙을하고 보여줄거야 당신과 우리는 어떻게 그것이 완료되었는지에 대한 상세한 목록을 검토 할 것입니다 가장 먼저 새 게시물을 만들거나 기존 게시물을 편집하십시오 새 것을 만들 수 있어요 여기 또는 당신이 이것을 편집 할 수 있습니다

나는 이것을 편집 할 것이다 이제 첫 번째 문제는 대략 이미지를 원할 때 커서를 놓는 것입니다 나는 이 라인의 시작 부분에 여기에 내 것 별로 상관 없어요 한 번 완료되면 이미지를 이동할 수 있기 때문에 유용하지만 커서를 거기에 놓습니다

그래서 우리가 할 첫 번째 일은 클릭 "미디어 추가"이제는 빈 미디어 라이브러리이므로 파일을 업로드해야합니다 그래서 파일 업로드 링크를 클릭하고 파일 선택을 클릭 한 다음 하나는 내 하드 드라이브에서 이제 오른쪽에있는 일부 필드가 있습니다 진입해야한다 제목 전혀 사용하지 않는 것이 좋습니다

구식 태그입니다 사용 된 것보다 더 많이 학대 받는다 선택적으로 캡션을 추가 할 수 있습니다 사람들이 볼 수 있도록 여기에 글을 쓸 수 있기를 바랍니다 대체 텍스트는 여러 가지 이유로 중요합니다

Google에이 사실을 알립니다 이미지가 화면 판독기 사용자에게 도움이됩니다 그림 설명은 관리자 만 사용할 수 있으므로 아무도 볼 수 없지만 무슨 일이 일어나는지 알 수 있도록 설명 이리 그런 다음 몇 가지 디스플레이 설정이 있습니다

당신 이 이미지를 왼쪽, 가운데 또는 오른쪽으로 정렬 할 수 있습니다 나는 왼쪽을 고를거야 그때 전체 크기 이미지가 될 미디어 파일에 연결하도록 선택할 수 있습니다 첨부 파일 페이지, 이미지가있는 WordPress 페이지 또는 맞춤 URL을 사용하면 인터넷의 다른 페이지로 연결할 수 있습니다 나는 미디어 파일을 선택하려고합니다

그리고 나서 바로 여기에 그것이 어디로 갈지 알려줍니다 링크 그런 다음 크기를 선택할 수 있습니다 WordPress에 대한 멋진 점은 이미지를 업로드하면 원래 크기 외에 3 가지 크기가됩니다 그래서 우리는 썸네일은 항상 150 x 150으로 정사각형이며, 비슷한 매체 비율은 원래 300에 불과하지만 전체 크기는이 케이스는 내 원본이므로 매체를 선택하겠습니다

그런 다음 삽입을 클릭합니다 게시물로, 그리고 그게 다야! 이제 내 게시물에 이미지가 있습니다 이제 몇 가지가 있습니다 우리가 할 수있는 많은 일들 당신이 그것을 클릭하면 당신은 당신이 할 수있는 것을 볼 수 있습니다

그것이 오른쪽이나 가운데 정렬되도록하십시오 그리고 그것이 정말로 당신이 원하는 것이 아니라면 연필을 클릭하면 다른 크기 또는 링크 또는 링크를 선택할 수 있습니다 캡션을 넣고 고급 옵션이 있습니다 이 비디오를 볼 필요가 없습니다 재미있게 캡션을 만들어 보겠습니다

그리고 지금 나는 갱신 할 것이고, 당신은 나의 자막을 여기에서 볼 수있다 캡션이 실제로 어떻게 사이트의 프런트 엔드에 나타나는 것은 테마 작성 방법에 따라 다릅니다 그것 다양한 방법으로 보일 수 있습니다 이제 살펴 보겠습니다 먼저, 블로그 게시물을 편집 한 다음 "미디어 추가"버튼을 클릭하십시오

그런 다음 업로드 탭 이제 이미 이미지를 업로드했다면 이미있을 것입니다 미디어 라이브러리에서 당신은 거기에서 선택할 수 있습니다 두 번째 업로드 할 필요는 없지만, 업로드 한 다음 하드 드라이브를 탐색하거나 이미지를 끌어다 놓습니다 귀하의 브라우저와 그것을 업로드합니다

오른쪽의 옵션을 관리합니다 크기 및 대체 텍스트 및 그런 것들에 관한 다음 삽입을 클릭하십시오 우편 그리고 중요하고 내가하지 않은 일은 당신의 게시물을 저장하는 것입니다 간단히 여기에 이미지를 두는 것은 그것이 아직 저장되지 않았다는 것을 의미하지는 않습니다 최신 정보

이제 내 게시물에 이미지가 있습니다 WordPress에 대해 더 자세히 알고 싶다면 밖으로 WinningWPcom

W3 Total Cache Custom File List wilcard CDN rule with divergent WordPress thumbnails – images

모든 WordPress 일은 W3 Total Cache에 의해 CDN으로 올려지지 않습니다 블로그에 약간의 오류가 나타납니다

이 데모에서는 게시물의 첨부 파일로 연결되지 않은 이미지 (Random Post 위젯에서 사용하는 맞춤 미리보기 이미지)에 대한 것이므로이 경우에는 CDN, CloudFront에서 사용할 수 없습니다 "WordPress 템플릿, 페이지 또는 포스트 내에 사용자 정의 디렉토리에 포함 된 새로 생성 된 자산 (예 : 이미지 또는 CSS 파일)을 참조한 적이 있습니까? 이러한 자산이 MaxCDN에 의해 ​​자동으로 캐시 될 것이라고 가정했거나, 그들은 캐시되지 않고 왜 당신이 궁금해하니? " – wpexplorercom http://bitly/custom-directory-w3-WP이 이미지는 W3 Total Cache가 업로드 대기열에 포함될 때까지 사용할 수 없습니다 (404/403 오류) "W3TC의 CDN Cloudfront Origin Push 옵션은 기본 설정에서 언급되지 않은 파일에 대한 모든 참조를 대체합니다

모든 파일이 Cloudfront / S3에 업로드되는 것은 아니므로 403 오류가 발생합니다 전체 목록을 컴파일했습니다 CDN 링크로 대체되고 사용자 지정 파일 목록에 추가 된 파일 "- wordpressorg http://bitly/custom-files-CDN-w3 이와 같이 맞춤 파일 목록 (240×50 축소판)을 포함하도록 맞춤 파일 목록을 변경할 수 있습니다

작은 와일드 카드 문자열입니다 이것이 기본 사용자 정의 파일 목록 규칙입니다 이제 사용자 화 파일 업로드 버튼을 누르면 모든 것이 정상적으로 작동합니다 '변경된 파일 자동으로 내보내기'옵션이이 업로드를 백그라운드에서 처리 할 수 ​​있습니다 "많은 W3 Total Cache 설정이 미리 설정되어 있습니다 (설치 탭에 표시됨)

하지만 성능 탭을 살펴본 다음 Cloudflare (무료) 및 StackPath (무료 30 일 평가판을 제공 한 다음 10 달러 / 월) 각 서버마다 더 많은 데이터 센터가 추가되어 서버와 방문자 간의 지리적 거리가 더욱 줄어들 기 때문에 두 가지를 모두 사용하는 것이 좋습니다 그러나 더 빠른 호스팅 또는 StackPath를 결정할 경우 호스팅은 여전히 ​​1 위의 속도 요소입니다 "- onlinemediamasters com https://onlinemediamasters

com/w3-total-cache-settings/ W3 Total Cache 홈페이지의 홈 페이지에 정의 된 규칙에 대해 자세히 알아볼 수 있습니다 "WordPress에는 많은 캐싱 플러그인이 있습니다 W3 Total Cache 플러그인을 사용하면 설정을 세부적으로 제어 할 수 있으므로이 설정을 최적화하면 성능을 향상시킬 여지가 더 많아집니다 단점은 다음과 같은 경우에 효과를 발휘할 수 있다는 것입니다 너는 네가하고있는 일을 모른다 "- mythemeshop

com http://bitly/optimal-CDN-cache-plugin 와일드 카드를 사용하여 PNG 파일 인 미리보기 이미지 만 업로드하는 데 대한 좋은 데모가 있습니다 "배포를 클릭하면 다음 페이지가 표시됩니다 WordPress 실패 알림 : 정말로 하시겠습니까? 다시 시도하십시오 다시 시도하십시오

맨 위에 노란색 헤더가 표시됩니다를 클릭하십시오 배포 버튼 플러그인이 작동하는지 확인하려면 웹 사이트의 페이지 소스를 확인하십시오 URL 경로에 CNAME이 표시되면 CDN77 네트워크에 웹 사이트를 통합했습니다

"- cdn77com http : // bit ly / wp-integration-w3-caching 그게 다야 🙂

How to Import External Images in WordPress

WordPress에 모든 외부 이미지를 가져 오시겠습니까? 잘 계속 지켜봐주세요이 비디오에서 나는 모든 것을 가져올 수있는 방법을 안내 할 것입니다

귀하의 워드 프레스 웹 사이트에 외부 이미지 이 경우 특히 중요합니다 최근에 다른 플랫폼에서 Blogger, WordPresscom, Weebly, 또는 Joomla 그래서 만약 당신이 준비가 시작하자 기본적으로 모든 이미지는 미디어 라이브러리 영역으로 가져와야합니다

그리고 당신은 바로 여기 그들을보아야합니다 이제 모든 외부 요소를 가져 오기 시작하십시오 이미지를 플러그인 영역으로 넘기고, 새로운 플러그인을 설치해야합니다 우리가 찾고있는 플러그인을 자동 업로드 이미지라고합니다 이것이 우리가 원하는 것은 이제 설치를 클릭하자

설치되면 설치를 원합니다 당신도 그것을 활성화해야합니다 좋아요, 이제 활성화되었습니다 설정 영역, 자동 업로드 이미지를 설정합니다 이들은 모두 기본 설정입니다

대부분의 경우 작동하지만 필요한 경우 여기에서 변경할 수 있습니다 하지만 당신이하고 싶은 것은 모든 것을 아래로 스크롤하고 Save Changes를 클릭하는 것입니다 그러면 설정이 저장됩니다 다음으로해야 할 일은 업데이트해야하는 이미지가있는 게시물 및 페이지 이것은 매뉴얼이다 과정을 조금 더 빨리 할 수있는 방법을 보여 드리겠습니다

그래서 처음 우리는 게시물, 모든 게시물에 갈 것이며, 여러 게시물을 가지고 있다면 뭔가 할 수 있습니다 진짜로 빨리 1 페이지에 그 (것)들을 전부 얻으십시오 당신이 할 수있는 것은 화면에 올라가는 것입니다 옵션 및 페이지 당 항목 수 아래에서이 값을 999로 설정할 수 있습니다 적용을 클릭하면이 페이지에 999 개의 게시물이 표시되어야합니다 이 모든 것을 한 번에 할 수 있습니다

이제 우리는 모든 게시물을 하나씩 가지고 있습니다 이 확인란을 클릭하면 모든 게시물이 선택됩니다 대량 작업에서 수정을 클릭해야합니다 이제 이것을 적용 해 보겠습니다 WordPress에 우리가 변화시킬 수있는 모든 것들을 우리에게 주 옵소서

우리는 우리 모두를 변화시키고 싶지 않다 업데이트를 클릭하면 프로세스 트리거가 수행하는 작업입니다 모든 게시물을 확인하고 모든 이미지가 외부는 우리 미디어 라이브러리로 가져오고 우리를 위해 그리고 이후 업데이트 될 것입니다 조금만 걸릴 수있는 모든 게시물을 업데이트하는 중입니다 환자와 당신이 우리가 업데이 트되었습니다 72 게시물을 볼 수 있습니다

이제 더 많이 가지고 있다면 999 개의 게시물보다 많으면 999 개의 게시물 만 있으면 아래쪽으로 끝까지 스크롤하면 다음 또는 화살표 탭이 나타납니다 게시물의 다음 페이지를 클릭하고 동일한 프로세스를 수행하려면 여기를 클릭하십시오 이제 모두 귀하의 이미지 중 귀하의 미디어 라이브러리에 있어야하며 귀하의 웹 사이트 오늘의 비디오를 배웠습니까? 그렇다면 YouTube 채널을 구독하고 우리는 당신이 당신의 WordPress 웹 사이트를 관리하고 감사 할 수 있도록 도움이되는 팁을 보낼 것입니다 보고있는

Import Post using MS Word Document in WordPress – Upload Images as well

문서 파일에서 소식 만들기 이미지, 콘텐츠 및 테이블 또는 기타 문서가있는 것처럼 질문은 너무 오래 걸리는 포스트 복사 붙여 넣기로 변환 또는 변환 할 수있는 방법입니다 나는 같은 문제로 고통 받고있다

그래서이 "Mammoth docx converter"플러그인을 발견했다 그것은 WordPress 디렉토리에서 무료로 추가 할 수있는 많은 플러그인이 있습니다 플러그인을 활성화 한 후 새 게시물, 페이지 또는 제품 추가 당신은 이미지 파일을 볼 수 있습니다 거기에 넣고 싶지 않아요 게시물의 마지막에는 파일을 선택할 수있는 옵션이 있습니다 "편집기에 삽입"을 클릭해야만 문서 미리보기가 표시됩니다

모든 콘텐츠와 이미지가 귀하의 웹 사이트에 업로드됩니다 보고 주셔서 감사합니다

Avada Theme Edit Images

안녕하세요 저는 DIY Digital의 Fiona Blinco입니다 Avada 테마에서 WordPress 페이지에 이미지를 추가하는 방법에 오신 것을 환영합니다

이 비디오는 일련의 3 개의 튜토리얼 비디오 중 첫 번째 비디오입니다 다른 2 개의 비디오 자습서는 슬라이더 이미지를 대체합니다 및 페이지 제목 배너 이미지 이 비디오는 이미지를 WordPress 미디어 라이브러리에 업로드하는 방법을 알고 있다고 가정합니다 다음은 Avada 테마를 사용하는 WordPress 사이트의 이미지 예제입니다

여기서 우리는 연속으로 3 개의 이미지를 볼 수 있습니다 WordPress 대시 보드에 로그인하고 페이지를 클릭하십시오 이미지를 추가하거나 변경하려는 페이지를 선택하십시오 편집 링크를 클릭하십시오 페이지가로드되는 동안 몇 초간 기다립니다

3 개의 이미지가 보일 때까지 오른쪽으로 스크롤하십시오 각 이미지가 이미지 프레임 안에 설정되어 있음을 볼 수 있습니다 이것이 라이브 사이트에서 어떻게 보 였는지 기억하십시오 이제는 컨테이너 나 요소에 대해 펜 도구를 편집하는 것을 원하지 않습니다 이미지 프레임에 대한 펜 수정 도구를 클릭하십시오

이미지가 나타날 때까지 아래로 스크롤하십시오 편집을 클릭하십시오 현재 사진을 바꾸려는 사진을 선택하십시오 이 사이트에서이 3 행 이미지의 권장 이미지 크기는 다음과 같습니다 718 픽셀 x 479 여기에서 볼 수 있습니다

일반적으로 이미지를 100kB 미만으로 유지하기를 원합니다 이렇게하면 귀하의 웹 사이트가 귀하의 사용자를 위해 빠르게 운영됩니다 웹 사이트의 이미지가 크면 사이트 속도가 느려집니다 페이지에 삽입하십시오 구하다

모든 이미지에 대해이 작업을 반복하십시오 그것은 컨테이너가 아닌 이미지 프레임을위한 펜 도구 편집임을 기억하십시오 최신 정보 라이브 사이트로 이동하여 페이지를 새로 고칩니다 그리고 그게 다야! 완료되면 로그 아웃 할 수 있습니다

페이지에서 이미지를 변경하면 행운을 빌어 요 언제든지 저희를 방문해주십시오 DIYdigitalcomau

WordPress – Avada Theme – Edit Slider Images

안녕하세요, DIY Digital의 Fiona Blinco입니다 사진이나 이미지를 추가하는 방법에 오신 것을 환영합니다

Avada 테마 슬라이더로 이동하십시오 이 비디오는 3 개의 튜토리얼 비디오 시리즈 중 3 번째입니다 Avada 테마를 사용하는 WordPress 페이지에서 이미지를 업데이트하십시오 다른 두 개의 자습서는 페이지의 이미지 바꾸기를 다루고 있습니다 및 페이지 제목 배너 이미지 다음은 슬라이더의 예입니다

슬라이더는 스크롤 할 수있는 사진 그룹입니다 여기서 우리는 슬라이더에있는 임대 부동산 사진 4 장을 볼 수 있습니다 우리는 그것이있는 것에 따라 그것이 4 개의 사진 인 것을 말할 수있다 사진 하단 중앙의 작은 원 4 개 우리는 더 넓은 사진으로 마스터 베드의 클로즈업 샷을 업데이트하고자합니다 이 비디오는 WordPress 미디어 라이브러리에 이미지를 추가하는 방법을 알고 있다고 가정합니다 WordPress 사이트에서 Avada 테마를 사용하는 경우 당신이 볼 수있는 Avada 테마 슬라이더를 사용합니다

왼쪽 탐색 메뉴에서 찾을 수 있습니다 퓨전 슬라이더 슬라이드 추가 또는 수정을 클릭하십시오 새 슬라이드 추가를 클릭하십시오 이 화면에서 완료해야 할 4 가지가 있습니다

슬라이드 이름 지정 링크 유형을 전체 슬라이드로 변경하십시오 슬라이드 또는 사진이 속할 슬라이더 선택 추천 이미지 설정 명명 규칙을 사용하여 슬라이드 이름 지정 귀하의 사이트에 맞는 말이죠 슬라이더가 특정 크기로 구성됩니다 가능한 경우 올바른 크기를 사용하는 것이 가장 좋습니다 이 사이트의 슬라이더는 너비 900 픽셀, 아래쪽 600 픽셀로 설정되었습니다

이름 입력란에서 탭 한 후 몇 초 후에 링크가 생성됩니다 이 시점에서 당신은 당신의 이름이 붙어 있고 다른 세가지 임무를 계속할 수 있다는 것을 압니다 슬라이드 링크 설정까지 맨 아래로 스크롤 슬라이드 링크 유형 필드 기본값 단추를 전체 슬라이드로 변경하십시오 이 사이트에는 다섯 개의 슬라이더가 있습니다 이미 건설 된 각 슬라이더는 다른 페이지에 있습니다

이 숙박 기관이 내리는 게스트 하우스마다 추가 할 슬라이드 또는 사진 햄튼의 슬라이더에 추가됩니다 그래서 이것은 선택되었습니다 이제 우리는 추천 이미지를 설정했습니다 추천 이미지를 클릭하면 미디어 라이브러리로 이동합니다 이 비디오는 이미 이미지를 미디어 라이브러리에 업로드했다고 가정합니다

이미지 선택 게시를 클릭하십시오 라이브 사이트로 이동하여 페이지 새로 고침 이제 우리가 이렇게하면 우리는 새로운 사진을 볼 수 있습니다 마스터 베드의 폭이 넓은 샷이 추가되었습니다 이제 5 개의 사진을 나타내는 5 개의 원이 있음을 알 수 있습니다 이 슬라이더 내에서 완료하면 대시 보드로 돌아갈 수 있습니다

로그 아웃하십시오 슬라이더 이미지 변경시 행운을 빈다 언제든지 저희를 방문해주십시오 DIYdigitalcom

au

Using SVG In WordPress: How To Add Vector Images In WordPress

WordPress는 jpg,

png 및 gif를 비롯한 다양한 이미지 형식을 기본적으로 지원합니다 그러나 SVG 이미지를 사용할 수는 없습니다 문자 SVG는 Scalable Vector Graphics를 나타냅니다 이것은 근본적으로 다릅니다

SVG 만 벡터 기반이기 때문에 다른 이미지 형식과는 다릅니다 즉, 이미지의 크기가 크거나 작더라도 품질을 유지할 수 있습니다 SVG는 가장 유연한 이미지 유형 중 하나입니다 다행히도 WordPress에 SVG를 추가하는 방법을 배우는 것은 아주 간단합니다 이 비디오에서는이 특정 이미지를 가능하게하는 SVG Support 플러그인을 사용할 것입니다

형식을 선택하고 미디어 라이브러리에 지원을 추가합니다 과정은 간단합니다 플러그인을 설치하고 정품 인증을 받아야 활성화 할 수 있습니다 WordPress 사이트에 SVG를 추가하십시오 그러나 필요에 따라 변경할 설정이 두 가지 더 있습니다

먼저 설정 → SVG 지원 탭으로 이동하십시오 내부에는 두 가지 옵션이 있습니다 플러그인의 고급 모드를 처음 켜면 CSS로 SVG를 타겟팅 할 수 있습니다 예를 들어 SVG에 애니메이션을 적용하지 않으려면이 옵션을 건너 뛸 수 있습니다 둘째, SVG를 업로드 할 수있는 기능을 관리자에게만 제한 할 수 있습니다

"Restrict to Administrators"기능 그게 당신 한테 달렸어! SVG는 웹 사이트에서 사용할 수있는 가장 흥미로운 이미지 유형 중 하나입니다 확장 성으로 인해 응답 성있는 사이트에 적합한 옵션이 될뿐만 아니라 특정 상황에서 GIF를 대체 할 수 있도록 애니메이션을 적용 할 수도 있습니다 사실, SVGator라는 웹 기반 앱을 사용하면 벡터 그래픽없이 애니메이션을 만들 수 있습니다 한 줄의 코드 또는 CSS를 만지기 만하면됩니다

그런 다음 벡터 그래픽을 WordPress 웹 사이트로 내보내고 업로드 할 수 있습니다 잘됐다, 그렇지? 이 종류의 이미지를 WordPress 웹 사이트에서 사용하는 것에 대해 어떻게 생각하는지 알려주십시오 아래의 댓글 섹션을 읽고 다른 WordPress 자습서도 확인하십시오 다음 비디오에서 만나요