Tối ưu hình ảnh thumbnail trên trang chủ blogspot

Thảo luận trong 'Blogspot' bắt đầu bởi hoangtrieumanhn, 20/1/15.

Lượt xem: 1,278


Bạn đang xem:

Tối ưu hình ảnh thumbnail trên trang chủ blogspot

Coppy cùng chia sẻ nhé bạn!
  1. hoangtrieumanhn

    hoangtrieumanhn NO SPAM - SPAM LÀ ĐI LIỀN

    Tham gia ngày:
    28/12/14
    Bài viết:
    533

    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


    Việc tối ưu hình ảnh thumbnail là một điều cần thiết đối với blogspot, nhất là khi chúng được sử dụng để hiện thị ở trang chủ.

    [​IMG]

    Với giới blogger, "ảnh thumbnail" là một thuật ngữ quen thuộc được sử dụng để nói về những hình ảnh thu nhỏ hay ảnh đại diện cho mỗi bài viết. Khi nhìn vào hình ảnh thumbnail, về cơ bản thì người đọc sẽ nắm được phần nào nội dung mà tác giả hướng tới. Thậm chí, nếu bức ảnh thumbnail được thiết kế bắt mắt thì việc nhận được những click ngẫu nhiên từ phía độc giả mặc dù đó không phải là vấn đề họ đang quan tâm cũng là điều hết sức ... bình thường. Họ bị "quyến rũ" mà :)

    Trong blogspot, bức ảnh đầu tiên của mỗi bài viết sẽ được lựa chọn làm ảnh thumbnail hiển thị ngoài trang chủ. Chắc khá nhiều bà con blogger cũng nắm được điều này. Tuy nhiên, khi đi vào phân tích sâu hơn về giao diện và SEO thì mình phát hiện ra rằng : việc tự động lựa chọn hình ảnh thumbnail của blogspot sẽ vô tình làm nảy sinh 2 vấn đề nghiêm trọng.

    1. Ảnh bị biến dạng

    [​IMG]
    Sự khác nhau rõ rệt giữa 2 bức ảnh
    Kích thước ảnh thumbnail ngoài trang chủ và kích thước của hình ảnh đầu tiên trong bài viết thường không giống nhau. Khi hiển thị, ảnh thumbnail sẽ bị co lại theo chiều ngang hoặc chiều dọc khiến nó trở nên méo mó, thiếu thẩm mỹ.

    Nếu bạn nói "tôi sẽ khéo léo thiết lập cho tỷ lệ giữa chiều dài và chiều rộng của 2 bức ảnh này giống nhau để khi hiện thị, ảnh thumbnail sẽ co đều cả 2 cạnh". OK, điều này là hoàn toàn có thể, nhưng nó sẽ vấp phải lỗi nghiêm trọng thứ 2 dưới đây.

    2. Dung lượng ảnh nặng, làm giảm tốc độ tải trang

    Trước đây, mình rất ít để ý đến điều này cho đến khi sử dụng công cụ tăng tốc website Google Speed Insight. Bên cạnh những đoạn mã javascript thì phần lớn nguyên nhân ảnh hưởng đến tốc độ website của mình là do hình ảnh.

    Tất cả ảnh thumbnail trên trang chủ blogspot đều được mình đặt lại kích thước thông qua CSS, cụ thể là 240pixels x 130pixels. Tuy nhiên, trên thực tế thì mọi thứ không hề hoạt động như mình nghĩ T_T

    Khi trình duyệt bắt đầu tải trang, nó sẽ lần lượt tải về tất cả những ảnh cần hiển thị nhưng là với "kích thước gốc". Sau đó, CSS mới bắt đầu đặt lại kích thước cho chúng thành 240 x 130. Điều đó có nghĩa là : với một tấm ảnh dung lượng 2Mb thì dù bạn có đặt cho nó bất kỳ kích thước nào, mỗi lần tải về nó sẽ vẫn ngốn đúng 2Mb đó.

    Tối ưu ảnh thumbnail cho blogspot

    Hiện tại thì mình đang sử dụng cả 2 cách này để tối ưu hình ảnh thumbnail trên trang chủ blogspot. Mỗi cách đều có cái hay khác nhau, các bạn tùy ý lựa chọn nhé :)

    1. Mẹo ẩn ảnh

    - Hướng dẫn : thiết kế hình ảnh thumbnail theo ý muốn rồi đặt cho nó thuộc tính ẩn "display:none" thông qua định dạng soạn thảo HTML hoặc CSS. Khi đó, độc giả sẽ chỉ nhìn thấy trong nội dung bài viết từ bức ảnh thứ 2 trở đi.

    Ví dụ : <a href="http://4.bp.blogspot.com/-zmxKdEXAL1o/VCbSbRPDSbI/AAAAAAAAFk8/Wg_rXx29zyY/s1600/tối-ưu-thumbnail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; display:none"><img border="0" src="http://4.bp.blogspot.com/-zmxKdEXAL1o/VCbSbRPDSbI/AAAAAAAAFk8/Wg_rXx29zyY/s1600/tối-ưu-thumbnail.png" /></a>

    [​IMG]
    Lựa chọn định dạng ở góc trên bên trái màn hình

    - Ưu điểm : Ảnh thumbnail ở trang chủ hiển thị đẹp.
    - Nhược điểm : hơi tốn thời gian.

    [​IMG]
    resize hình ảnh bằng photoshop
    2. Sử dụng mã javascript

    Sử dụng những đoạn mã có sẵn để cắt và resize ảnh thumbnail cho blogspot.
    - Ưu điểm : trình duyệt tự động xử lý, nhanh gọn.
    - Nhược điểm : hình ảnh được cắt không theo ý muốn, nhiều khi hơi xấu .
    - Hướng dẫn : chèn đoạn mã tham khảo sau vào trước thẻ đóng </body>, nguồn : http://www.kslzone.net/

    <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'>//<![CDATA[ var _0x9d21=["\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x69\x6D\x67","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x6C\x65\x6E\x67\x74\x68","\x73\x72\x63","\x73\x31\x36\x30\x30","\x77","\x2D\x68","\x2D\x63","\x72\x65\x70\x6C\x61\x63\x65"];function resizeThumb(_0xb158x2,_0xb158x3,_0xb158x4){var _0xb158x5=document[_0x9d21[0]](_0xb158x2),_0xb158x6=_0xb158x5[_0x9d21[2]](_0x9d21[1]);for(var _0xb158x7=0;_0xb158x7<_0xb158x6[_0x9d21[3]];_0xb158x7++){_0xb158x6[_0xb158x7][_0x9d21[4]]=_0xb158x6[_0xb158x7][_0x9d21[4]][_0x9d21[9]](_0x9d21[5],_0x9d21[6]+_0xb158x3+_0x9d21[7]+_0xb158x4+_0x9d21[8]);} ;} ; resizeThumb("Blog",x,y); //]]></script> </b:if></b:if>

    Các thông số cần thay đổi :
    - Blog : thuộc tính id của thẻ <div> chứa hình ảnh cần hiển thị trên blogspot.
    - x,y : chiều dài và rộng của ảnh thumbnail.
     
    Diễn đàn Ntphong index siêu nhanh!

    Diễn đàn Seo

    Tiêu đề: Tối ưu hình ảnh thumbnail trên trang chủ blogspot

    Ghi nguồn bài viết www.ntphong.com khi đăng tải lại bài viết này.

  2. Quảng cáo Thành viên VIP


    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


Link hữu ích: @@ giàn phơi thông minh, giàn phơi quần áo, giàn phơi quần áo thông minh, giàn phơi quần áo, sim tra sau, giàn phơi thông minh, Mật Ong Rừng, Mật Ong Rừng Nguyên Chất, fpt ho chi minh, Quay phim Flycam, lap dat cap quang viettel, @@
=