تبدیل عکس به کد css

[jafar2012]

hi
دو تا عکس رو می خواهم به کد css تبدیل کنم
برای این منظور یه افزونه برای فتوشاپ دیدم و
یک سایت که کار تبدیل رو انجام می داد ولی
یک نفر گفت بهتره خودت این کار رو انجام بدی (برای اینکه کد استاندارد و مهمتر اینکه کمتر تولید کنی) و گفت این کار اصلا سخت نیست ولی وقتش رو پیدا نکردم اون زمان یاد بگیرم این شدکه
تاپیک زدم تا در قالب مثالی یا راهنمایی کمک کنید تا خودم این کار رو یاد بگیرم

[jafar2012]

hi
help me ?? or help you
یه راهنمایی بفرمایید ممنون می شم میگن زکات علم آموزش دادن اون علم هست.

[SlowCode]

سلام!!!
بی خودی عمرتو هدر نده با همون ابزارها و سایت ها اینکارو بکن.
بعد اون کد رو Compress کن تا کم حجم بشه.
شما نمیتونی خودت دستی یه عکس رو به css تبدیل کنی.
اگه اون دوستت رو دیدی بهش بگو بیاد به ما هم یاد بده!
ولی فکر میکنم منظور دوستت یه چیز دیگه بوده باشه. چون واسه اینجور برنامه ها کلی کد مینویسن که باید پیکسل ها رو بررسی کنه! حالا نمیدونم این رفیقت پیکسل ها رو با چی میشمرده.

[eshpilen]

حالا واسه چی به CSS تبدیل کنی؟

[jafar2012]

hi
خودت دوست داری تبدیل به چی بشه
برای افزایش سرعت لود سایت
اینکه فرمودید فشرده کنم من از دروپال استفاده می کنم (یه مدت تو کار دستکاری قالب دروپال هستم) حالا
به جای اینکه لینک بشه به اون عکس می خواهم از کدها استفاده بشه

[eshpilen]

من اینو می دونم که متن سریعترین چیزیه که توی وب حرکت می کنه. بهتر عکس ها رو تبدیل به متن کنید و خود ناتپد این کار رو اتوماتیک می کنه. کافی پسوند عکس رو تکست کنی.
در ضمن در مورد این قالب دروپال بیشتر توضیح بدید آشنایی ندارم متشکرم:چشمک:
این اظهارات از اساس اشتباه و ناشیانه است.
برای اینترنت فرقی نمیکنه متن از توش عبور میکنه یا عکس (باینری).
همه چیز فقط جریانی از بیت و بایت هستند.
درواقع هر فایل متن یک فایل باینری هم هست (فایلهای متنی نوع خاصی/زیرمجموعه ای از فایلهای باینری هستند). چون عبارت باینری یعنی همون دودویی، که در کامپیوتر همه چیز دودویی است. ولی این عبارت بصورت نادقیق مصطلح شده برای فایلهایی که از مقادیر خارج از محدودهء کاراکترهای متنی هم استفاده میکنن.
تازه درواقع وقتی چیزی رو از باینری به فرمتهای دیگر مثل base64 یا hex تبدیل کنید، حجمش زیادتر هم میشه (base64 حدود 30% و هگز 100%)، چون فرمتهای دیگر از تمامی محدودهء مقادیر ممکن برای یک بایت استفاده نمیکنن.

عوض کردن پسوند یک فایل هم هیچ تاثیری در محتوا و فرمت اون نمیذاره.
موقعی هم که یک فایل باینری (عکس، فیلم، mp3 و غیره) رو با نوتپد باز میکنید، چون خیلی از مقادیر بایتهای فایل باینری معادل خاصی در کاراکترهای متنی در فونت ها نداره، بصورت یکسری کاراکترهای عجق وجق و رندوم دیده میشن چون مقادیر بایتها به کاراکترهای موجود در فونتها نگاشت میشه؛ تازه بایتهایی هم که مقداری در محدودهء نرمال کاراکترهای متنی داشتن اصلا ارتباطی به متن ندارن بطور معمول و بنابراین کاراکترهای نمایش داده شده بجای اونا بصورت رندوم و بی معنی هستند.
باز کردن و سیو کردن با نوتپد با پسوند txt هیچ تاثیری روی فایل نمیذاره الا عوض کردن پسوندش!
اگر چیزی از محتویات فایل این وسط تغییر کنه، اصلا اون عکس خراب میشه.

اما علت اینکه بعضی وقتا ممکنه عکس رو به فرمتهای متنی/غیرباینری مثل css تبدیل کنن چیه؟
خب علتش میتونه کاهش تعداد درخواستهای HTTP باشه.
بخاطر اینکه عکسها بصورت معمول باید بصورت یک فایل جداگانه با یک درخواست و پاسخ HTTP جداگانه به مرورگر دانلود بشن، و فایلهای CSS هم همینطور بصورت جداگانه.
و وقتی شما عکس رو بصورت CSS درمیارید میتونید اون رو در فایلهای CSS خودتون تجمیع کنید، و محتویات عکس رو بعنوان جزیی از محتویات فایل CSS به مرورگر ارسال کنید، در نتیجه تعداد درخواستهای HTTP مورد نیاز برای دریافت فایلهای جانبی صفحه کاهش پیدا میکنه و سرعت بالاتر میره.
البته بنده این رو منطقا فقط حدس زدم، وگرنه خودم تاحالا با چنین موردی برخورد نکرده بودم و چیز زیادی هم درموردش نشنیده بودم. بهرحال هم فکر نمیکنم انجام این کار همینطوری و برای هر فایل و سناریویی مناسب باشه! اگر اینطور بود از اول ساختار و استانداردها رو اینطور طراحی میکردن یا حداقل الان شاهد بودیم که بیشتر سایتهای حداقل معروف دارن تمام عکسهای خودشون رو به این شکل به مرورگر میفرستن.
بهرحال بنظرم انجام این کار برنامه رو از دیدگاه توسعه و نگهداری هم به نحو قابل توجهی پیچیده تر میکنه.

[SlowCode]

نظرات اقای eshpilen کاملا درست هست.


انتشار عکس از سمت سرور از نوع متنی به مرورگر می فهمونه که فعلا وقت لود صفحه رو صرف پردازش پیکسل گذاری ها نکنه و بره موارد دیگه رو بررسی کنه و در آخر لود صفحه در سمت کلاینت عمل پیکسل گذاری گرافیکی رو داشته باشید و این چقدر کمک می کنه به لود صفحه.
پیکسل گذاری دیگه چه صیغه ایه؟
این حرفی که گفتی خیلی ناشیانه ای هست!
چه فرقی داره! بالاخره اون عکس لود میشه دیگه! چه اول لودینگ صفحه باشه چه آخرش! اصل قضیه فرقی نمیکنه.
در ضمن همونطور که دوستمون گفت چون نوت پد نمیتونه خیلی از کاراکترهای باینری رو نشون بده اونو به شکل دیگه نشون میده یا اصلا نشون نمیده! به همین دلیل وقتی ذخیرش میکنی فایل خراب میشه.
ممکنه گاهی اوقات فایل نمایش داده بشه ولی احتمالا به خاطر این باشه که بیت های حیاتی اون صدمه ندیده!


در ضمن این متن های عجیب و غریب که دوستم این بالا↑:متعجب:اشاره کردن خودش یک نوع عمل فشرده سازی استاندارده این مسئله چه ربطی به فشرده سازی داره؟ شما به صدمه دیدن فایل و وارد شدن نقص به فایل میگی فشرده سازی؟ اونم استاندارد؟

چیزی که دوستمون در مورد افزایش حجم گفت درست هست. شما اگه این صفحه رو بخونی:
http://en.wikipedia.org/wiki/Binary_file
میبینی که توش نوشته شده:
using Base64 will increase the file's size by approximately 30%

در ضمن نوع هگز از باینری فشرده تره:متعجب: چیزی که شما میگی صرفا تو سیستم نمایش اعداد هست! بحث فایل خیلی پیچیده تر از نمایش عدد یا حرف هست!

در کل بهتره واسه حرفی که میزنین یا منبع یا مدرک ارائه بدین.



آقای اشپیلن من تو چندتا سایت دیدم که عکس ها رو به صورت base64 میفرستن سمت کاربر. مثلا سایت دیجی کالا تصاویرش رو اینطوری کرده. به نظر شما این روش چه مزیتی داره؟
من هرچقدر فکر کردم دلیلی نتونستم پیدا کنم.
مثلا تصویر داخل متن این لینک رو ببین:
http://digikala.com/News/News-1008
البته یکم بررسی کردم و متوجه شدم که این سایت قبلا از این روش استفاده میکرده و الان دیگه لینک رو مستقیم میده. مثلا:
http://digikala.com/News/News-1079

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

[SlowCode]

در جواب آقای جعفر کاراته:لبخند:، شروع کننده تایک:
طبق مطالبی که الان خوندم فهمیدم که تو css هم از همون base64 استفاده میکنن. مثلا:

.address-book {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAA f8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccll PAAAAp1JREFUeNqEU21IU1EYfu7unW5Ty6aBszYs6MeUjGVYok HYyH5E1B9rZWFEFPQnAwmy6Hc/oqhfJsRKSSZGH1JIIX3MNCsqLTD9o1Oj6ebnnDfvvefezrnbdC HhCw/n433P8z7nPe/hBEEAtX0U7hc164uwuvVSXKwZLoOmaRDim+7m9vZa0WiEKSUFF pNpCWlmMyypqTDRuYn6t3k8vmQ2gRDCxs0t9fW45F52aBTROJL tZl7nEZad2m+KtoQCQ0FBARyOCGRZ/q92I1WgqqXlfdd95VsrK8/pChIEqqpCkiQsiCII0aBQZZoWl8lzFDwsFjMl0DBLY8Lj41hBw K4jSQrWOIphL6xYyhwJDWGo6wFSaH1Y3PTCAsITE1oyAa8flhW kbSiCLX8vun11eiGIpiJ/z2nYdx5HqLdVV7elrOzsuqysL3rmBIGiKPizKCHHWY4PLVeQbn XAdegqdhy+hu8dDTBnbqQJZJ1A7u+vz7RaiymWCZgCRSF6Edk8 b9cx+B/W6WuVxPaZnyiqXoPpyUmVYvkKTIFClHigEieKjYuSvETUllaF4 GAUM1NT6ooaJDKx+aDfC9fByxj90REb+9ppmIoAscH/6leg8MS9DJXPAM9xHCM443K57C6biMjcHDaVVCHw9RmCA2/RGC5C00AqXk/m4p20HZK4CM/J3Zk9n0ecMBhDQnJHcrTisyMfdQXOilrdMfxcwoHq/fg5R59TiQV3hYGKo6X2J/c7LyQIjOx9GXhOw/zoJ8wEevRGyp53o/lGMNYsBgPtEwLecwov7/jGDKa1twT6o3KpL4MdZgGsWZLtfPr7f1q58k1JNHy7YYaM+J+K 3Y2PmAIbRavX66229hrGVvvL5uzsHDEUvUu+NT1my78CDAAMK1 a8/QaZCgAAAABJRU5ErkJggg==);
width: 16px;
height: 16px;
background-repeat: no-repeat;
}

حالا واسه تولید کردن این کد هم میتونی از تابع base64_encode که تو php هست استفاده کنی. کار ساده ای هست.
تو این صفحه توضیحات خیلی خوبی در این مورد داده شده
http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to

یه جدولی هست که توش یه مقایسه ای بین سرعت در حالت عادی و در حالت استفاده از base64 و استفاده از gzip نشون داده شده.
در هر صورت این انکودینگ باعث افزایش حجم و به دنبال اون افزایش زمان لود شدن میشه.
حالا درسته از طرفی تعداد درخواست رو کاهش میده ولی تقریبا تفاوت محسوسی فکر نکنم ایجاد بشه.

[SlowCode]

اسپم نده!
من هنوز روی حرفی که گفتم هستم، یعنی دستی نمیتونی عکس رو به css تبدیل کنی:لبخند:
اگه شما میتونی بسم الله!

خوانندگان عزیز خودتون قضاوت کنید که کی بی سواده:قهقهه:
کی از سواد حرف زد که شما به ما میگی بی سواد؟ ما به تو گفتیم بی سواد؟
اگه به نظر شما سوال پرسیدن و شفاف سازی مسئله و کمک به سوال کننده بی سوادی هست پس شما خیلی خیلی با سواد هستی.
در مورد جواب هم درسته من اولش نمیدونستم ولی مهم اینه که متوجه شدم.
ولی ظاهرا شما هنوز .... و همش دنبال کل کل و اسپم دادن هستی.

[jafar2012]

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

[habibb]

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

حالا بالاخره جواب چی شد که می گید پاسخ گرفتم :خجالت:
با تشکر

[jafar2012]

hi my Friend
با چن نفر صحبت کردیم اونا هم گفت تبدیل ممکن تاثیر داشته باشه و قرار شد تست کنم و نتیجه رو اعلام کنم ولی
فعلا جواب تست رو نمی دم چون درگیر امتحان ها شدم حدود 1 ماه دیگه این اولین کارم خواهد بود(پس از پایان امتحانات) و نتیجه رو حتما اعلام می کنم پس منتظر باشید ولی به نظر بین تعداد عکس ها و حجم عکس رابطه ای وجود داره