السلام عليكم
في هذا الدرس سوف أعرفكم بأسرار مخفية في روابط صور غوغل او بلوجر الذي يمكنكم الاستعانة بها في تحسين مدونتكم وسرعتها ، فهناك اكواد صغيرة عند اضافتها لرابط صورة بلوجر او غوغل تقوم بأدوار مهمة منها تحجيم الصور وتغيير نوعها وخلفيتها .
كما نعلم صور بلوجر يتم استضافتها في العادة في سرفرات خاصة تبدأ ب
4.bp.blogspot.com/- ويأتي مكان رقم 4 ارقام أخرى ، ومؤخرا اصبحت بلوجر تستضيف الصور في سرفرات جديدة مثل lh3.googleusercontent.com ، لذلك فالطريقة التي سأعمل على شرحها تنتطبق على جميع السور التي يتم استظافتها على خوادم غوغل.
كيف يمكن استخدام هذه الأكواد :
- يمكنك اما التعديل عليها يدويا في صور شعار المدونة مثلا او صور الأيقونات ...
-او باستعمالها في loadlazy او بتعديل الصور قبل التحميل بالجافاسكريبت
إليك اذا أهم هذه الاختصارات : سنعمل على هذا الرابط وجميع الاختصارات نضعها مكان codehere
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8UpSAZMV8o2AleL4AzHK1WuD-ti7LU5iWJZd1DHacuayDHLm-OEjhbnIMlWsfJ7dDDDGyE8qITTlhx9UKn5IDfYod7O0Wa-EIrj-42noGGWP_esffU_ahUfPxmdZn-gj_wS8eAQYhOo/s500/flowers.jpg
l- تغيير حجم الصورة تلقائيا نستعمل s1600 في هذه الحالة يتم تصغير الطول نسبة للعرض غير 1600 بأي رقم
مثال :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8UpSAZMV8o2AleL4AzHK1WuD-ti7LU5iWJZd1DHacuayDHLm-OEjhbnIMlWsfJ7dDDDGyE8qITTlhx9UKn5IDfYod7O0Wa-EIrj-42noGGWP_esffU_ahUfPxmdZn-gj_wS8eAQYhOo/s500/flowers.jpg
2- العملية السابقة تقوم بتحديد طول الصورة بناءا على عرضها، ولكي نقوم بتحدديد العرض بناءا على الطول نستخدم الكود التالي w520 مثلا
مثال :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8UpSAZMV8o2AleL4AzHK1WuD-ti7LU5iWJZd1DHacuayDHLm-OEjhbnIMlWsfJ7dDDDGyE8qITTlhx9UKn5IDfYod7O0Wa-EIrj-42noGGWP_esffU_ahUfPxmdZn-gj_wS8eAQYhOo/w520/flowers.jpg
3- يمكننا ايضا تحديد الطول والعرض بشكل دقبق باستعمال الكود w420-h420 وهذا الكود يقوم بتحجيم الصورة ، وبعض المرات لا يشتغل أو يقوم فقط بوظسفة الكود الاول
مثلا :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8UpSAZMV8o2AleL4AzHK1WuD-ti7LU5iWJZd1DHacuayDHLm-OEjhbnIMlWsfJ7dDDDGyE8qITTlhx9UKn5IDfYod7O0Wa-EIrj-42noGGWP_esffU_ahUfPxmdZn-gj_wS8eAQYhOo/w500-h500/flowers.jpg
4- تحديد الطول والارتفاع مع تقطيع الصورة نستخدم
مثال :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8UpSAZMV8o2AleL4AzHK1WuD-ti7LU5iWJZd1DHacuayDHLm-OEjhbnIMlWsfJ7dDDDGyE8qITTlhx9UKn5IDfYod7O0Wa-EIrj-42noGGWP_esffU_ahUfPxmdZn-gj_wS8eAQYhOo/w500-c-h500/flowers.jpg
5- جعل رابط الصورة قابل للتحميل نستعمل نضيف -d
مثال :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8UpSAZMV8o2AleL4AzHK1WuD-ti7LU5iWJZd1DHacuayDHLm-OEjhbnIMlWsfJ7dDDDGyE8qITTlhx9UKn5IDfYod7O0Wa-EIrj-42noGGWP_esffU_ahUfPxmdZn-gj_wS8eAQYhOo/w500-d-h500/flowers.jpg
6- اضافة اطار للصورة نضيف b50 و50 هو عرض الاطار بالبكسل ، ولتغيير لون الأطار نستخدم c0x673ab7 مع تغيير 673ab7 بكود اللون
مثال
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8UpSAZMV8o2AleL4AzHK1WuD-ti7LU5iWJZd1DHacuayDHLm-OEjhbnIMlWsfJ7dDDDGyE8qITTlhx9UKn5IDfYod7O0Wa-EIrj-42noGGWP_esffU_ahUfPxmdZn-gj_wS8eAQYhOo/h500-b50-c0x00673ab7/flowers.jpg
7- جعل الصور مدورة نستعمل -cc
مثال :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8UpSAZMV8o2AleL4AzHK1WuD-ti7LU5iWJZd1DHacuayDHLm-OEjhbnIMlWsfJ7dDDDGyE8qITTlhx9UKn5IDfYod7O0Wa-EIrj-42noGGWP_esffU_ahUfPxmdZn-gj_wS8eAQYhOo/h500-b50-cc/flowers.jpg
8 - تحويل الصور الى webp نستعمل -rw هذا الأمر مفيد جدا لضغط الصور
مثال :
https://1.bp.blogspot.com/-vKBdwOoy5sg/X-ZjECYJkpI/AAAAAAAABvg/GTixjO9PQD0zTnlaZGAvJvK0VDCHtpJkwCLcBGAsYHQ/h500--rw/flowers.jpg
9- تغيير خلفية الصورة اذا كانت شفافة نساخدم -rj-c0xffffff
مثال :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LZDaoKW4zjY2dr4QIxSiBlPZF601L2r3QlkopuslsUvUWlqb3m6w-qMypuV8eAszhjGyaS-Q06AUFTo7GSXbz14EPul9OGHHeUbTD0D115Xe6O3DU-BP72h0P30R9PgjLc87C-VXIhE1/s400-c0x00ffffff-rj/google.png
10- تقطيع الصورة نستعمل -c يتم تقطيع الصورة بالنسبة للطول والعرض
مثال
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DILrn2QoeGAzd2gqoPApv3hoACxR0hyW19FvuwGohNM5mksg43hRiaCzCYwYhaqQaDq5a7stB1KxydGhM4kv4XVw_WmRF4GbqOMtqEbEbQ2zSh_a67v08-0B68rckesv-oso-0qTgPll/s1620-c/women+%25282%2529.jpg
11- تقطيع الصور التي فيها وجوه نسنعمل -pp هذه الطريقة تعمل بطريقة ذكية بحيت تقوم بتقطيع الصورة بالنسبة التي يظهر فيه وجه الشخص في الصورة ، الطريقة التي قبلها تقطع الصورة من أي مكان تجد مناسب
مثال :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DILrn2QoeGAzd2gqoPApv3hoACxR0hyW19FvuwGohNM5mksg43hRiaCzCYwYhaqQaDq5a7stB1KxydGhM4kv4XVw_WmRF4GbqOMtqEbEbQ2zSh_a67v08-0B68rckesv-oso-0qTgPll/s1620-pp/women+%25282%2529.jpg
12 - ضغط الصور استعمل -l100 مع تغيير قيمة 100 بالنسبة المئوية لجودة الصورة
مثال :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DILrn2QoeGAzd2gqoPApv3hoACxR0hyW19FvuwGohNM5mksg43hRiaCzCYwYhaqQaDq5a7stB1KxydGhM4kv4XVw_WmRF4GbqOMtqEbEbQ2zSh_a67v08-0B68rckesv-oso-0qTgPll/s1620-l10/women+%25282%2529.jpg
ملاحظة يمكن استعمال بارامتر واحد ، كما يمكن استعمل اكثر من بارامتر بالفصل بينها ب -
مثال :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DILrn2QoeGAzd2gqoPApv3hoACxR0hyW19FvuwGohNM5mksg43hRiaCzCYwYhaqQaDq5a7stB1KxydGhM4kv4XVw_WmRF4GbqOMtqEbEbQ2zSh_a67v08-0B68rckesv-oso-0qTgPll/s600-l10-cc/women+%25282%2529.jpg
جمعت لكم الاختصارات المهمة وتوجد الكثير منها ، يمكنم الاطلاع على المزيد منها من هنا