Thực đơn
trang chủInternet

Thu phóng hình ảnh mượt mà khi di chuột bằng CSS3 thuần túy. Cách thay đổi kích thước và vị trí hình thu nhỏ của WordPress. Mã hiển thị hình thu nhỏ có kích thước khác nhau

Một cách thực hành khá phổ biến trên các trang web hiện đại là phóng to một khối bằng hình ảnh một cách mượt mà. Làm thế nào để làm điều này với sử dụng CSS?

Zoom hình ảnh mượt mà trên CSS di chuột

Chúng tôi chia giải pháp của vấn đề thành hai giai đoạn: đánh dấu HTML và phong cách css. Đầu tiên, hãy đánh dấu các khối bằng hình ảnh bên trong:



Tất cả các khối được gán lớp hộp. Một trong những thuộc tính quan trọng của nó sẽ là tràn: ẩn, nghĩa là ẩn mọi thứ vượt ra ngoài khối. Chúng ta phóng to hình ảnh nhé? Đúng. Nhưng chỉ phần bị giới hạn bởi khối sẽ hiển thị.
Chúng tôi đã sắp xếp việc này. Hãy chuyển sang mô tả các phong cách.

Hộp (
tràn:ẩn;
chiều rộng: 250px;
chiều cao: 250px;
}
Mọi thứ đều như đã nêu - các khối vuông, có kích thước tương tự như hình ảnh tiêu chuẩn, không phóng to, sau đó cũng là 250 x 250.
Thuộc tính tràn: ẩn, như đã đề cập trước đó, không cho phép nó vượt ra ngoài ranh giới của khối khi phóng to.
Thuộc tính liên quan đến hình ảnh:

Hộp hình ảnh (
-moz-transition: tất cả 1s dễ dàng thoát ra;
-o-transition: tất cả 1s dễ dàng thoát ra;
-webkit-transition: dễ dàng thực hiện tất cả 1 giây;
quá trình chuyển đổi: tất cả 1 giây dễ dàng;
}

Hộp img:di chuột(
-webkit-transform: tỷ lệ (1.2);
-moz-transform: tỷ lệ (1.2);
-o-transform: tỷ lệ (1.2);
biến đổi: tỷ lệ (1.2);
}
Không có cách nào khác nếu không có CSS3. Tất cả trình duyệt hiện đại hình ảnh động sẽ được hiển thị. Bạn cần các tham số chuyển tiếp và biến đổi. Chúng ta đặt thời gian hoạt ảnh là 1 giây (1s). Mức tăng sẽ là 1,2 lần. Bạn có thể thay đổi nó theo sở thích của bạn.
Bây giờ làm việc chẳng hạn!

Một cách thực hành khá phổ biến trên các trang web hiện đại là phóng to một khối bằng hình ảnh một cách mượt mà. Làm thế nào bạn có thể làm điều này bằng cách sử dụng CSS?

Zoom hình ảnh mượt mà trên CSS di chuột

Chúng tôi chia giải pháp của vấn đề thành hai giai đoạn: kiểu đánh dấu html và kiểu css. Đầu tiên, hãy đánh dấu các khối bằng hình ảnh bên trong:



Tất cả các khối được gán lớp hộp. Một trong những thuộc tính quan trọng của nó sẽ là tràn: ẩn, nghĩa là ẩn mọi thứ vượt ra ngoài khối. Chúng ta phóng to hình ảnh nhé? Đúng. Nhưng chỉ phần bị giới hạn bởi khối sẽ hiển thị.
Chúng tôi đã sắp xếp việc này. Hãy chuyển sang mô tả các phong cách.

Hộp (
tràn:ẩn;
chiều rộng: 250px;
chiều cao: 250px;
}
Mọi thứ đều như đã nêu - các khối vuông, có kích thước tương tự như hình ảnh tiêu chuẩn, không phóng to, sau đó cũng là 250 x 250.
Thuộc tính tràn: ẩn, như đã đề cập trước đó, không cho phép nó vượt ra ngoài ranh giới của khối khi phóng to.
Thuộc tính liên quan đến hình ảnh:

Hộp hình ảnh (
-moz-transition: tất cả 1s dễ dàng thoát ra;
-o-transition: tất cả 1s dễ dàng thoát ra;
-webkit-transition: dễ dàng thực hiện tất cả 1 giây;
quá trình chuyển đổi: tất cả 1 giây dễ dàng;
}

Hộp img:di chuột(
-webkit-transform: tỷ lệ (1.2);
-moz-transform: tỷ lệ (1.2);
-o-transform: tỷ lệ (1.2);
biến đổi: tỷ lệ (1.2);
}
Không có cách nào khác nếu không có CSS3. Tất cả các trình duyệt hiện đại sẽ hiển thị hình ảnh động. Bạn cần các tham số chuyển tiếp và biến đổi. Chúng ta đặt thời gian hoạt ảnh là 1 giây (1s). Mức tăng sẽ là 1,2 lần. Bạn có thể thay đổi nó theo sở thích của bạn.
Bây giờ làm việc chẳng hạn!

Hôm nay tôi muốn xem cách phóng to hình ảnh trong CSS. Ví dụ, điều này có thể được thực hiện bằng cách chỉ vào nó và bản thân sự gia tăng có thể diễn ra suôn sẻ hoặc đột ngột. Và tất cả điều này có thể được thực hiện theo những cách khác nhau.

Tăng mạnh đơn giản

Thay đổi vẻ bề ngoài hình ảnh khi di chuột qua nó, chúng ta sẽ sử dụng lớp giả di chuột. Phương pháp đơn giản là thay đổi độ rộng của hình ảnh. Khi bạn thay đổi chiều rộng thì chiều cao cũng tự động thay đổi. Ví dụ: chiều rộng của hình ảnh ảo của chúng tôi là 320 pixel. Hãy phóng to một chút:

Hình ảnh:di chuột( chiều rộng: 380px; )

Với cách tiếp cận này, chiều cao cũng tăng lên, nhưng tất cả điều này xảy ra đột ngột. Bạn cũng có thể đặt tham số thứ hai - chiều cao, nhưng sau đó bạn có thể làm đảo lộn tỷ lệ của hình ảnh.

Tăng mịn do chuyển đổi

Bây giờ chúng ta sẽ xem xét một phương pháp hoàn toàn khác. Thứ nhất, việc thay đổi kích thước sẽ diễn ra suôn sẻ. Thứ hai, thay vì thay đổi độ rộng, chúng tôi sẽ sử dụng các phép biến đổi - đây là một cải tiến của css3.

Để kích hoạt chuyển tiếp suôn sẻ, bạn cần thêm thuộc tính chuyển tiếp vào chính ảnh đó (không phải ảnh di chuột). Nó phải chỉ ra thời gian mà quá trình chuyển đổi phải được thực hiện. Bạn cũng có thể thêm các tham số khác, nhưng hôm nay tôi sẽ không đi sâu vào chi tiết về điều đó.

Img(chuyển tiếp: 0.4s; )

Chúng tôi thông báo cho trình duyệt rằng những thay đổi về kiểu dáng của các thành phần có thẻ img sẽ không xảy ra đột ngột mà phải trải đều trong khoảng thời gian 4 phần mười giây. Tuyệt vời, tất cả những gì còn lại là tự thực hiện chuyển đổi khi di chuột qua hình ảnh:

Hình ảnh:hover( biến đổi: tỷ lệ (1.15, 1.15); )

Việc mở rộng các phần tử được thực hiện bằng cách sử dụng thuộc tính biến đổi và giá trị tỷ lệ của nó (tăng theo chiều ngang, chiều dọc). Vì vậy nếu muốn phóng to hình ảnh theo tỷ lệ thì cả hai giá trị phải giống nhau. Đặt giá trị dựa trên thực tế là 1 là kích thước bình thường Những bức ảnh.

Theo đó, ở mục trên, khi di chuột, chúng tôi phóng to hình ảnh lên 15% mỗi bên và điều này diễn ra rất mượt mà.

Vì vậy, để thay đổi kích thước, bạn có thể sử dụng thay đổi kích thước hoặc chuyển đổi. Hai phương pháp này có sự khác biệt. Nếu bạn thay đổi kích thước bằng chiều rộng, hình ảnh sẽ phóng to và di chuyển tất cả nội dung ở gần nó. Điều này không xảy ra trong trường hợp biến đổi.

Chỉ thay đổi kích thước ở một bên

Nếu bạn cần phóng to hình ảnh trong CSS khi chỉ di chuột ở một bên, thì đây cũng là cách dễ thực hiện nhất bằng cách sử dụng các phép biến đổi. Chỉ cần viết nó như thế này:

Hình ảnh:hover( biến đổi:scaleX(1.2); )

Tức là sau từ khóa thang đo chúng tôi chỉ rõ tọa độ - X hoặc Y .

Ý nghĩa của việc phóng to một đoạn hình ảnh

Chắc chắn bạn đã từng thấy các tập lệnh tương tự được cài đặt trên trang web của các cửa hàng trực tuyến lớn, khi xem một sản phẩm, bạn có thể di chuyển chuột qua hình ảnh, đồng thời đoạn chính xác của nó mà con trỏ chuột đặt trên đó sẽ phóng to khoảnh khắc này. Điều này rất thuận tiện khi bạn cần nghiên cứu chi tiết một sản phẩm, chẳng hạn thiết bị gia dụng, Điện thoại cầm tay, đồng hồ, đồ trang sức, bất cứ thứ gì. Đồng thời, một cửa sổ bật lên không cần thiết sẽ không mở, điều này khá tiện lợi và bây giờ bạn sẽ hiểu tại sao.

Ý nghĩa của phương pháp phóng to một đoạn hình ảnh khi di con trỏ chuột là kích thước của hình ảnh chi tiết có thể vượt quá độ phân giải của màn hình người dùng, ví dụ: độ phân giải của màn hình máy tính xách tay mà trang web được xem là 1280x800 và kích thước của hình ảnh chi tiết là 1920x900. Rõ ràng là nó sẽ không vừa hoàn toàn trên màn hình, vì vậy để phóng to nó, phương pháp cổ điển sử dụng cửa sổ thả xuống không phù hợp ở đây. Bạn cần giảm hình ảnh xuống kích thước màn hình của người dùng hoặc thu nhỏ hình ảnh (tốt hơn hết là không nên làm điều này) hoặc sử dụng thủ thuật và chỉ phóng to một phần của hình ảnh. Trong trường hợp này, trang web sẽ trông đẹp mắt trên cả màn hình lớn và nhỏ, nhưng kích thước hình ảnh chi tiết sẽ đủ lớn để người dùng có thể nghiên cứu nó một cách chi tiết.

Ưu điểm và nhược điểm

Như chúng tôi đã đề cập trước đó, ưu điểm chính của tập lệnh để phóng to không phải toàn bộ hình ảnh mà chỉ một phần của nó, do nhân viên studio của chúng tôi phát triển, là tính độc lập với độ phân giải màn hình của người dùng, nhưng có những ưu điểm khác có thể được nêu bật:

  • dễ dàng cài đặt;
  • tính linh hoạt của tùy biến;
  • kích thước JavaScript tối thiểu;
  • đánh dấu HTML đơn giản;
  • tương thích với jQuery của mọi phiên bản;
  • khả năng tương thích giữa nhiều trình duyệt;
  • phù hợp với các độ phân giải màn hình khác nhau;
  • tốt hơn so với các chất tương tự phức tạp;
  • miễn phí;
  • mô tả chi tiết về nguyên lý hoạt động và mã nguồn dễ đọc.

Như bạn có thể thấy, có khá nhiều lợi thế và chúng rất rõ ràng. Có, tất nhiên, bạn có thể tải xuống các tập lệnh tương tự hoặc lấy cắp chúng từ một số cửa hàng trực tuyến lớn. Phương pháp này Nhân tiện, nó được gọi là Cloud Zoom, trên thực tế, nó được trả phí và quá phức tạp. Hiện nay, những tập lệnh như vậy đã phổ biến và được sử dụng trên nhiều trang web, nhưng bạn sẽ phải mất khá nhiều thời gian để tìm ra và tích hợp một tập lệnh tương tự vào trang web của mình. Trong bài viết này, chúng tôi sẽ mô tả chi tiết hoạt động của tập lệnh của chúng tôi và nếu bạn cho rằng mã của nó chỉ bao gồm một vài dòng, thì bạn sẽ có thể hiểu được bản chất của vấn đề chỉ sau vài phút.

Nếu chúng ta nói về những khuyết điểm thì chỉ nghĩ đến một điểm, gọi đó là khuyết điểm thì có thể hơi quá. Thực tế là hình ảnh phóng to được tải trước trong một lớp ẩn, ngay cả trước khi người dùng nhấp vào bất kỳ đâu. Chúng tôi chỉ cần điều này vì khi con trỏ chuột lướt qua hình ảnh, chúng tôi cần đoạn được phóng to xuất hiện ngay lập tức và để làm được điều này, chúng tôi phải sử dụng tính năng tải trước. Nhưng điều này không có gì sai, vì thông thường sẽ chỉ có một hình ảnh như vậy trên trang và kích thước của nó không quá lớn (200-300 KB với độ phân giải 1800x1100 như trong ví dụ của chúng tôi) nên điều đáng lo ngại là lưu lượng truy cập Internet của người dùng.

Phát triển chi tiết từ A đến Z

Chà, bây giờ chúng ta đã phác thảo ngắn gọn bản chất của phương pháp, đồng thời liệt kê những ưu điểm và nhược điểm của nó, đã đến lúc bắt tay vào công việc và bắt đầu thực hiện nó. Tôi muốn lưu ý ngay rằng không có gì phức tạp trong tập lệnh này và chúng tôi hy vọng rằng thuật toán sẽ hoàn toàn rõ ràng với bạn ngay lần đầu tiên.

đánh dấu HTML

Như mọi khi, chúng tôi bắt đầu với đánh dấu HTML trang. Nó cực kỳ đơn giản và chỉ chứa một vài dòng mã:

Mọi thứ ở đây đều là cơ bản. Vùng chứa đầu tiên có lớp tải trước, như tên cho thấy, chịu trách nhiệm tải trước một hình ảnh lớn. Chúng tôi đã thảo luận tại sao điều này là cần thiết sớm hơn một chút. Bên trong vùng chứa này, bạn đặt hình ảnh sẽ được sử dụng khi phóng to. Một số điểm rất quan trọng và không thể bỏ qua:

  • cố gắng đặt vùng chứa này càng cao càng tốt trong DOM (trong mã trang) - càng cao, tập lệnh sẽ sẵn sàng hoạt động càng nhanh;
  • giấu thùng chứa tải trước khỏi tầm mắt của người dùng, di chuyển ra ngoài vùng hiển thị của màn hình ( không trưng bàyđiều này sẽ không hoạt động).

Tiếp theo là vùng chứa bản xem trước. Chúng tôi đã chỉ định cho anh ấy một lớp học có thể phóng to, như bạn có thể đoán, có nghĩa là hình ảnh có thể được thu nhỏ lại. Hình ảnh chứa trong đó được hiển thị theo mặc định. Ở đây cũng có một số những điểm chínhđiều đó không nên bỏ qua:

  • kích thước vùng chứa phải được chỉ định rõ ràng (chiều rộng và chiều cao bằng kích thước xem trước);
  • vùng chứa không được chứa các thanh cuộn và bất kỳ thứ gì không vừa với nó sẽ không được hiển thị (thuộc tính tràn CSS);
  • khi di chuột, bạn có thể tùy ý thay đổi con trỏ chuột thành con trỏ không chuẩn hoặc như trong ví dụ, thành một trong những con trỏ tiêu chuẩn phù hợp (ở dạng ngắm).

Điểm quan trọng ở đây là thêm thuộc tính tùy chỉnh vào hình ảnh nhỏ:

  • dữ liệu-xem trước-url(đường dẫn đến hình ảnh nhỏ);
  • dữ liệu-img-url(đường dẫn tới hình ảnh chi tiết).

Những thuộc tính này có thể được gọi là bất cứ thứ gì bạn thích, đó không phải là vấn đề. Điều chính là chúng chứa tuyệt đối hoặc liên kết tương đối vào các hình ảnh tương ứng. Bạn hỏi tại sao lại sao chép đường dẫn đến một hình ảnh nhỏ khi nó đã được chỉ định trong thẻ hình ảnh. Đừng lo lắng, lát nữa bạn sẽ hiểu điều này.

Kiểu CSS

CSS trông khá đơn giản và đáp ứng tất cả các yêu cầu được liệt kê trước đó:

Tải trước (vị trí: tuyệt đối; z-index: -1; top: -5000px; trái: -5000px; ) .zoomable ( con trỏ: crosshair; chiều rộng: 600px; chiều cao: 368px; tràn: ẩn; lề: 0 tự động; )

Tải trước hình ảnh chi tiết

Như chúng tôi đã đề cập trước đó, tải trước Chúng tôi cần một hình ảnh lớn để khi người dùng di con trỏ chuột lên hình ảnh xem trước, tập lệnh của chúng tôi hoàn toàn sẵn sàng hoạt động và không có độ trễ. Đây là hai lý do chính khiến việc tải trước hình ảnh chi tiết vào trong trường hợp này hoàn toàn chính đáng:

  • hình ảnh chi tiết phải được trình duyệt lưu vào bộ nhớ đệm trước để nếu cần, nó có thể hiển thị ngay trên màn hình;
  • Để tập lệnh hoạt động, bạn cần tính hệ số - tỷ lệ giữa kích thước của hình ảnh chi tiết với kích thước của bản xem trước (sẽ nói thêm về điều này sau).

hàm JavaScript

Bây giờ mọi thứ đã sẵn sàng và chúng ta chuyển sang phần thú vị nhất - JavaScript, nhờ đó tất cả điều này sẽ hoạt động.

Vì vậy, hãy bắt đầu và mang ngay toàn bộ kịch bản làm việc, để thuận tiện cho việc sao chép và sau đó chúng ta sẽ xem xét chi tiết theo từng phần:

$(window).load(function() ( $(".zoomable").hover(function() ( $(".zoomable img").stop().animate((opacity: 0), 0, function( ) ( $(".zoomable img").attr((src: $(".zoomable img").attr("data-img-url"))); )).animate((opacity: 1), 300 ); ), function() ( $(".zoomable img").stop().animate((opacity: 0), 0, function() ( $(".zoomable img").attr((src: $ ("".zoomable img").attr("data-preview-url"))).css((margin: "0 0")); )).animate((opacity: 1), 300); )); var c = $(".preload img").width() / $(".zoomable img").width(); $(".zoomable").mousemove(function(e) ( var pX = e.pageX - $(this).offset().left; var pY = e.pageY - $(this).offset().top; var iX = pX * c - pX; var iY = pY * c - pY; $( ".zoomable img").css((lề: "-" + iY + "px -" + iX + "px")); )); ));

Trước hết, đáng để bạn chú ý đến thực tế là Chức năng nàyđược gọi không phải sau khi DOM sẵn sàng mà sau hết chỗ trang:

$(function() ( console.log("DOM đã sẵn sàng"); )); $(window).load(function() ( console.log("Trang đã sẵn sàng"); ));

Vấn đề là tiêu chuẩn $(hàm()());ở đây nó sẽ không hoạt động với chúng tôi, vì nếu cấu trúc của tài liệu đã sẵn sàng, điều này không có nghĩa là mọi thứ trong đó đã được tải tập tin đa phương tiện. Và vì điều rất quan trọng đối với chúng tôi là phải có được kích thước của hình ảnh chi tiết ngay cả trước khi tập lệnh bắt đầu chạy nên quyết định này là hoàn toàn chính đáng.

Vì vậy, trước hết, chúng ta xử lý sự kiện di chuột qua hình ảnh của mình bằng cách sử dụng chức năng tiêu chuẩn jQuery - di chuột().

$(".zoomable").hover(function() ( ), function() ( ));

Nếu con trỏ chuột ở trên vùng chứa có thể phóng to, chúng ta tạm thời ẩn hình ảnh và lặng lẽ thay thế thuộc tính của nó src(nguồn), sau đó hiển thị mượt mà trên màn hình. Trong trường hợp này, sẽ không có những bước nhảy khó chịu và mọi thứ sẽ diễn ra suôn sẻ.

Trong trường hợp chuột không ở trên thùng chứa có thể phóng to, chúng tôi thực hiện thao tác tương tự, chỉ có điều bây giờ chúng tôi đưa mọi thứ về vị trí của nó như mặc định. Sân khấu này là phần đơn giản nhất trong tập lệnh của chúng tôi và không ai gặp khó khăn khi hiểu nó, vì vậy hãy tiếp tục.

Var c = $(".tải trước img").width() / $(".có thể phóng to img").width();

Dòng mã này tính toán hệ số cần thiết cho tập lệnh của chúng tôi - tỷ lệ kích thước của hình ảnh nhỏ và lớn. Điều này là cần thiết để thực hiện chia tỷ lệ chính xác, tùy thuộc vào vị trí hiện tại của con trỏ chuột của người dùng.

Điều tiếp theo là điều cuối cùng và nhất một phần quan trọng tập lệnh của chúng tôi, chịu trách nhiệm di chuyển hình ảnh lớn trong lớp có thể mở rộng. Điều này tạo ra hiệu ứng như thể chúng ta đang di chuyển một chiếc kính lúp vô hình tưởng tượng và chính xác mảnh cần thiết sẽ được hiển thị trong cửa sổ.

Trước hết chúng ta cần nắm bắt sự kiện con trỏ chuột di chuyển và để script hoạt động dễ dàng hơn, chúng ta sẽ không làm điều này cho toàn bộ tài liệu mà chỉ làm cho container có thể phóng to. Rốt cuộc, chúng tôi không quan tâm đến tọa độ chuột bên ngoài lớp mục tiêu.

$(".zoomable").mousemove(function(e) ( ));

Bây giờ chúng ta cần tính tọa độ của con trỏ chuột so với bên trái góc trên cùng màn hình. Nhưng chúng ta quan tâm đến vị trí của con trỏ so với phần tử chứ không phải gốc tọa độ, vì vậy chúng ta phải trừ ngay khoảng cách của góc trên bên trái của vùng chứa khỏi các tọa độ này có thể phóng to từ nguồn gốc:

Var pX = e.pageX - $(this).offset().left; var pY = e.pageY - $(this).offset().top;

Tất cả những gì còn lại của chúng ta là tính toán và thay thế các giá trị thụt đầu dòng ( lề trên Và lề trái) để biết hình ảnh chi tiết, để biết cần di chuyển nó bao nhiêu để đạt được hiệu quả phóng to một đoạn hình ảnh. Bởi vì lớp có thể phóng to chúng tôi có kích thước cố định và mọi thứ vượt quá giới hạn của nó sẽ không được hiển thị, khi đó hiệu ứng cần thiết sẽ đạt được bằng cách sử dụng thụt lề âm:

Var iX = pX * c - pX; var iY = pY * c - pY; $(".zoomable img").css((margin: "-" + iY + "px -" + iX + "px"));

Ví dụ về một kịch bản

Ví dụ: chúng tôi đã chọn một hình ảnh mà việc phóng to có thể được nhiều người quan tâm. Rốt cuộc, bạn phải đồng ý rằng mọi người đều thích đọc những gì được viết trên nhãn chai rượu sâm panh :)

tái bút Những bình luận về bài viết và việc phân phối tập lệnh này đều được hoan nghênh.

Khi thay đổi chủ đề trong WordPress, thay vì hình thu nhỏ cho hồ sơ hiện cóđôi khi chúng ta nhìn thấy những hình ảnh gốc. Điều này là do hình thu nhỏ có kích thước yêu cầu không được tạo khi tải hình ảnh và việc sử dụng plugin Tạo lại hình thu nhỏ có thể giải quyết được vấn đề này.

Kích thước hình ảnh

WordPress có khái niệm về “kích thước hình ảnh” trong đó chỉ có ba kích thước mặc định - lớn, trung bình và hình thu nhỏ. Khi tải hình ảnh lên thư viện phương tiện của bạn, WordPress sẽ tạo tập tin mới cho mỗi kích thước, tức là Nếu bạn nhìn vào thư mục tải xuống, bạn sẽ thường thấy như sau:

  • ảnh.jpg
  • ảnh-150×150.jpg
  • ảnh-300×126.jpg
  • ảnh-672×360.jpg

Ở đây rõ ràng là ảnh gốc photo.jpg ba cái đã được tạo tập tin bổ sung cho kích thước của chúng tôi. Kích thước mặc định trong WordPress có thể được thay đổi trong Tùy chọn → Phương tiện và được sử dụng khi chèn hình ảnh vào bài đăng, tạo thư viện và các địa điểm khác.

Ngoài kích thước mặc định, bạn có thể đăng ký trong WordPress kích thước bổ sung bằng cách sử dụng các chủ đề hoặc plugin. Ví dụ: nếu một plugin hiển thị một tiện ích có các bài đăng phổ biến trong thanh bên, nó có thể đi kèm với chúng bằng hình ảnh 50x50 pixel. Hoặc một chủ đề hiển thị các bài đăng dưới dạng lưới có thể sử dụng hình ảnh 200x200 pixel.

Điều đáng lưu ý một lần nữa là việc tạo tập tin Đa dạng về kích cỡ xảy ra chính xác tại thời điểm tải hình ảnh vào thư viện phương tiện.

Vì vậy, khi kích hoạt Chủ đề WordPress sử dụng các kích thước khác nhau, các tệp cho các kích thước đó không tồn tại đối với các hình ảnh đã tải lên trước đó. Trong đó trường hợp WordPress sẽ sử dụng kích thước gần đúng nhất có thể hoặc hình ảnh gốc.

Điều này thường khiến thiết kế của chúng tôi nổi hoặc hình thu nhỏ nổi. trang chủ các trang web nặng vài megabyte.