سيتم تغيير حجم الصورة وفقًا للحجم المحدد بالسنتيمتر (ملليمتر ، بوصة) ، وكذلك الحجم المحدد في DPI ، وفقًا لمعايير طباعة الورق. يمكن تحديد الأبعاد بالسنتيمتر والمليمتر والبوصة بدقة من الألف ، على سبيل المثال ، بدلاً من تنسيق 15 × 10 ، يمكنك تعيين 15.201 × 10.203 سم.

جدول بأحجام صور قياسية في وضع عمودي (عمودي):

تنسيق الصورة بالسنتيمتر (سم)	الحجم بالمليمترات (مم)	الحجم بالبكسل (للطباعة 300 ديسيبل متوحد الخواص)	ابعاد متزنة (في الاتجاه الأفقي)
3 × 4 (بعد القطع اليدوي)	30 × 40	354 × 472	4:3 (1.33)
3.5x4.5 (بعد القطع اليدوي)	35 × 45	413 × 531	4:3 (1.33)
9x13	89 × 127	1063 × 1535	10:7 (1.43)
10x15	102 × 152	1181 × 1772	3:2 (1.5)
13 × 18	127 × 178	1535x2126	7:5 (1.4)
15 × 20(≈A5)	152 × 203	1772 × 2362	4:3 (1.33)
15 × 21	152 × 216	1772 × 2480	4:3 (1.33)
18 × 24	178 × 240	2126 × 2835	19:14 (1.36)
20 × 25	203 × 254	2362 × 2953	5:4 (1.25)
20 × 30(≈A4)	203-305	2362 × 3543	3:2 (1.5)
30 × 40	305 × 406	3543 × 4724	4:3 (1.33)
30 × 45	305 × 457	3543 × 5315	3:2 (1.5)

الحجم القياسي للورق تنسيق A4- 21 × 29.7 سم أو 2480 × 3508 بكسل بدقة 300 نقطة في البوصة. يمكن رؤية أبعاد تنسيقات الأوراق الأخرى على صفحة ويكيبيديا ، لكن لا تنسَ أن الأبعاد مدرجة هناك بالمليمترات والبوصة ، أي في الإعدادات على هذه الصفحة ، تحتاج إلى تحديد القيمة المناسبة.

إذا كنت بحاجة إلى تغيير حجم صورة دون مراعاة DPI (نقاط في البوصة) ، أي مع مراعاة نسب التنسيق المحدد فقط ، فأنت بحاجة إلى تعيين معلمة "الحجم في نقطة لكل بوصة" على "0" في إعدادات.

لم يتم تغيير الصورة الأصلية بأي شكل من الأشكال. ستحصل على صورة معالجة أخرى.

1) حدد صورة بتنسيق BMP و GIF و JPEG و PNG و TIFF:

2) يدخل التنسيق المطلوبالصورة بالسنتيمتر أو المليمتر أو البوصة
التنسيق المطلوب: X مليمترات (مم) سم (سم) بوصة (بوصة)
(التنسيق الافتراضي هو 15 × 10الذي يناسب للمناظر الطبيعية(أفقي) التصوير الفوتوغرافي ، لصورة(رأسيًا) ، يجب تبديل هذه القيم ، أي تحديدها 10x15، كما هو مبين في الجدول)الحجم في DPI: (0 = "تجاهل DPI ، والعرض حسب نسبة العرض إلى الارتفاع استنادًا إلى التنسيق المحدد")
(يمكن الحصول على حجم صورة jpg الأصلية في DPI من خلال قراءة البيانات الوصفية) نوع تغيير الحجم بالضبط حسب الأبعاد المحددة:
الحفاظ على النسب واقتصاص الحواف الزائدة
تمتد المطاط أو تضيق ، لا تقليم
بدون اقتصاص ، مع أحمر وردي أرجواني أزرق أزرق مخضر سماوي أخضر أصفر برتقالي أسود رمادي خلفية بيضاء حول الحواف انجذاب إلى: أعلى يسار وسط أسفل يمين الصورة

الصور هي مكونات أي موقع تقريبًا ، لذلك لا غنى عن تغيير الحجم. هناك طريقتان لتغيير حجم الصورة: محرر الرسوماتأو برمجيًا كود أتش تي أم ألعلى css.

إذا كان في كود المغلقعلى html ، لا تقم بتعيين حجم الصورة ، فسيكون ارتفاعها وعرضها على الموقع هو نفسه بالبكسل كما في مصدر الملف. أي أنه يمكنك تغيير حجم الصورة بدون css و html ، باستخدام محرر رسومي فقط ، وسوف تتغير تلقائيًا على الموقع إذا لم تحدد حجمها. ولكن هناك حالات يكون فيها من الضروري تغيير حجم الصورة برمجيًا في css إلى html.

1. تغيير الصورة في محرر الرسوم

يمكنك تغيير حجم الصورة في أي محرر رسومات (فوتوشوب ، جيمب ، إكس إنفيو) وسوف تتغير تلقائيًا على الموقع وفقًا للحجم الأصلي.

مزايا الطريقة:

يتم تحميل الصورة بشكل أسرع لأنك لا تحتاج إلى تنزيل بيانات إضافية (وحدات بكسل) ، والتي سيتم بعد ذلك ضغطها برمجيًا.

سلبيات:

تقوم برامج تحرير الرسوم بضغط الصور التي يقل عرضها وارتفاعها عن 200 بكسل بشكل سيئ.

كلما كان ذلك ممكنًا ومناسبًا ، حاول تغيير حجمه في محرر الرسومات بحيث يتم تحميل الصور بشكل أسرع من مع تغيير البرنامج. يمكن أن يكون الفرق في السرعة عشرات المرات.

2. تغيير الصورة في كود css بالموقع

الايجابيات:

أسرع وأكثر ملاءمة لضبط الحجم. هذه الطريقةعادة ما يتم استخدام تقليل الصورة للراحة. على سبيل المثال ، عندما يمكن أن تحتوي صورة واحدة على العديد من الأحجام المختلفة ، غالبًا ما يكون تغيير قيم نفس الصورة برمجيًا أكثر ملاءمة من تحميل جميع تنسيقات صورة واحدة تم تحريرها في محرر رسومات.

صور صغيرة مضغوطة نوعيًا ، أقل من 200 بكسل في الارتفاع أو العرض ، على عكس برامج تحرير الرسوم. إذا كنت تريد أن يكون حجم الصورة على الموقع أقل من 200 بكسل ، فمن الأفضل أن يكون الحجم الأصلي أكبر بنسبة 30-50٪ (260-300 بكسل) للحفظ جودة جيدةعند التناقص.

في الوقت نفسه ، لن يتم الشعور بالفرق في سرعة تحميل الموقع ، لأن الصور الصغيرة تشغل مساحة صغيرة جدًا وإذا قمت بزيادة حجمها بنسبة 30٪ ، فلن تلاحظ أي تغييرات. لكن لاحظ الفرق في الجودة.

سلبيات:

يستغرق تحميل الصور المضغوطة برمجيًا وقتًا أطول لأن تغيير الحجم لا يحدث إلا بعد تنزيل الإصدار الأصلي. لذلك ، إذا كان حجم الصورة أكثر من 200 بكسل في العرض أو الارتفاع ، فمن الأفضل ضغطها في محرر رسومات حتى يعمل الموقع بشكل أسرع.

كيفية تغيير حجم صورة html باستخدام css

لتغيير حجم الصورة في html المغلقالخصائص المستخدمة العرض (العرض) والارتفاع (الارتفاع)داخل سمة النمط. يمكنك كتابة العرض أو الارتفاع فقط ، وستتغير القيمة المتبقية غير المحددة تلقائيًا مع الحفاظ على نسبة العرض إلى الارتفاع للصورة. على سبيل المثال ، من خلال تحديد عرض الصورة فقط باستخدام العرض ، سيتغير ارتفاعها تلقائيًا ، مع الاحتفاظ بنسبة العرض إلى الارتفاع. والعكس صحيح ، عند تحديد الارتفاع (الارتفاع) فقط ، سيتغير عرضه تلقائيًا أيضًا ، مع الحفاظ على نسبة العرض إلى الارتفاع للصورة.

مثال رمز بدون تحديد أبعاد الصورة

نتيجة في المتصفح

كود الصفحة

مثال على رمز مع تغيير حجم الصورة بتنسيق .css

نتيجة في المتصفح

كود الصفحة

style = "width: 150px؛">

يستخدم كلا المثالين أعلاه نفس الصورة بحجم 300 × 184 بكسل (العرض والارتفاع). في مثال واحد ، تم عرض الصورة في المتصفح بدون تغييرات بالحجم الأصلي 300 × 184 بكسل ، حيث لم يتم تحديد العرض والارتفاع في css. وفي المثال الثاني ، تم عرض الصورة في المتصفح تم تقليلها بمقدار مرتين ، نظرًا لأن العرض كان 150 بكسل ، وبالتالي تغير الارتفاع تلقائيًا إلى 92 بكسل. كما ترى ، قد لا يتم تحديد خاصية الارتفاع على الإطلاق ، لأنها تتغير تلقائيًا بما يتناسب مع العرض.

إذا قدمت كلا الخيارين: العرض (العرض) ، الارتفاع (الارتفاع)ولن تتوافق مع النسب ، عندها سيكون للصورة هذا الحجم بالضبط ، ولكن بشكل مضغوط أو ممتد ، اعتمادًا على القيم.

لماذا من غير المرغوب فيه تكبير الصور

هام: زيادة حجم الصورة مصحوبة بفقدان الجودة. عند التغيير بأي شكل من الأشكال ، من المهم تعيين القيم أقل من الصورة الأصلية ، أي تقليلها فقط.

إذا قمت بتعيين حجم البكسل ليكون أكبر من الصورة الأصلية ، فسوف تتدهور الجودة. وسيكون فقدان الجودة مرئيًا بوضوح ، نظرًا لأن الكمبيوتر لا يمكنه إضافة وحدات بكسل جديدة ، يمكنه فقط زيادة حجم البيكسلات الموجودة. كلما زاد تكبير الصورة من القيمة الأصلية ، كانت جودتها أسوأ وكلما زاد وضوح وحدات البكسل المربعة.

لتغيير حجم صورة باستخدام HTML للعلامة عرض السمات (العرض) والارتفاع (الارتفاع) متوفرة. يتم استخدام وحدات البكسل كقيمة ، ويجب أن تتطابق الوسيطات مع الأبعاد المادية للصورة. على سبيل المثال ، في الشكل. يظهر الشكل 10.6 صورة بأبعاد 100 × 111 بكسل.

أرز. 10.6. الصورة بالحجم الأصلي

وفقًا لذلك ، يتم عرض كود HTML لوضع هذا الشكل في المثال 10.4.

مثال 10.4. أبعاد الرسم

إذا تم تحديد أبعاد الصورة بوضوح ، فسيستخدمها المتصفح لعرض المنطقة الفارغة المقابلة للصورة أثناء تحميل المستند (الشكل 10.7). بخلاف ذلك ، ينتظر المستعرض تحميل الصورة بالكامل قبل تغيير عرض الصورة وارتفاعها (الشكل 10.8). في هذه الحالة ، قد تتم إعادة تنسيق النص ، نظرًا لأن حجم الصورة غير معروف في البداية ويتم ضبطه تلقائيًا على صغير.

أرز. 10.7. لم يتم تحديد حجم الصورة ولم يتم تحميلها بعد

أرز. 10.8. تم تحميل الصورة ، إعادة تنسيق النص

يمكن تغيير عرض الصورة وارتفاعها لأعلى ولأسفل. ومع ذلك ، فإن هذا لا يؤثر على سرعة تنزيل الصورة بأي شكل من الأشكال ، حيث يظل حجم الملف دون تغيير. لذلك ، قم بتقليل الصورة بحذر ، لأن. قد يسبب هذا ارتباكًا بين القراء ، لماذا يستغرق مثل هذا الرسم الصغير وقتًا طويلاً في التحميل. لكن زيادة الحجم تؤدي إلى تأثير معاكس - حجم الصورة كبير ، ولكن يتم تحميل الملف بشكل أسرع بالنسبة للصورة ذات الحجم نفسه.

على التين. يظهر الشكل 10.9 نفس الصورة كما هو موضح في الشكل. 10.6 ، ولكن تضاعف في العرض والارتفاع.

أرز. 10.9. عرض الصورة مكبرة في المتصفح

سيظل الكود الخاص بمثل هذا الرسم بدون تغيير تقريبًا ويظهر في المثال 10.5.

مثال 10.5. تغيير حجم الصورة

يُطلق على تغيير الحجم هذا اسم إعادة التشكيل ، وتكون خوارزمية المتصفح أقل شأناً في قدراتها بالنسبة لمحرري الرسوم. لذلك ، من الضروري زيادة الصورة بهذه الطريقة فقط في حالات خاصة ، وإلا فإن جودة الصورة تتدهور كثيرًا. من الأفضل استخدام نوع من برامج الرسومات. الاستثناء هو الرسومات التي تحتوي على مساحات مستطيلة. على التين. يوضح الشكل 10.10 ملف نمط يأخذ 54 بايت وله حجم أصلي 8 × 8 بكسل ، بمقاس يصل إلى 150 بكسل.

أرز. 10.10. صورة مكبرة

تستخدم المستعرضات خوارزميتين لإعادة التشكيل - ثنائية التكعيبية (تعطي حوافًا ناعمة ونطاقًا لونيًا ناعمًا للألوان) وأقرب نقاط (تحافظ على المجموعة الأصلية من الألوان والحواف الحادة). تستخدم الإصدارات الحديثة من المتصفحات خوارزمية ثنائية التكعيبية ، بينما تستخدم المتصفحات القديمة ، على العكس من ذلك ، خوارزمية أقرب نقطة.

قبل الاجابة على السؤال كيفية إدراج الصورة في لغة تأشير النص الفائق؟"، تجدر الإشارة إلى أنه لا يستحق التحميل الزائد على صفحات الويب بكمية هائلة من المواد الرسومية ، لأن هذا لن يؤدي فقط إلى تحسين الإدراك البصري للمورد من قبل المستخدم ، ولكن أيضًا يزيد من وقت تحميل الصفحة.

عند إنشاء مواقع الويب ، فإن تنسيقات الرسوم الأكثر استخدامًا هي PNG و GIF و JPEG ، ولعمل التصميم مع الصور - محرر رسومات Adobe Photoshop ، الذي يحتوي على ميزات غنية لضغط الصور وتغيير حجمها دون فقدان الجودة ، وهو أمر مهم للغاية لتطوير الويب.

كيفية إدراج صورة في HTML؟

لإدراج صورة في صفحة HTML ، يتم استخدام علامة بسيطة واحدة:

,

حيث xxx هو عنوان الصورة. في حالة وجود الصورة في نفس دليل الصفحة ، ستبدو العلامة على النحو التالي:

ومع ذلك ، فإن الإنترنت عالي السرعة والمستقر لم يصل بعد إلى جميع أنحاء العالم ، ويحدث أن الصورة على الموقع ببساطة لا يتم تحميلها. لمثل هذه الحالات ، هناك مفهوم النص البديل.

يتم عرضها بدلاً من الصورة في وقت عدم توفرها أو تحميلها أو في وضع "عدم وجود صور" في المتصفح. تتم إضافته باستخدام سمة alt للعلامة. .

مثال على إضافة نص بديل إلى ملف رسومي:

تعيين أحجام الصور في HTML

لتغيير أبعاد العرض لملف صورة ، استخدم علامتي الارتفاع والعرض ، حيث يكون الارتفاع هو الارتفاع والعرض هو العرض ، مقاسة بالبكسل.

عند استخدام هذه السمات ، يقوم المستعرض أولاً بتخصيص مساحة للمحتوى الرسومي ، وإعداد التخطيط العام للصفحة ، وعرض النص ، ثم تحميل الصورة نفسها.

توضع الصورة في مستطيل بأبعاد محددة ، وإذا كانت المعلمات أصغر أو أكبر من المعلمات الأصلية ، فسيتم تمديد الصورة أو ضغطها.

إذا لم يتم استخدام سمات الطول والعرض ، يقوم المتصفح بتحميل الصورة على الفور ، مما يؤدي إلى تأخير عرض النص وعناصر الصفحة الأخرى.

يمكن تحديد هذه المعلمات بالبكسل (حجم الصورة ثابت ولا يعتمد على دقة شاشة المستخدم) أو بالنسب المئوية (يعتمد حجم الصورة على دقة الشاشة).

على سبيل المثال:

يجب أن نتذكر أنه في الوقت الذي تقوم فيه بتغيير الحجم الأصلي للصورة ، من الضروري الحفاظ على نسبها.

للقيام بذلك ، يكفي تحديد قيمة واحدة فقط من المعلمات ( العرض أو الارتفاع) ، وسيتم حساب قيمة المتصفح الثاني تلقائيًا.

موقع الصورة بتنسيق HTML

كما هو الحال مع العديد من علامات HTML ، تطبيق سمة المحاذاة ، التي تحاذي الصورة:

- الصورة فوق النص ؛

- الصورة موجودة أسفل النص ؛

- الصورة موجودة على يسار النص ؛

- الصورة موجودة على يمين النص.

صورة الارتباط

هذا يفعل كما يلي:

كما ترى ، يمكن أن يكون إدراج الرسم رابطًا ، وعند النقر عليه ، قم بإعادة التوجيه إلى أي عنوان مكتوب بالكامل أو بشكل مختصر.

كيف يمكنني جعل صورة خلفية في HTML؟

لا يمكن إدراج صورة في الصفحة ككائن مرئي فحسب ، بل يمكن أيضًا إنشاء صورة خلفية. لتعريف صورة كخلفية ، تحتاج إلى إضافة السمة background = ”xxx” إلى العلامة ، حيث xxx هو عنوان الصورة ، المحدد بنفس الطريقة كما في الأمثلة أعلاه.

على سبيل المثال ، لنقم بتعيين صورة النسيج التالية كصورة خلفية:

احفظ الصورة في المجلد مع إعداد الصفحة مسبقًا واكتب السطور التالية:

الخلفية مع النص.

تم تعيين صورة الخلفية على الصفحة.

لا تعرف كيفية زيادة حجم الصورة؟ هذه مهمة بسيطة للغاية حيث أن كل ما تحتاجه مثبت بالفعل على جهاز الكمبيوتر الخاص بك. اقرأ هذا الدليل وستتعلم كيفية تغيير حجم الصورة باستخدام 5 أدوات بسيطة.

الطريقة الأولى: كيفية تغيير حجم صورة في Microsoft Paint

1. ابحث عن MS Paint وقم بتشغيله. يتم تثبيته مسبقًا على جميع إصدارات نظام التشغيل شبابيك. ابدأ> كافة البرامج> البرامج الملحقة> الرسام:

1. اسحب الصورة إلى نافذة الرسام أو استخدمها القائمة> فتح (Ctrl + O).
2. في القائمة الرئيسية للبرنامج ، ابحث عن عنصر "تغيير الحجم" وحدده:

1. سيتم فتح لوحة تغيير حجم الصورة ونسبة العرض إلى الارتفاع. يمكنك تحديد القيمة بالبكسل. لا تنس تحديد المربع " والحفاظ على النسب". وإلا ستتشوه الصورة:

1. لزيادة حجم الصورة ، انقر فوق الزر "موافق" واحفظ الصورة.

نصيحة:

• إذا لم تتمكن من تغيير حجم صورتك دون تمديدها ، فيمكنك استخدام أداة Crop لإزالة الحواف غير المرغوب فيها. كيفية القيام بذلك موصوفة في الفقرة 3 ؛
• لفتح صورة بشكل أسرع ، انقر عليها بزر الماوس الأيمن وحدد " فتح مع الرسام»;
• من الأفضل حفظ الصورة بنفس تنسيق الصورة الأصلية.

الطريقة الثانية: كيفية تغيير حجم صورة في معرض صور MS

1. إذا لم يكن معرض صور Microsoft مثبتًا على جهاز الكمبيوتر الخاص بك ( ابدأ> معرض الصور) ، تحتاج إلى تنزيله وتثبيته كجزء من Windows Essentials 2012 ؛
2. قم بتشغيل MS Photo Gallery وابحث عن ملف الرسم الخاص بك ؛
3. انقر بزر الماوس الأيمن فوقه واختر "تغيير الحجم ...":

1. اختر إعدادًا مسبقًا: " 640 بكسل صغير"،" متوسط ​​1024 "،" كبير 1280 "، إلخ.

1. انقر " تغيير الحجم وحفظ". بعد أن تقوم بزيادة حجم الصورة ، سيتم وضع الصورة في نفس المجلد ، كما ستبقى الصورة الأصلية فيه.

نصيحة:

• إذا كنت تريد تعيين الحجم الدقيق للصورة ، في القائمة المنسدلة ، حدد " مخصص»وضبط الحجم على الجانب الأكبر من الصورة ؛
• لتغيير حجم صور متعددة في نفس الوقت ، حددها أثناء الضغط باستمرار على مفتاح Ctrl.

الطريقة الثالثة: كيفية تغيير حجم صورة في Photoscape

يمكنك تغيير حجم الصورة في Photoshop. أو استخدم Photoscape لهذا الغرض.

1. قم بتنزيل Photoscape وتثبيته. تشغيل البرنامج؛
2. انتقل إلى علامة التبويب "المحرر" وابحث عن الصورة التي تريد تعديلها:

1. في الجزء السفلي من الصورة يوجد زر "تغيير الحجم" ، انقر فوقه.
2. قم بتعيين حجم صورة جديد. تأكد من الخيار " الحفاظ على نسبة العرض إلى الارتفاعتم تمكينه واضغط على زر موافق:

1. احفظ الصورة المحررة.

نصيحة:

• إذا كنت بحاجة إلى تغيير حجم صور متعددة ، فاستخدم " محرر دفعة". إضافة مجلد وتغيير حجم جميع الصور فيه ؛
• إذا كنت لا تعرف الحجم الدقيق ، يمكنك تعيين "نسبة مئوية" من الحجم الأصلي.

الطريقة الرابعة: كيفية تغيير حجم الصورة في IrfanView

1. تثبيت IrfanView - أداة رائعة لعرض وزيادة حجم الصورة ؛
2. أضف صورة عن طريق سحبها إلى نافذة البرنامج ، أو بالنقر فوق الزر الأول في شريط الأدوات:

1. انتقل إلى علامة التبويب "صورة" ، وحدد " تغيير الحجم / النسبة» ( السيطرة + ص);
2. عيّن الحجم الجديد بالبكسل أو السنتيمتر أو البوصة أو نسبة مئوية من الصورة الأصلية:

1. احفظ الصورة.

نصيحة:

• يمكنك استخدام الأحجام القياسية: 640 × 480 بكسل ، 800 × 600 بكسل ، 1024 × 768 بكسل ، وما إلى ذلك ؛
• للحفاظ على صور عالية الجودة ، تأكد من ضبط إعداد DPI على 300 على الأقل.

الطريقة الخامسة: كيفية تغيير حجم الصورة عبر الإنترنت

1. لزيادة حجم الصورة عبر الإنترنت ، انتقل إلى موقع PicResize على الويب.
2. انقر فوق الزر تصفح"لتحديد صورة. انقر " يكمل»:

1. حدد نسبة مئوية من الصورة الأصلية ، مثل أصغر بنسبة 50٪. ستعرض الأداة حجم الصورة الناتجة. بدلاً من ذلك ، يمكنك إدخال الحجم الدقيق عن طريق تحديد " حجم مخصص»: