 |
| Compress and edit images for free |
تلعب الصور دورًا أساسيًا في خلق تجارب ويب مميزة، حيث تجذب المستخدمين من خلال جاذبيتها البصرية. ولكن تحقيق التوازن بين جودة الصور وأداء الموقع يشكل تحديًا كبيرًا.
Image Compression & Editing Tool
:root {
–bg: #f9f9f9;
–text: #222;
–card: #fff;
–accent: #4CAF50;
}
@media (prefers-color-scheme: dark) {
:root {
–bg: #121212;
–text: #eee;
–card: #1e1e1e;
–accent: #81C784;
}
}
body {
background: var(–bg);
color: var(–text);
font-family: ‘Segoe UI’, Tahoma, sans-serif;
margin: 0;
padding: 20px;
text-align: center;
}
.uploader {
border: 2px dashed var(–accent);
padding: 40px;
margin: auto;
width: 90%;
max-width: 600px;
background: var(–card);
border-radius: 10px;
cursor: pointer;
}
.uploader input {
display: none;
}
.options {
margin: 20px auto;
max-width: 600px;
background: var(–card);
padding: 20px;
border-radius: 10px;
}
.options label, .options input, .options select {
display: block;
margin: 10px auto;
font-size: 14px;
}
.preview-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.preview-container img {
max-width: 200px;
border-radius: 8px;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
button {
background: var(–accent);
color: white;
border: none;
padding: 10px 25px;
margin-top: 10px;
border-radius: 6px;
cursor: pointer;
font-size: 15px;
}
button:hover {
opacity: 0.9;
}
input[type=”number”] {
width: 100px;
padding: 6px;
}
input[type=”file”] {
margin-top: 10px;
}
a.download-link {
display: inline-block;
margin-top: 10px;
text-decoration: none;
color: var(–accent);
}
Image Compression & Editing Tool
const imageInput = document.getElementById(“imageInput”);
const watermarkInput = document.getElementById(“watermarkInput”);
const watermarkTextInput = document.getElementById(“watermarkText”);
const watermarkSizeInput = document.getElementById(“watermarkSize”);
const qualitySlider = document.getElementById(“quality”);
const qualityValue = document.getElementById(“qualityValue”);
const formatSelect = document.getElementById(“format”);
const resizeWidth = document.getElementById(“resizeWidth”);
const resizeHeight = document.getElementById(“resizeHeight”);
const rotateInput = document.getElementById(“rotate”);
const positionSelect = document.getElementById(“position”);
const optionsBox = document.getElementById(“options”);
const previewContainer = document.getElementById(“previewContainer”);
let selectedFiles = [];
imageInput.addEventListener(“change”, e => {
selectedFiles = Array.from(e.target.files);
if (selectedFiles.length) {
optionsBox.style.display = “block”;
}
});
qualitySlider.addEventListener(“input”, () => {
qualityValue.textContent = qualitySlider.value;
});
function drawWatermark(ctx, watermark, canvasWidth, canvasHeight, position, scale) {
const wmWidth = watermark.width * (scale / 100);
const wmHeight = watermark.height * (scale / 100);
let x = 0, y = 0;
switch (position) {
case “top-right”: x = canvasWidth – wmWidth – 10; y = 10; break;
case “bottom-left”: x = 10; y = canvasHeight – wmHeight – 10; break;
case “bottom-right”: x = canvasWidth – wmWidth – 10; y = canvasHeight – wmHeight – 10; break;
case “center”: x = (canvasWidth – wmWidth) / 2; y = (canvasHeight – wmHeight) / 2; break;
default: x = 10; y = 10;
}
ctx.globalAlpha = 0.6;
ctx.drawImage(watermark, x, y, wmWidth, wmHeight);
ctx.globalAlpha = 1.0;
}
function drawTextWatermark(ctx, text, canvasWidth, canvasHeight, position) {
if (!text) return;
ctx.font = “20px Arial”;
ctx.fillStyle = “rgba(255,255,255,0.6)”;
ctx.textBaseline = “top”;
let x = 10, y = 10;
switch (position) {
case “top-right”: x = canvasWidth – ctx.measureText(text).width – 10; break;
case “bottom-left”: y = canvasHeight – 30; break;
case “bottom-right”: x = canvasWidth – ctx.measureText(text).width – 10; y = canvasHeight – 30; break;
case “center”: x = (canvasWidth – ctx.measureText(text).width) / 2; y = canvasHeight / 2; break;
}
ctx.fillText(text, x, y);
}
function processImages() {
const quality = parseFloat(qualitySlider.value);
const format = formatSelect.value;
const width = parseInt(resizeWidth.value);
const height = parseInt(resizeHeight.value);
const rotate = parseInt(rotateInput.value) || 0;
const position = positionSelect.value;
const watermarkFile = watermarkInput.files[0];
const watermarkText = watermarkTextInput.value.trim();
const watermarkSize = parseInt(watermarkSizeInput.value);
previewContainer.innerHTML = “”;
const loadWatermark = new Promise((resolve) => {
if (watermarkFile) {
const reader = new FileReader();
reader.onload = e => {
const wm = new Image();
wm.onload = () => resolve(wm);
wm.src = e.target.result;
};
reader.readAsDataURL(watermarkFile);
} else {
resolve(null);
}
});
loadWatermark.then(watermark => {
selectedFiles.forEach(file => {
const reader = new FileReader();
reader.onload = e => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement(“canvas”);
const ctx = canvas.getContext(“2d”);
let finalWidth = width || img.width;
let finalHeight = height || img.height;
canvas.width = finalWidth;
canvas.height = finalHeight;
if (rotate !== 0) {
canvas.width = finalHeight;
canvas.height = finalWidth;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate((rotate * Math.PI) / 180);
ctx.drawImage(img, -finalWidth / 2, -finalHeight / 2, finalWidth, finalHeight);
} else {
ctx.drawImage(img, 0, 0, finalWidth, finalHeight);
}
if (watermark) drawWatermark(ctx, watermark, canvas.width, canvas.height, position, watermarkSize);
if (watermarkText) drawTextWatermark(ctx, watermarkText, canvas.width, canvas.height, position);
const dataURL = canvas.toDataURL(format, quality);
const preview = document.createElement(“div”);
preview.innerHTML = `
Download Image
`;
previewContainer.appendChild(preview);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
});
}
غالبًا ما تؤدي الصور عالية الجودة إلى زيادة حجم الملفات، مما يبطئ الموقع ويؤثر سلبًا على تجربة المستخدم. يقدم الضغط الذكي للصور حلاً عن طريق تقليل حجم الملفات دون التأثير على الجودة، مما يؤدي إلى تحسين أداء الموقع.
دعونا نستعرض فوائد ضغط الصور وأفضل الممارسات لتطبيقه.
فهم عملية ضغط الصور
ضغط الصور هو عملية تقليل حجم ملف الصورة مع الحفاظ على جودتها البصرية. يتم ذلك عن طريق التخلص من البيانات الزائدة باستخدام خوارزميات مصممة لترميز المعلومات بكفاءة. هناك نوعان رئيسيان من ضغط الصور:
1. **الضغط الفاقد للجودة (Lossy Compression):** يقلل هذا النوع من حجم الملف عبر إزالة بعض بيانات الصورة، ما قد يؤدي لفقدان طفيف في الجودة. تُستخدم صيغ مثل JPEG (JPG)، وWebP، وAVIF لهذا النوع من الضغط، مما يحقق توازنًا فعالًا بين الجودة وحجم الملف.
2. **الضغط غير الفاقد للجودة (Lossless Compression):** يضغط هذا النوع الصور دون أي فقدان للجودة من خلال حذف البيانات الزائدة فقط. تدعم صيغ مثل PNG وAVIF هذا النوع، ما يجعلها مثالية للصور التي تتطلب جودة عالية مثل الشعارات والرسومات الدقيقة.
شاهد مواضيع مميزة قد تهمك ايضا
الصيغ المختلفة للصور وخصائص الضغط
فهم الصيغ المختلفة للصورة وخصائص الضغط الخاصة بها ضروري لتحسين أداء موقعك.
– **JPEG (JPG):** تُعتبر هذه الصيغة مثالية للصور الفوتوغرافية والصور ذات التدرجات اللونية المعقدة بفضل قدرتها على تنفيذ ضغط فاقد بشكل فعال، مع توفير توازن جيد بين الجودة وحجم الملف.
– **PNG:** تدعم هذه الصيغة الضغط غير الفاقد للجودة، ما يجعلها ممتازة للصور التي تتطلب دقة عالية وشفافية مثل الشعارات والرسومات.
– **WebP:** تدعم هذه الصيغة نوعي الضغط (الفاقد وغير الفاقد) مع نسب ضغط مميزة. توفر صور WebP أحجام ملفات أصغر دون فقد كبير في الجودة، وتدعم أيضًا الرسوم المتحركة بشكل مشابه لصيغة GIF.
– **AVIF:** صيغة جديدة نسبيًا تستخدم خوارزميات ضغط متقدمة لتوفير صور بجودة عالية وأحجام ملفات صغيرة. تدعم خصائص مثل النطاق الديناميكي العالي (HDR) وطيف ألوان واسع، مما يجعلها خيارًا مثاليًا لتطبيقات الويب الحديثة. غالبًا ما تتفوق هذه الصيغة في الكفاءة والسرعة مقارنة بالصيغ الأخرى.
أهمية ضغط الصور لأداء الموقع
1. **سرعة تحميل الصفحة وتجربة المستخدم**
الصفحات التي تُحمَّل بسرعة تقدم تجربة أفضل للمستخدمين الذين يميلون للبقاء وقت أطول والتفاعل مع المحتوى.
2. **تحسين الأداء على الأجهزة المحمولة**
مع زيادة استخدام الأجهزة المحمولة، أصبح تحسين الصور لأحجام الشاشات المختلفة والسرعات المختلفة أمرًا ضروريًا للحصول على تصفح سريع وسلس.
3. **تقليل استهلاك البيانات والتكاليف**
يقلل ضغط الصور من كمية البيانات المنقولة، مما يخفض استخدام النطاق الترددي والتكاليف المرتبطة به، خاصة للمواقع ذات الزيارات العالية.
4. **الرؤية SEO**
تعتبر محركات البحث المواقع التي تحمل بسرعة أعلى في ترتيب النتائج. يمكن أن يسهم ضغط الصور في تحسين ترتيب موقعك وزيادة الزيارات الطبيعية.
5. **معايير Google Web Vitals**
تُعد معايير الأداء، مثل مقاييس Core Web Vitals من Google، مهمة في تقييم أداء المواقع. يساعد الضغط على تحسين مقاييس مثل “Largest Contentful Paint” من خلال ضمان تحميل الصور الكبيرة بسرعة وكفاءة.
أفضل الممارسات لضغط الصور
– **اختيار الصيغة المناسبة:**
اختيار صيغة الصورة المناسبة حسب الاستخدام مهم جدًا؛ فالصور الفوتوغرافية تناسبها JPEG، بينما الرسومات والشعارات يُفضل استخدام صيغتي PNG أو AVIF.
اتباع هذه الخطوات يضمن توازنًا مثاليًا بين جودة الصور وأحجام الملفات، مما يؤدي إلى أداء موقع أفضل وتجربة مستخدم أكثر جاذبية.
sehaa 
أضف تعليق