نمایش تصویر شاخص در اندازه های مختلف

این تاپیک 5 پاسخ و 2 مشارکت کننده دارد . آخرین آپدیت توسط :  reza_yki ،‏ 1 سال و 3 ماه پیش .

این تاپیک تاکنون 482 بازدید داشته است .

تگ شده :  ,

نویسنده پست
دوشنبه ، 24 آگوست 2015     2:02 ب.ظ #


reza_yki

Subscriber
52 پست29 تاپیک

سلام بنده دوتا سوال دارم اول این که من درحال طراحی یک قالب هستم که به شکل زیر هستش:

http://s3.picofile.com/file/8208049984/post_1.png

من می خوام امکانی برای کاربر بزارم که اگه خواست نمایش بلوک ها به شکل زیر صورت بگیره مثل خیلی از قالب های اون ورآبی

http://s6.picofile.com/file/8208049992/post_2.png

مشکلم افت کیفیت عکس هستش ایا شما راه حلی بجز اضافه کردن یک برش اضافه با add_image_size برای نمایش تصویر میشناسید
اصلا راه حل بهینه به نظر شما چیه؟

 

سوال دومم اینه که من 10 تا سایز عکس دارم تو قالب ولی این کار باعث افزایش حجم سایت و فشار به سرور میشه به نظر شما چه طوری این 10 تا سایز رو کم کنم که مشکلی هم به وجود نیاد؟

0  تشکر
:: این تاپیک، پاسخ تائیدشده دارد : مشاهده پاسخ تائید شده توسط سوال کننده
دوشنبه ، 24 آگوست 2015     2:19 ب.ظ #


reza____ebliser

Subscriber
568 پست67 تاپیک

دوست عزیز هرگز چند تا اندازه مختلف از یک عکس آپلود نکنید مگر اینکه مجبور باشید

 

چون جزء dublicate image هست و کار اشتباهی هست

 

اول از خمه اینکه کار شما اشتباه هست چونکه مقیاس عکس رو دارید خراب میکنید

اگر عکس کوچک شما در اندازه 318*198 باشه عکس بزرگ شده باید در اندازه 648*403 باشه تا مقیاس اصلی عکس تغییر نکنه

و اینکه شما عکس بزرگ تر رو آپلود کنید مثلا عکس 648*403 پیکسل رو آپلود کنید و نمایش بدید ولی در مواقعی که در اندازه کوچکتر میخواید نمایشش بدید از width="318" و height="198" در تگ img استفاده کنید

 

اینجوری هم استاندارد تر هست و هم اینکه مشکل عکس تکراری و از همه مهمتر مشکل فضای هاست پیش نمیاد

اگر هم منظورتون از دو اندازه مختلف و دو عکسی که قرار دادید حالت ریسپانسیو سایت هست که در اندازه مختلف صفحه سایز تغییر کنه به جای استفاده از height و width در تگ img ، یک کلاس براش تعیریف کنید و در سی اس اس اندازه ها را برای حالت ریسپانسیو توی اون قرار بدید که قابل تغییر باشه

1  تشکر
دوشنبه ، 24 آگوست 2015     2:20 ب.ظ #


reza____ebliser

Subscriber
568 پست67 تاپیک

اگر توضیحات مناسب نبود و متوجه نشدید اعلام کنید تا براتون یک نمونه بنویسم

1  تشکر
سه شنبه ، 25 آگوست 2015     11:35 ق.ظ #


reza_yki

Subscriber
52 پست29 تاپیک

بسیار ممنون از پاسختون ایا این طوری به سئو ضربه نمی زنه چون با توجه گفته های شما سایز عکس یک چیز هست و چیزی که نشون داده میشه یک چیز دیگه؟

وبفرمایید که تو وردپرس برای تگ تصویر چطوری اندازه تعیین کرد تو html اون

<?php the_post_thumbnail(''); ?>

 

یه سوال غیر مرتبط هم دارم در مورد لوگو آیا بهتره که از تگ img استفاده کرد یا به وسیله css در پس زمینه عنصری مثل div قرار داد؟ دلیلش رو هم بفرمائید

0  تشکر
سه شنبه ، 25 آگوست 2015     2:34 ب.ظ # پاسخ تائید شده توسط سوال کننده


reza____ebliser

Subscriber
568 پست67 تاپیک

مورد اول اینکه بدترین حالت سئو این هست که شما برای تصاویر اندازه مشخص نکرده باشید و عکس طول و عرض نداشته باشه

یکی دیگه از اشتباهات طراحی سایت هم تکرار عکس ها هست که شما یک عکس رو در اندازه های مختلف در صفحتون قرار بدید برای حالت ریسپانسیو

ولی 2 تا مشکل بسیار بسیار بسیار بزرگ برای شما پیش میاد اگر از هر عکس چند عدد در چند اندازه مختلف داشته باشید که این 2 مورد مهم ترین مواردی هست که باید بهش توجه داشت

وقتی شما از یک عکس در دو اندازه مختلف استفاده میکنید هر شخص مجبور میشه هر 2 تا عکس رو لود و بارگزاری کنه، حالا فرض کنید 10 تا عکس داشته باشید و شخص مجبور میشه 20 تا عکس رو لود کنه، این کار چند تا ایراد بزرگ داره

حجم سایت بیشتر میشه و بارگزاری سایت زمان زیادی رو مصرف میکنه
اگر بخواید عکس ها رو کش کنید مشکل ساز میشه چون حجم کش سایت شما بالا میره و در سئو براتون مشکل به وجود میاد

در مورد هاست و پهنای باند

حجم هاست شما اشغال میشه
به دلیل اینکه باید تمام عکس ها باز بشه پهنای باند سایت شما گرفته میشه

 

 

 

خب چون شما عکس ها رو به این شکل قرار دادید توی سایت مجبور هستید اندازه رو به سی اس اس بدید

 

استایل زیر رو که واست نوشتم نگاه کن رضا جان

مثلاً من تعریف کردم اگر صفحه بزرگتر از 800 پیکسل باشه کلاس مورد نظر (شما باید ببینی چه کلاسی برای thumbnail تعریف شده و جای کلمه style اسم اون کلاس رو قرار بدی) اندازه ها رو نوشتم بعد زیرش گفتم اگر اندازه بین 500 تا 799 بود این استایل و در نهایت اگر اندازه کمتر از این بود از این اندازه استفاده کنه

شما چون 2 اندازه بیشتر نمیخوای استفاده کنی قسمت وسط رو نیاز نداری و فقط یک Max و یک min نیاز داری
<code></code>

 

 

در مورد نحوه قرار دادن لوگو من اطلاع چندانی ندارم ولی سایت های بزرگ رو که چک بکنید میبینید که از img استفاده کردن

مثلاً google یا bing و amazon و ebuy و ...

ولی فکر نکنم فرقی داشته باشه

چونکه حضور لوگو مهم هست نه نحوه قرار دادن اون

2  تشکر
سه شنبه ، 25 آگوست 2015     4:31 ب.ظ #


reza_yki

Subscriber
52 پست29 تاپیک

بسیار ممنون کارها تمام شده بود فقط تصویر ها برام سوال بود که با راهنمایی شما برطرف شد

0  تشکر
پست 1 تا 6 (از مجموع 6 پست)

این تاپیک پاسخ تائید شده دارد و بسته شده است .