محسّن صور Retina لشاشات @2x وعالية الكثافة
جهّز صور @2x و@3x حادة لشاشات Retina وعالية الكثافة: حتى 3840×2160 بجودة 85 وبالعرض الدقيق الذي يحتاجه كل مكان.
جارٍ تحميل محسّن صور Retina (@2x و@3x)…
ملفاتك لا تغادر جهازك أبدًا
طريقة استخدام محسّن صور Retina (@2x و@3x)
- 1
افتح محسّن صور Retina (@2x و@3x) في هذه الصفحة. تُحمَّل مباشرة في متصفحك.
- 2
أضف ملفك أو نصك أو القيم، واضبط الإعدادات.
- 3
انسخ النتيجة أو نزّلها. لا يُرفع أي شيء ولا يُخزَّن.
كيفية إنشاء صور جاهزة لشاشات Retina
تضع شاشات Retina وغيرها من الشاشات عالية الكثافة بكسلين أو ثلاثة بكسلات فعلية في كل بكسل CSS. صورة تُعرض بعرض 600 بكسل على شاشة كهذه تحتاج 1200 بكسل (@2x) أو 1800 بكسل (@3x) من التفاصيل الحقيقية لتبدو حادة؛ وبأقل من ذلك تبدو النصوص والحواف ناعمة. لكن مضاعفة الأبعاد تضاعف عدد البكسلات أربع مرات، لذا يجب ضغط الصور عالية الكثافة بعناية وإلا أصبحت أبطأ ما في الصفحة.
يسمح محسّن Retina بصور حتى 3840 × 2160 بكسل، وهي دقة شاشة 4K، ويضغطها بجودة 85. هذا الإعداد الأعلى مهم لأن التفاصيل هي السبب الأساسي لتقديم صور عالية الدقة. لا تُكبَّر الصور الأصغر افتراضيًا: التكبير لا يضيف تفاصيل حقيقية، فابدأ من مصدر لا يقل عن حجم @2x الذي تحتاجه.
طريقة استخدام محسّن صور Retina (@2x و@3x)
- اسحب صورك إلى منطقة الرفع، أو انقر عليها لاختيار الملفات، أو الصق صورة باستخدام Ctrl+V. تقبل هذه الصفحة ملفات JPG وPNG وWebP وGIF وBMP، عدة ملفات دفعة واحدة وحتى 80 ميغابايت لكل ملف.
- احسب العرض المستهدف: عرض العرض × 2 لـ @2x أو × 3 لـ @3x. افتح Resize وأبقِ Max وأدخل ذلك العرض، مثل 1200 لمكان بعرض 600 بكسل.
- من More options اضبط اسم الملف على {name}@2x أو {name}-{w}w ليحمل كل مستوى كثافة اسمًا واضحًا، ثم عالج الصور نفسها مجددًا بعرض @1x إن أردت نسخًا قياسية أيضًا.
- افحص النتيجة بشريط المقارنة قبل/بعد: اسحب الفاصل فوق المعاينة واقرأ أسفلها الأبعاد الجديدة وحجم الملف والجودة ونسبة التوفير. أي تغيير في الإعدادات يعيد معالجة كل الصور تلقائيًا.
- نزّل صورة واحدة أو استخدم Download all (ZIP) للدفعة كاملة. ومن More options يمكنك أيضًا ضبط قيمة DPI ونمط لاسم الملف باستخدام {name} و{w} و{h}.
استخدام الصور عالية الكثافة بشكل صحيح
- قدّم الكثافتين. في HTML اذكر الملفات في srcset بواصفات 1x و2x (أو العرض) لتنزّل الشاشات العادية الملف الأصغر.
- يختبئ الضغط جيدًا في @2x. لأن كل بكسل صغير جدًا على شاشة Retina، تبدو جودة 75 إلى 80 غالبًا مطابقة؛ استخدم شريط قبل/بعد لترى إن كانت 85 ضرورية فعلًا.
- اختر الصيغ الحديثة. يبقي WebP أو AVIF ملفات @2x الكبيرة في حدود معقولة؛ ومحسّن WebP مضبوط لذلك مسبقًا.
- اعرف متى لا تحتاج 2x. للهواتف يراعي محسّن الجوال الشاشات الكثيفة أصلًا، وتغطي صور الصفحات العادية أداة محسّن صور المواقع.
إذا كانت صورة المصدر أصغر من حجم @2x الذي حسبته، تحتفظ النتيجة بحجم المصدر ببساطة. في هذه الحالة قدّمها كصورة قياسية فقط، أو أنشئ مصدرًا أكبر أولًا.
خاص ومجاني وسريع
يجري العمل كله في متصفحك: تُفك الصور ويُغيَّر حجمها ويُعاد ترميزها على جهازك، فلا يُرفع أي شيء إلى خادم. لا تسجيل ولا علامة مائية ولا حد يومي، وتُحذف بيانات الموقع والكاميرا (EXIF) من كل نتيجة.
المزايا
- حد دقة عالية 3840×2160 (4K)
- جودة 85 لتفاصيل حادة
- عرض @2x أو @3x دقيق تختاره
- لا تكبير للمصادر الأصغر افتراضيًا
- أسماء ملفات مثل {name}@2x
- خيارات مخرجات WebP وAVIF
الأسئلة الشائعة
ما صورة @2x؟
صورة عرضها وارتفاعها بالبكسل ضعف حجم عرضها، لتبدو حادة على الشاشات ذات كثافة بكسل 2 مثل شاشات Retina.
ما الحجم المناسب لصورة Retina؟
اضرب حجم CSS المعروض في كثافة البكسل: 600 × 400 على الشاشة يعني 1200 × 800 لـ @2x و1800 × 1200 لـ @3x.
هل تكبّر هذه الأداة الصور الصغيرة إلى حجم Retina؟
ليس افتراضيًا، لأن التكبير لا يضيف تفاصيل حقيقية. يمكنك إلغاء تحديد "Don't enlarge smaller images"، لكن أداة تكبير بالذكاء الاصطناعي تعطي نتائج أفضل للمصادر الصغيرة.
هل ملفات صور Retina أكبر بكثير؟
فيها أربعة أضعاف البكسلات عند @2x، لكن بفضل الضغط يكون الملف عادةً أقل بكثير من أربعة أضعاف. ويقلله WebP أكثر.
لماذا الحد 3840 × 2160؟
هذه دقة 4K UHD، وهي كافية لصور ملء الشاشة على الحواسيب المحمولة عالية الكثافة وشاشات 4K. يمكنك رفع القيم أو خفضها في قسم Resize.
هل تُرفع صوري إلى خادم؟
لا. تُعالَج الصور محليًا في متصفحك ولا تغادر جهازك أبدًا، وتُحذف عند إغلاق علامة التبويب.