Bỏ qua đến nội dung chính

Làm thế nào để tạo hình ảnh Retina Ready cho trang WordPress của bạn

Divi: chủ đề WordPress dễ sử dụng nhất

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Chúng ta sống trong một thế giới có độ nét cao. Và vì hầu hết chúng ta dành hơn tám giờ mỗi ngày để xem các loại màn hình khác nhau, chất lượng hình ảnh và nhân vật trong các màn hình này rất quan trọng.

Mặc dù họ chỉ có sẵn trong một vài năm, màn hình Retina là con đường của tương lai. Mật độ điểm ảnh cao trong màn hình Retina làm cho hình ảnh rõ ràng và sắc nét. Và ai không thích những hình ảnh đẹp và sắc nét?

Học để tạo ra một trang web Retina thân thiện là một tài sản quan trọng cho bất kỳ nhà phát triển web. Thật không may, không có giải pháp lý tưởng, hoàn hảo để làm cho trang web của bạn thân thiện với màn hình Retina-Ready. Vì vậy, trong khi chúng tôi đang chờ ai đó tìm ra giải pháp hoàn chỉnh nhất, chúng tôi đã xem xét một số tùy chọn tốt nhất để chuẩn bị trang web của bạn. Bằng cách này, bạn sẽ không bị mất khi thời gian đến khi tất cả các thiết bị sẽ có võng mạc hiển thị dưới dạng này hay dạng khác.

Tạo nhiều tệp hình ảnh

Hãy bắt đầu với những điều cơ bản. Cách dễ nhất để đảm bảo hỗ trợ cho chế độ Retina cho trang web của bạn là tạo ra nhiều biến thể hình ảnh ở độ phân giải khác nhau. Điều này có nghĩa rằng đối với mỗi loại có độ phân giải (có nghĩa là để nói @ 1x), bạn phải tạo ra một phiên bản độ phân giải cao của nguyên tố này (tức là d. 2x).

Về cơ bản, bạn có thể tạo nhiều phiên bản của cùng một tập tin và sử dụng một plugin như WP Retina 2x hoặc kịch bản như retina.js để tự động tạo phiên bản "@2x" của mỗi kích thước hình ảnh hoặc tìm "@2x" hình ảnh và hiển thị kích thước tương ứng cho mỗi thiết bị.

Đúng là việc tạo nhiều phiên bản của cùng một hình ảnh có thể là một quá trình tốn thời gian. Thật không may, không có phương pháp nhanh chóng tự động tạo ra những hình ảnh này cho bạn. Tuy nhiên, có một số plugin Photoshop cho phép bạn sửa chữa hình ảnh của bạn một cách nhanh chóng.

Các plugin như " Retinize It Đó là một loạt các hành động Photoshop cho phép bạn dễ dàng tối ưu hóa thiết kế của bạn cho màn hình Retina. Nếu bạn đang sử dụng một phiên bản cũ hơn của Photoshop (trước CC), bạn có thể sử dụng một cái gì đó như " Bốn Đó là cơ bản tất cả những công cụ Photoshop Generator hiện tại, nhưng đối với các phiên bản trước của Photoshop.

Đồ họa vector có thể mở rộng (SVG)

Cách dễ nhất để tiếp tục với chế độ Retina là sử dụng định dạng Scalable Vector Graphics (SVG) trên trang web của bạn. SVG là một định dạng hình ảnh vector dựa trên XML. Như tên gọi của nó, một hình ảnh SVG có thể mở rộng, có nghĩa là hình ảnh có thể được kéo dài xa (hoặc ít) khi cần thiết, trong khi vẫn còn sắc nét và rõ ràng. Đây có thể là cách nhanh chóng và dễ dàng để bạn thực hiện chế độ Retina mà không cần nỗ lực nhiều.

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Tuy nhiên, có hai nhược điểm khi sử dụng SVG trên WordPress. Đầu tiên là vì nó là một định dạng vector, SVG không thích hợp cho tất cả các hình ảnh. Vì vậy, bạn có thể sử dụng SVG cho biểu tượng và biểu tượng, nhưng không sử dụng cho các tệp như ảnh (đó là một chút đau đớn nếu bạn muốn sử dụng hình ảnh có độ phân giải cao cho trang web của bạn). Nhưng nếu bạn muốn sử dụng các biểu tượng, hoạt ảnh hoặc hình minh họa đơn giản, các tệp SVG chắc chắn có thể là một tùy chọn cho trang web tương thích với Retina.

Nhược điểm thứ hai khi sử dụng SVG trên WordPress là nó không phải là một định dạng chính thức tương thích với WordPress vì các vấn đề an ninh. Vì một tệp SVG về bản chất là một tệp XML, điều này mở ra tất cả các lỗ hổng đã biết liên quan đến định dạng tệp XML, chẳng hạn như phân tích cưỡng chế, tấn công thực thể XML bên ngoài (XEE), tấn công Tấn công từ chối dịch vụ XML (XDoS), v.v.

Tuy nhiên, có một cách để kích hoạt hỗ trợ SVG cho trang WordPress của bạn, điều này sẽ làm cho các tệp SVG của bạn an toàn.

Cách bật SVG an toàn trên WordPress

An toàn SVG là một plugin cho phép bạn một cách an toàn cho phép hỗ trợ cho các tập tin SVG trên trang web WordPress của bạn. Plugin này đảm bảo rằng các tệp SVG của bạn được khử trùng để ngăn chặn bất kỳ lỗ hổng XML tiềm ẩn nào ảnh hưởng đến trang web của bạn.

Tránh xa các plugin cho phép loại MIME cho phép tải xuống SVG vào Thư viện phương tiện WordPress vì chúng rất nguy hiểm và có thể gây nguy hiểm cho trang web của bạn. Vì vậy, nếu bạn thực sự bị cám dỗ để sử dụng định dạng SVG trên WordPress, hãy đảm bảo bạn làm điều đó một cách an toàn và không tải xuống plugin SVG đầu tiên mà bạn thấy.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Một số plugin để tích hợp khả năng tương thích của Retina trên WordPress

Có một số kịch bản và bổ trợ cho khả năng tương thích của Retina có thể làm cho cuộc sống của bạn dễ dàng hơn nhiều khi cố gắng thiết lập trang web tương thích với Retina. Tuy nhiên, như đã đề cập trước đó, hầu hết các plugin và tập lệnh có sẵn, thay thế hình ảnh của bạn bằng hình ảnh có độ phân giải cao chỉ dành cho màn hình có độ phân giải cao. Chúng không kéo dài như SVG: bạn vẫn cần tạo nhiều hình ảnh có độ phân giải khác nhau.

retina.js

retina.js http://imulus.github.io/retinajs/ là một trong những tập lệnh được sử dụng nhiều nhất để phân phối hình ảnh có độ phân giải cao. Đây là một tập lệnh mã nguồn mở có thể dễ dàng phục vụ các hình ảnh có độ phân giải cao đến các thiết bị có màn hình Retina.

Kịch bản kiểm tra từng hình ảnh trên trang để xem có phiên bản có độ phân giải cao của hình ảnh đó trên máy chủ hay không. Nếu một biến thể độ phân giải cao tồn tại, kịch bản trao đổi độ phân giải tiêu chuẩn với hình ảnh có độ phân giải cao. Đây là một trong những cách phổ biến nhất để phân phát hình ảnh cho màn hình Retina trên trang web của bạn.

Ngu si

Tương tự như retina.js, Ngu si là một plugin jQuery cung cấp một cách đơn giản để phân phối hình ảnh ở định dạng tỷ lệ pixel. Kịch bản lệnh gọi phương thức khởi tạo $ .fn.dense (), nhắm vào các thẻ "img" sẽ cung cấp các hình ảnh tương thích với Retina nếu cần.

Vì vậy, nó thay thế tất cả các hình ảnh với phiên bản có độ phân giải cao tương ứng, giống như tập lệnh retina.js.

WP Retina 2x

Sau này có thể được so sánh với một bộ tạo hình ảnh Retina ma thuật.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [FREE]

WP Retina 2x là một plugin tạo các tệp hình ảnh theo yêu cầu của thiết bị DPI cao và hiển thị chúng cho khách truy cập của bạn cho phù hợp. Không giống như hai tập lệnh trước, nó tạo ra các hình ảnh có độ phân giải khác nhau từ một hình ảnh ban đầu. Vì vậy, nếu bạn không hài lòng với việc tạo các hình ảnh khác nhau theo cách thủ công với các độ phân giải khác nhau, tùy chọn này là dành cho bạn.

Đó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn chuyển đổi hình ảnh của mình thành hình ảnh sẵn sàng cho võng mạc.

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
8 cổ phiếu
cổ phiếu6
tweet1
Enregistrer1
WhatsApp