استفسار حول تقليل حجم الصور مع الحفظ على الجودة

كيف يمكن أن أقوم من خلال كود بالا html
أن اقوم با ستدعاء الصورة من السيرفر بمقاسات التي ارغب بها مع الحفاظ على الجودة وتقليل الحجم
بعنى لو كانت صورة مثلا تغطي باكلمها الشاشة وبحجم 4 ميجا
واريد ان اعرضها عالصفحة بمقاس 100*50 وبحجم قليل يتناسب مع مقاساتها مع الحفاظ عالجودة
وشكرا
وهل

يحل المشكلة ام هناك حل اخر ام انن فقط هنا يصغرالمقاسات ولكن الحجم يبقى كما هو كبير

3 Likes

اولاً حجم 4 ميجا للصورة كبير لهذا قومي بضغط الصورة وبإمكانك إستخدام موقع tinypng لضغط الصورة.

تستطيعي إستدعاء صور مختلفة حسب حجم الشاشة بإستخدام العنصر <picture> </picture> و الـ attributes (sizes & srcset)

في البدأية العنصر picture والـ attributes الاخرى التي نحتاجها مدعومة في أغلب المتصفحات ولكن يوجد بعض المتصفحات التي لا تدعمها كما موضح بالصورة التالية من موقع caniuse.com:

لهذا اذا بدك تكون مدعومة بالمتصفحات الأخرى بتحتاجي فقط تضمين سكربت Polyfill يسمى Picturefill التحميل من هنا و موقع المصدر من هنا.

كود التضمين:

<script src="js/picturefill.min.js" async></script>

الان بإمكانك إستدعاء الصورة المناسبة حسب عرض الشاشة بإستخدام الكود التالي:

<img src="small.jpg" alt="" srcset="small.jpg 200w, medium.jpg 1000w, large.jpg 1500w">

في الكود أعلاة تكتبي مسار الصورة وبجوارها عرض الصورة الحقيقي كالتالي

small.jpg 200w

ثم فاصلة وتكتبي إسم الصورة الثانية وعرضها … الخ


او بإستخدام الكود التالي:

<picture>
  <source media="(min-width: 650px)" srcset="large.jpg">
  <source media="(min-width: 465px)" srcset="medium.jpg">
  <img src="small.jpg" alt="">
</picture>

مصدر للإطلاع أكثر على موضوع الصور التجاوبية (Responsive images)

فيديو مفيد بخصوص الموضوع


في حال مازلتي بحاجة لمساعدة لا تترددي بطرح سؤالك

9 Likes

هادا الكود بيحل المشكلة بصراحة بحثت عالنت
مش كلو فاهماه مية بالمية اذا بتشرحلي
وهل فعلا بيعمل تصغير لحجم الصورة وكيف اطبقه من خلال جافاسكريبت واناديه في head html

/* global node */
'use strict';

var assign = node('object-assign');
var drop = require('component/drop-anywhere');
var each = node('each-async');
var fs = node('fs');
var Imagemin = node('imagemin');
var path = node('path');
var Spinner = require('component/spinner');

/**
 * Minify images
 *
 * @param {Object} file
 * @param {Function} cb
 * @api private
 */

function minify(file, cb) {
	fs.readFile(file.path, function (err, buf) {
		if (err) {
			cb(err);
			return;
		}

		var imagemin = new Imagemin()
			.src(buf)
			.dest(path.join(path.dirname(file.path), 'build', path.basename(file.path)))
			.use(Imagemin.gifsicle())
			.use(Imagemin.jpegtran())
			.use(Imagemin.optipng())
			.use(Imagemin.pngquant())
			.use(Imagemin.svgo());

		imagemin.optimize(function (err, file) {
			if (err) {
				cb(err);
				return;
			}

			cb(null, assign(file, { original: buf }));
		});
	});
}

/**
 * Create spinner
 *
 * @api private
 */

function spin() {
	var w = document.body.offsetWidth;
	var h = document.body.offsetHeight;
	var s = new Spinner()
		.size(w / 4)
		.light();

	s.el.style.position = 'absolute';
	s.el.style.top = h / 2 - (w / 4) / 2 + 'px';
	s.el.style.left = w / 2 - (w / 4) / 2 + 'px';

	spin.remove = function () {
		document.body.removeChild(s.el);
	};

	window.addEventListener('resize', function () {
		w = document.body.offsetWidth;
		h = document.body.offsetHeight;
	});

	document.body.appendChild(s.el);
	return s;
}

/**
 * Toggle display
 *
 * @param {Element} el
 * @api private
 */

function toggle(el) {
	el = document.querySelector(el);

	if (el.style.display === 'none') {
		el.style.display = 'block';
		return;
	}

	el.style.display = 'none';
}

/**
 * Run
 */

drop(function (e) {
	var files = [];

	toggle('#drop-anywhere');
	spin();

	each(e.items, function (item, i, done) {
		minify(item, function (err, file) {
			if (err) {
				done(err);
				return;
			}

			files.push(file);
			done();
		});
	}, function (err) {
		if (err) {
			console.error(err);
			return;
		}

		toggle('#drop-anywhere');
		spin.remove();

		files = [];
	});
});

سؤال اخر هلا الكود يلي معبي الصفحة هون في هادا الرابط بدي انسخو كلو في ملف جافاسكريبت
https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.min.js
لهذا اذا بدك تكون مدعومة بالمتصفحات الأخرى بتحتاجي فقط تضمين سكربت Polyfill يسمى Picturefill التحميل من هنا
الكود كبير وكانو سطر واحدطلاسم جنب بعض

1 Like

بإمكانك تحميل الملف كما تقومي بتحميل أي ملف آخر, وتضعيه بجانب الكود خاصتك… أو بإمكانك استعمال الرابط مباشرة لأنه يعتبر جايي من cdn

  • ماهي content delivery network - CDN ؟

هو نظام يضمن لك أن الملف الآتي من عنده يأخذ أقرب سيرفر من جهة المستخدم, مثلاً إذا المستخدم في مصر, يعطيه الملف من أقرب سيرفر من مصر, مثلاً من دبي.

  • كيف تضمني الكود باستعمال cdn ؟

فقط تكتبيه بهذا الشكل:

<script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.min.js" async></script>
  • لما يظهر الكود كطلاسم ؟

ليس طلاسم, فقط تم تجهيز الكود بشكل طبيعي, ثم استعمل عليه minify & uglify (لجعله صغير الحجم قدر الامكان بحذف المسافات والأسطر).

بإمكانك التجربة هنا (اكتبي كود js ثم قومي بتصغير حجمه):
https://skalman.github.io/UglifyJS-online/

1 Like

شكرا جزيلا الك
هلا بجرب الكود ويارب يزبط معي
بتشكرك وبتشكر استاذ محمد

1 Like

أنا جربت لكن للاسف الصورة ظهرت كماهي وبنفس الحجم
وبنفس المقاسات
هادا هوا الكود يلي كتبتو
وما اتعرف عالامر
srcset

اين المشكلة

1 Like

@Amani.Ahmed

إحفظي الصور بإسم لا يحتوي على مسافات

الإسم الحالي: image (1) يحتوي على مسافة

1 Like

ان شاء الله
شكرا استاذ محمد

1 Like

يسلمو استاذ محمد زبطت لكن بس صغر الحجم مرة وحدة بعد هيك لما اغير المقاسات ما بيغير الحجم بيضل على التصغير لللحجم الي صار اول مرة
هيك بيعمل الامر
بس بيصغر الحجم مرة وحدة وبعد هيك اي تغيير في المقاسات بيضل على التصغير الي صار اول مرة بالنسبة للحجم بقصد

1 Like

الله يسلمك من كل شر

لما تغيري حجم الشاشة اعملي تحديث حتى يتم جلب الصورة.

وريني الكود كامل :blush:

1 Like
تسلم ويسلمك يارب ليكو هادا الكود

ليكو الكود اتفضل
بس فيه شغلة لما بنسخ الكود من البرنامج على صفحة الاكاديمية وارسلو ما بيظهر ما بعرف وين المشكلة الا اعخد صورة الو سكرين شوت

1 Like

لا يوجد أي مشكلة فقط يحتاج عمل reload للصفحة حتى يتم جلب الصورة المناسبة.

او بإمكانك تحديد الصور المطلوبة حسب حجم الشاشة بإستخدام الكود التالي:

<picture>
  <source media="(min-width: 769px)" srcset="images2.jpg">
  <img src="images.jpg" alt="">
</picture>
1 Like

يسلمو الكود زبط بغير مقاسات بس لما شفت الsource
لاعرف صار تغيير على الحجم لقيت انو حجم الصورة كما هو لم يتغير
فما الحل ؟؟