우리는 고화질 세상에 살고 있습니다. 그리고 우리 대부분은 하루에 XNUMX 시간 이상 다양한 유형의 화면을 보며 이미지의 품질 이 화면에 포함 된 문자는 매우 중요합니다.
몇 년 동안 만 사용할 수 있었지만 Retina 디스플레이는 미래의 방식입니다. Retina 디스플레이의 높은 픽셀 밀도는 이미지를 선명하고 또렷하게 만듭니다. 그리고 누가 멋지고 선명한 이미지를 좋아하지 않습니까?
을 배우다 웹 사이트 만들기 Retina 화면과의 호환성은 모든 웹 개발자에게 중요한 자산입니다. 유감스럽게도 Retina 지원 디스플레이로 웹사이트를 사용자 친화적으로 만드는 이상적이고 완벽한 솔루션은 없습니다.
따라서 누군가가 가장 완벽한 솔루션을 찾을 때까지 기다리는 동안 웹 사이트를 준비 할 수있는 최상의 옵션을 살펴 보았습니다. 이렇게하면 모든 장치에 Retina가 한 가지 형태로 나타날 때가 오더라도 길을 잃지 않을 것입니다.
그러나 시작하기 전에 시간을 들여서 살펴보십시오. 워드 프레스 테마를 설치하는 방법, 얼마나 많은 플러그인 나는 워드 프레스에 설치해야.
그럼 일하러 가자!
여러 이미지 파일 만들기
기본부터 시작하겠습니다. 웹 사이트에 대한 Retina 모드 지원을받는 가장 쉬운 방법은 다양한 해상도로 여러 이미지 변형 생성. 즉, 각 해상도 유형 (예 : 1x)에 대해 해당 클립의 고해상도 버전 (예 : 2x)을 만들어야합니다.
기본적으로 동일한 파일의 여러 버전을 만들고 WP Retina 2x와 같은 플러그인 또는 retina.js와 같은 스크립트를 사용하여 각 이미지 크기의 "@ 2x"버전을 자동으로 생성하거나 "@ 2x"이미지를 찾아 표시 할 수 있습니다. 각 장치에 해당하는 크기.
동일한 이미지의 여러 버전을 만드는 것은 시간이 많이 걸리는 프로세스 일 수 있다는 것은 사실입니다. 불행히도 이러한 이미지를 자동으로 생성하는 빠른 방법은 없습니다. 하나, 이미지를 빠르게 복구 할 수있는 몇 가지 Photoshop 플러그인이 있습니다..
"와 같은 플러그인 그것을 다시 retinize Retina 디스플레이에 맞게 디자인을 쉽게 최적화 할 수있는 일련의 Photoshop 작업입니다. 이전 버전의 Photoshop (CC 이전)을 사용하는 경우 " 네 기본적으로 현재 Photoshop Generator 도구가 수행하는 모든 작업을 수행하지만 이전 버전의 Photoshop에서는 수행합니다.
SVG (Scalable Vector Graphics)
Retina 모드로 진행하는 가장 쉬운 방법은 웹 사이트에서 SVG (Scalable Vector Graphics)를 사용하는 것입니다. SVG는 XML 기반 벡터 이미지 형식입니다. 이름에서 알 수 있듯이 SVG 이미지는 확장 가능합니다. 즉, 이미지를 필요에 따라 늘릴 수 있고 선명하고 또렷하게 유지할 수 있습니다. 많은 노력없이 Retina 모드를 구현하는 빠르고 쉬운 방법이 될 수 있습니다.
읽기 : 기존 PNG 및 JPG 대신 WebP 이미지를 제공하는 방법
그러나 WordPress에서 SVG를 사용하는 데는 두 가지 단점이 있습니다. 첫 번째는 벡터 형식이므로 SVG가 모든 이미지에 적합하지 않다는 것입니다. 따라서 로고 및 아이콘에 SVG를 사용할 수 있지만 사진 (웹 사이트에 고해상도 이미지를 사용하려는 경우 약간 고통 스럽습니다.). 그러나 간단한 아이콘, 애니메이션 또는 일러스트레이션을 사용하려는 경우 SVG 파일은 Retina 호환 웹 사이트의 옵션이 될 수 있습니다.
WordPress에서 SVG를 사용하는 두 번째 단점은 보안 문제로 인해 WordPress와 공식적으로 호환되는 형식이 아니라는 것입니다. SVG 파일은 본질적으로 XML 파일이므로 XML 파일 형식과 관련된 모든 알려진 취약점강압적 분석, XML XEE (External Entity Attacks), XML XDoS (Denial of Service Attack) 공격 등
그러나 웹 사이트에 대해 SVG 지원을 활성화하여 SVG 파일을 안전하게 만드는 방법이 있습니다.
WordPress에서 SVG를 안전하게 활성화하는 방법
안전한 SVG 웹 사이트에서 SVG 파일 지원을 안전하게 활성화 할 수있는 플러그인입니다. 이 플러그인은 웹 사이트에 영향을주는 잠재적 인 XML 취약점을 방지하기 위해 SVG 파일을 치료합니다.
SVG에서 WordPress 미디어 라이브러리로 업로드 할 수있는 MIME 유형을 허용하는 플러그인은 웹 사이트에 위험하고 잠재적으로 유해하므로 사용하지 마세요. 따라서 WordPress에서 SVG 형식을 사용하고 싶다면 안전하게 사용하고 첫 번째 SVG 플러그인을 다운로드하지 마십시오.
Google을 읽고 블로그로 더 많은 전환을 유도하십시오. 블로그 방문객을 더 많이 생성하는 15 콘텐츠 유형
WordPress에서 Retina 호환성을 통합하기위한 일부 플러그인
Retina 모드 호환 웹 사이트를 설정하려고 할 때 삶을 훨씬 쉽게 만들어 줄 수있는 Retina 호환성을위한 몇 가지 스크립트와 플러그인이 있습니다. 그러나 앞에서 언급했듯이 사용 가능한 대부분의 플러그인 및 스크립트는 고해상도 디스플레이 용으로 만 고해상도 이미지로 이미지를 대체합니다. SVG처럼 늘어나지 않습니다. 해상도가 다른 여러 이미지를 만들어야합니다.
1-retina.js
retina.js 고해상도 이미지를 제공하는 데 가장 많이 사용되는 스크립트 중 하나입니다. 이것은 Retina 디스플레이가있는 장치에 고해상도 이미지를 쉽게 제공 할 수있게 해주는 오픈 소스 스크립트입니다.
스크립트는 페이지의 각 이미지를 확인하여 해당 이미지의 고해상도 버전이 서버에 있는지 확인합니다. 고해상도 변형이있는 경우 스크립트는 표준 해상도를 고해상도 이미지로 바꿉니다. 이것은 웹 사이트에서 Retina 디스플레이 용 이미지를 제공하는 가장 일반적인 방법 중 하나입니다.
참조 : GIF, 이모티콘 또는 밈 : WordPress 웹 사이트에 대한 좋은 아이디어?
2-밀도
retina.js와 비슷한 밀집한 픽셀 비율 형식으로 이미지를 제공하는 쉬운 방법을 제공하는 jQuery 플러그인입니다. 스크립트는 초기화의 $ .fn.dense () 메서드를 호출합니다.이 메서드는 필요에 따라 Retina 모드 호환 이미지로 사용할 "img"태그를 대상으로합니다.
따라서 retina.js 스크립트와 마찬가지로 모든 이미지를 해당 고해상도 버전으로 바꿉니다.
3-WP Retina 2x
후자는 마법의 Retina 이미지 생성기에 비유 할 수 있습니다.
WP 망막 2x High-DPI 장치에 필요한 이미지 파일을 생성하고 그에 따라 방문자에게 표시하는 플러그인입니다. 이전 두 스크립트와 달리 초기 이미지에서 다른 해상도 이미지를 생성합니다. 따라서 해상도가 다른 여러 이미지를 수동으로 만드는 데 너무 만족스럽지 않은 경우이 옵션이 적합합니다.
이 튜토리얼의 전부입니다. 이미지를 Retina Ready 이미지로 변환 할 수 있기를 바랍니다.
프리미엄 워드 프레스 플러그인도 만나보세요
당신은 다른 것을 사용할 수 있습니다 워드 프레스 플러그인 현대적인 외관을 제공하고 블로그 또는 웹사이트의 처리를 최적화합니다.
우리는 여기에 당신을 도울 수있는 프리미엄 WordPress 플러그인을 제공합니다.
1. 멋진 WordPress 저자 목록
이름에서 알 수 있듯이 플러그인은 멋진 워드 프레스 저자 목록 웹 사이트 작성자 목록을 위젯에 표시합니다. 그것은 간단한 사용자 인터페이스를 가지고 있습니다 저자의 정보를 표시 사이드 바에서. 제작자 위젯을 사이드 바로 드래그하기 만하면 플러그인이 작동합니다.
주요 기능은 다음과 같습니다. 블로그 작성자를 표시합니다 새로운 방문자를 유치 할 수있는 재미있는 방법으로, 사이드 바 또는 페이지에 작성자 목록을 표시하는 기능, 경쟁을 시작하다 블로그 작성자 사이의 반응 형 레이아웃, 단축 코드 지원 등이 있습니다.
2. 쉬운 목차
Ce 워드 프레스 플러그인 사용자 친화적으로 게시물, 페이지 및 사용자 정의 게시물 유형에 목차를 삽입할 수 있습니다. 많은 기능이 있으며 주요 기능은 다음과 같습니다.
목차 자동 관리, 태그 지원 , Rankin Math 플러그인 지원, Gutenberg와 같은 여러 페이지 편집기와의 호환성, Divi, Elementor, WP 베이커리 페이지 빌더 및 기타, 발행물을 표시 할 페이지를 선택할 수있는 가능성, 특정 페이지에 목차 자동 삽입 및 기타 여러 기능이 있습니다.
그것은이다 워드 프레스 플러그인 목차를 표시하는 데 필요한 모든 것을 갖춘 프리웨어이므로 자유롭게 선택하십시오.
3. WooCommerce 고급 일괄 편집
제품 카탈로그를 정기적으로 편집합니까? 100개의 제품을 가지고 있든 10.000개의 제품을 가지고 있든 이것은 워드 프레스 플러그인 프리미엄은 내 겸손한 생각에 "꼭 있어야 할 것"입니다. (가장 먼저 떠오르는 단어입니다).
몇 달러에 대해서만, 플러그인 WooCommerce 고급 대량 편집 인생을 편하게하고 괴물의 시간을 절약 할 수 있습니다. 망설임없이 폭탄입니다.
추천 자료
웹 사이트 구축 및 관리에 도움이되는 기타 권장 리소스에 대해 알아보십시오.
- 5의 트래픽 소스 당신이 아마 알고
- 사례 연구 : 콘텐츠 마케팅, 실수를하는 방법을 배울 수
- 프리랜서가 매일 스케줄을 필요로하는 이유
- 성공적인 블로그를 만드는 데 도움이됩니다 7 측면
결론
여기 ! 이것으로 웹 사이트 용 Retina-Ready 이미지를 만들 수 있기를 바랍니다. 주저하지 마십시오 좋아하는 소셜 네트워크에서 친구들과 공유.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요한 경우에 대한 가이드를 참조하십시오. 워드 프레스 블로그 제작.
제안이나 의견이 있으면 섹션에 남겨주세요 commentaires.
...
