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


#1

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

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


#2

اولاً حجم 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)

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


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


#3

هادا الكود بيحل المشكلة بصراحة بحثت عالنت
مش كلو فاهماه مية بالمية اذا بتشرحلي
وهل فعلا بيعمل تصغير لحجم الصورة وكيف اطبقه من خلال جافاسكريبت واناديه في 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 = [];
	});
});

#4

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


#5

بإمكانك تحميل الملف كما تقومي بتحميل أي ملف آخر, وتضعيه بجانب الكود خاصتك… أو بإمكانك استعمال الرابط مباشرة لأنه يعتبر جايي من 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/


#6

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


#7

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

اين المشكلة

#9


#10

@Amani.Ahmed

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

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


#11

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


#12

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


#13

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

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

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


#14
تسلم ويسلمك يارب ليكو هادا الكود

#15

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


#16

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

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

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

#17

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