ما هو أعلى تنسيق صورة عالية الجودة. ما تنسيق اختيار الصور - JPEG، PNG أو GIF

من المؤلف: في مارس 2017، تبلغ الصور أكثر من 65٪ من محتوى الويب. وليس مفاجأة: الصور تعطي الجمال، وتمرير الرسائل، وأخبر القصص وتأسيس اتصال مع الزوار لموقعك. الجانب الخلفي سؤال - إذا كانت الصورة المستخدمة بشكل غير صحيح، فغالبا ما يكون السبب الرئيسي لموقع التباطؤ وجرب المستخدمين السيئين.

الاستخدام السليم للصور على شبكة الإنترنت يعني شيئين:

حدد تنسيق الصورة الصحيح؛

تحسين الصورة.

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

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

صور نقطية أو ناقل

مرتكز على الصور النقطية هناك شبكة بكسل ثنائية الأبعاد. يخزن كل بكسل لون وقيمة الشفافية.

الصور النقطية هي التوسع بشكل سيء: إذا قمت بزيادة الصورة النقطية، فسوف تفقد الوضوح والجودة. شائع التنسيقات النقطية صور ل Web - JPEG، JPG، GIF و PNG.

فيما يلي اثنين من الصور النقطية (JPG) مع تفاحة. الصورة الأولى هي حقيقية. والثاني يظهر الجزء الموسع من الصورة الأولى.

مثال على صورة نقطية في النوع.

زيادة جزء من الصورة النقطية.

إيلاء الاهتمام بفقدان الجودة في نسخة مكبرة من الصورة.

على النقيض من الصور النقطية رسومات فيكتور يتكون من خطوط وأرقام ونقاط الطريق. لا يتم تخزين معلومات حول صور المتجهات في بكسل، يتم تخزينها في التعليمات الرياضية للرسم، والتي لا ترتبط مع وحدات البكسل. وأوضح اليكس ووكر بوضوح شديد الفرق في مثال SVG - التنسيق الأكثر شيوعا للصور المتجه على الشبكة:

"SVG ليس تنسيق صورة، فهذا وصفة صورة أكبر." - لماذا صور JPEG مثل فطيرة التفاح من ماكدونالدز (لا SVG)

يمكن تحجيم إحدى عواقب الاستقلال عن دقة الشاشة - صور المتجهات تحت حجم المحتوى. ستكون الصور واضحة ومثالية لشاشات شبكية العين.

رسومات SVG على نطاق صغير.

جزء من صورة SVG الموسع.

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

مع فقدان الجودة أو خسارة (ضياع وخسارة)

يشير كل من مصطلح Lossy وخسارة إلى تقنيات ضغط ملفات الوسائط، أي الصور والصوت والفيديو.

ضغط Lossy: "لا يستعيد البيانات الرقمية تصل إلى 100٪ من الأصل. تتميز الأساليب ذات فقدان الجودة بدرجة عالية من الضغط، مما يقلل من الوزن الملفات المضغوطةوبعد ومع ذلك، تتم إزالة بعض البكسلات الأصلية والأمواج الصوتية وإطارات الفيديو إلى الأبد. " - موسوعة PCMAG.Com.

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

غالبا ما ترد تنسيق صورة مع فقدان الجودة، وهذا هو JPEG.

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

في الشبكة، يمكنك بسهولة العثور على تنسيقات صور ضائعة، وهي GIF و PNG.

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

أول تنسيقات للصور الثلاثة سوف أصف أدناه (JPG، GIF و PNG)، وقد استخدمت بالفعل في المواقع لفترة طويلة. آخر تنسيقتين، SVG و WebP، ليس جديدا تماما، فهي ليست شعبية بعد. ومع ذلك، لا يمكن أن تكون مناسبة أفضل لمتطلبات القدرة على التكيف والمواقع التي يتم تحميلها بسرعة، وقد زادت شعبيتها بشكل كبير.

jpeg.

JPEG أو JPG - تنسيق Lossy صممه مجموعة خبراء التصوير الفوتوغرافي المشترك. تشغل JPG الصور ما يقرب من 3٪ من جميع أنواع المحتوى على المواقع. لماذا هذا التنسيق شائع جدا:

يتمكن تنسيق JPG من عرض ملايين الألوان، مما يجعله مرشحا مثاليا لعرض الصور على الإنترنت؛

الاتجاهات والنهج الحديثة في تطوير المواقع

تعلم خوارزمية النمو المهنية سريعة من نقطة الصفر في مبنى الموقع

نظرا لأن هذا تنسيق ضياع، فيمكنك استخدام الضغط لتقليل حجم الملف بشكل كبير. في ملفات JPG هناك العديد من مستويات الضغط: ما يقرب من 60٪ سيكون كافيا للصور على الإنترنت، وهو شيء أعلى من 75٪ يضعف جودة الصورة؛

تدعم جميع أجهزة الإنترنت تنسيق JPG، والتي تبسط استخدام التنسيق على الإنترنت.

عيب ملحوظ من JPG - ملفات هذا التنسيق لا يدعم الشفافية. إذا كنت ترغب في استخدام خلفية شفافة تراكب صورة على لون الخلفية أو نسيج الصفحة، فإن صور JPG لا تنسى. اختر أحد الخيارات التي سأقولها أدناه.

gif.

يعد تنسيق تبادل GIF أو Graphics بتنسيق ضياع 8 بت مع أقصى قدر من الألوان يساوي 256. قيود الألوان تجعل خيار GIF غير مناسب لعرض الصور والصور بمجموعة واسعة من الألوان.

العوامل التي أثرت على هذا الاستخدام طويل الأجل على الإنترنت:

بسبب الحد الأقصى في 256 لونا، حجم الملف منخفض إلى حد ما؛

يدعم الشفافية؛

يدعم الرسوم المتحركة، والتي تتيح لك استخدام التنسيق لعرض الصور المحاورة، مثل الرموز والرموز واللافتات، إلخ؛

جيد مناسبة ل صور بسيطة مع الألوان أحادية الشكل، ولكن غير مناسب للصور.

بي إن جي.

PNG أو رسومات الشبكة المحمولة هي بديل ل GIF. تم تطوير التنسيق بواسطة W3C. مثل GIF، يستخدم التنسيق خوارزمية ضغط دون فقدان الجودة، تتوفر خيارات 8 بت و 24 بت. كلا الخيارين يدعم الشفافية. ومع ذلك، في صورة PNG 24 بت، يعمل الشفافية على قناة ألفا، وكذلك القنوات الحمراء والأخضر والأزرق. لذلك، على الرغم من حقيقة أن صور GIF و 8 بت صور PNG يمكن أن تكون غير شفافة تماما أو شفافة تماما، في PNG كل صورة بكسل تقدم 256 مستويات الشفافية.

يمكن استخدام خيار PNG 24 بت ل:

weig الصور مع مستويات مختلفة الشفافية؛

الصور المعقدة والرسومات؛

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

على عكس شكل gif. PNG لا يدعم الرسوم المتحركة، ويمكن أن يكون وزن الملفات كبيرا جدا.

SVG.

رسومات ناقلات SVG أو قابلة للتطوير (رسومات ناقلات قابلة للتطوير) هي نوع ملفات المتجهات بناء على XML. ظهر التنسيق في عام 2001، لكنه حصل على شعبية بين مطوري الويب مؤخرا فقط. سبب هذا الحب المتأخر هو دعم سيء ل SVG في المتصفحات على مر السنين. أردت أن أبلغكم بالفرح أنه في وقت كتابة المقالة يتم دعم المقالة SVG في جميع المتصفحات الرئيسية، ولكن ليس دون تمييز والبق.

يحتوي SVG على الكثير من الوظائف التي تجعل هذا التنسيق موصى به للويب، خاصة إذا تم استخدام SVG للصور البسيطة مثل الشعارات والبطاقات والرموز، إلخ.

إيجابيات تنسيق SVG

غالبا ما تزن SVG الصور النقطية أقل، خاصة بعد تحسين الويب والضغط من خلال GZIP؛

التنسيق قابل للتطوير، الذي يوفر الوضوح في أي دقة الشاشة؛

يمكن وضع رمز SVG في HTML وحفظ على استعلامات HTTP؛

يمكن تكوين رمز SVG عبر CSS؛

يمكن تحريك صور SVG، بما في ذلك الأجزاء الفردية كما هو الحال مع باستخدام CSS.و JS، وهو رائع جدا.

تجنب صور SVG معقدة للغاية، مما يزيد قليلا من حجم الملف. أخيرا، لا ينطبق SVG على الصور، وسوف تكون تنسيقات JPG و WebP مناسبا هنا.

WPP.

على الرغم من حقيقة أن التنسيق ظهر في عام 2010، لن أخطأ إذا قلت أن Webp لا يزال للغاية صيغة جديدةالتي ليست مشهورة جدا مثل JPG و PNG. ومع ذلك، فإن الويب لديه هذا التنسيق في الدم: تم تصميمه خصيصا للإنترنت، مما يجعلها مثيرة للاهتمام للغاية.

WEPP - تنسيق الصورة مع فتح مصدر الرمزوضعت من قبل جوجل. دلائل الميزات: "WEPP - التنسيق الحديث العناصر الموجودة على الإنترنت، وتوفير ضغط ممتاز مع الخسائر، وبدون فقدان الجودة ... إصدار خسارة من صور Webp تزن 26٪ أقل من طراز PNG. نسخة خائفة Webp وزنها 25-34٪ أقل مماثلة jpeg images.... WebP Lossless يدعم الشفافية ... بسبب 22٪ بايت إضافية. في الحالات التي ينطبق فيها ضغط RGB Lossy، يدعم Lossy WebP أيضا الشفافية، وتوفير حجم ملف 3X مقارنة ب PNG. " - موقع الويب

كاز WebP هو أنه يجمع بين مزايا JPG و PNG دون زيادة حجم الملف.

على ال هذه اللحظة دعم التنسيق جيد جدا: دعمت متصفحات وميض التنسيق من الإصدار نفسه، كل نفس WebP - إنشاء جوجلوبعد للتوافق مع المتصفحات دون دعم، I.E. أي / حافة، فايرفوكس وسافراري، جاء الحرفيون الشعبيون مع الحلول.

استنتاج

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

JPG، GIF و PNG هي تنسيقات شائعة جدا تم استخدامها لفترة طويلة جدا. SVG و WebP أحدث، بدائل مثيرة للاهتمام. SVG عظيم للرسوم التوضيحية والصور البسيطة، يستبدل WebP جميع تطبيقات JPG و PNG.

هل استخدمت بالفعل SVG و WebP في التنمية؟ ما الصعوبات التي لديك؟ هل حققت أي مكاسب أداء ملحوظة؟ اكتب في التعليقات!

الحذر، العديد من الصور! جميع النقر.

بي إن جي.

النقطية تنسيق الجرافيك ظهر بابوا نيو غينيا، واكتساب شعبية متزايدة في عصر الويب 2.0، في عام 1995 على أنه استبدال GIF الجيدة القديمة (، وجزئيا، TIFF). بحلول ذلك الوقت، قام أصحاب GIF الحاصلة على براءة اختراع "قررت أن تهدم كميات مكونة من أربعة أرقام من جميع المطورين الذين يستخدمون التنسيق والمجتمع الحر، ولا يترك شيئا ما إلا لتقديم بديل مجاني.

إذن ما هي مزايا التنسيق؟

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

هناك إصدارات من التنسيق: PNG-8 (على غرار GIF - يستخدم ألوان الفهرس) و PNG-24 (أقرب إلى JPEG - لوحة الألوان الكاملة).

نظرا لأن PNG-24 يستخدم لوحة ملونة كاملة، ومقارنتها مع GIF صعبة للغاية. PNG-8 مع لوحة المؤشر هنا أكثر مماثلة. سأقدم لقطات للمقارنة:

تدرب الممارسة (مثل رأي الزملاء) أن صور GIF الصغيرة البسيطة يضغط بشكل أفضل. ولكن عندما يتعلق الأمر بصور كبيرة، لا يزال GIF ما زال وراءه.

بالإضافة إلى ذلك، ميزة أخرى كبيرة إلى حد ما: في الواقع، خلافا للاعتقاد الشعبي، PNG-8 يمكن أيضا استخدام قناة ألفا كاملةمثل PNG-24. فقط لا يدعمه Photoshop، لذلك يوصي سيرجي تشيكوينوك من استوديو LEBEREV باستخدام الألعاب النارية Adobe أكثر مما قررت القيام به (قليلا عن ذلك).

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

بشكل عام، انظر أنفسنا:

محدث. بشكل عام، فإن النتائج تعتمد بشكل كبير على الصورة نفسها: PNG أفضل يضغط على التدرجات والأقسام الرتابة، ولكن بالنسبة للصور، فإن أفضل ضغط يعطي JPEG. على الرغم من أنه، يقولون (من الصعب تصديق ذلك)، في صور كبيرة من PNG ثم يؤدي ذلك - تم التحقق منه للتو في عملية تحويل لقطات إلى المقالة (PNG ضد JPEG-70٪ - مرات الفوز في واحد ونصف ).

الحياة بعد photoshop "أو الضغط على

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

جوجل والتأرجح -. يبلغ البرنامج حوالي 1.5 ميغابايت مع الحد الأدنى لعدد الإعدادات يسمح لك بالقيادة (بما في ذلك الحزمة) ملفات PNG مع ضغط.

على حزمة أيقونة (90 ملفات مع خلفية شفافة دون منفاخ خاص)، كانت المكسب في الحجم في المتوسط \u200b\u200bحوالي 10-15٪. ليس بشكل خاص، بالطبع، مثيرة للإعجاب. ولكن بالنسبة للملفات المذكورة أعلاه، ارتفعت النسبة المئوية للضغط من 10٪ (ملصق كبير دون شفافية) إلى 72٪ (مستطيلات شفافة). لذلك، في محاولة للمحاولة، فإن المزيد من العمل مع الأداة لا يشغل الكثير من الوقت.

بالإضافة إلى PNGOUT، هناك العديد من البرامج ملاحظة مفصلة التي الآن لا تريد أن تفعل:

• Optipng - لا يوجد لديه شل رسوم ويعمل من سطر الأوامروبعد من خلال البيانات التي لم يتم التحقق منها، نسبة ضغط أقل. محدث. لكن مستخدميها يقولون العكس.
• PNGCRUSH - لم يحاول نفسه، يقولون "محاولة تحسين الملف من قبل الجميع الأساليب المتاحة"لكن الشيء الرئيسي ليس" كيف تحاول "، ولكن" كيف يحسن ".
• ومجموعة أخرى من الأدوات المساعدة ببساطة القمامة من الملفات.

أدوبي الألعاب النارية.

بصراحة، أصبحت أدوبي الألعاب النارية اكتشافا حقيقيا بالنسبة لي: PNG-8، PNG-24 و PNG-32 + كومة من الإعدادات!

PNG-24 و PNG-32 لم أفكر في التفاصيل. بقدر ما فهمت، في مصطلحاتهم 32 - مع قناة ألفا، و 24 - بدون. وفقا ل Thite Photoshop Photoshop مع هذه المهمة بشكل أفضل.

لكن PNG-8 كسرت جميع الصور النمطية الخاصة بي (والأكثر الزملاء). الملف النهائي أقل بكثير من GIF "A، وهناك دعم كامل للشفافية بطريقتين: ألفا والشفافية الفهرمة. ناقص فقط مقارنة ب PNG-24 يظل لوحة فهرس، على الرغم من أنه كل هذا يعتمد على الاحتياجات. شخصيتي رأي - PNG-8 في معظم الحالات أو GIF و PNG-24.

PNG ضد GIF في AF، على الرغم من أن الألعاب النارية GIF-JPEG GIF-JPEG المألوفة بشكل افتراضي وليس جدا (لم ألعب مع الإعدادات). ولكن حتى بالمقارنة مع Photoshop، والنتيجة هي الفرق لصالح PNG:

وهنا مجموعة متنوعة كاملة من PNG-8 - لهذا الأمر يستحق تثبيت Adobe Fireworks:

للمقارنة: نفس الملف الذي تبذله جهود فوتوشوب يزن 3،188 بايت مقابل ال 450 المستلمة الآن، أي 6 مرات أكثر.

الحكم

في رأيي، تم بالفعل التحدث GIF. الآن وجودها في المقام الأول مسألة الإملاء في المجتمع. محدث. ومع ذلك، فإن الجزء من الملذات المختلفة الرسوم المتحركة هو في وقت مبكر طالما gif :).

بالنسبة لعناصر التصميم الشفاف، فإن الأمر يستحق استخدام PNG-8 (أقل في كثير من الأحيان PNG-24، عندما تكون لوحات PNG-8 ليست كافية لحفظ الصورة دون خسارة).

للصور والمعقدة عناصر الجرافيك لا يزال الزعيم يبقى JPEG بسبب الميزات القوية لتحسين الصورة. على الرغم من أنه في بعض الحالات قد يكون ذلك كافيا و PNG-8 - كما كان من قبل، مع GIF "أوم، تجارب جريئة - مفتاح النجاح. محدث. ولكن بالنسبة للصور الكبيرة حقا، يفقد JPEG.

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

مرحبا بالجميع على بلوق. بشكل عام، في هذه المقالة، أريد تبديد الأسطورة حول بيانات التوسع الخاصة بالصور، إنها JPG و pNG BEST. منهم لم يتم العثور عليها بعد. كل شيء هو أن كلاهما اعتمادا على استخدام الموقع نفسه قد يؤثر على سرعة الموقع، والتحسين. ما الذي وضعك كثيرا إلى نهاية مسدود؟ ثم قرأت.

تنسيق PNG و JPG في ما الاختلافات.

يبدو أن هذه الصورة وأن هذا هنا، ولكن كل شيء في الألوان. تنسيق JPG الأكثر شيوعا، لأنه مقارنة بالآخرين:

1. يزن أقل (ولكن هذا السؤال مثير للجدل أكثر).
2. من السهل الضغط.
3. ألوان عالية في انتقال.

يكون تنسيق PNG-8 الأكثر شيوعا في مبنى الموقع، لأنه مقارنة بزميلها PNG-24، يكون له اختلاف ضخم في حجم الملف، لذلك يستخدم الثاني نادرا جدا.

الفرق الرئيسي بين الشكلين الذي jpeg هو مستشفى وألوانها لن تمتد لإزالة الإضافية، وبالتالي خفض نطاق الصورة، وهذا jpg لا خلفية شفافة هذا التنسيق لا يدعم ذلك.

تدمير الأساطير.

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

كيفية اختيار تنسيق؟

ابحث على سبيل المثال، دعنا نلتقط صورة لنفترض علمنا الروسي.

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

ولكن ماذا لو أنقذته في بابوا نيو غينيا.

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

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

بالطبع، إذا كانت الصورة متعددة الألوان مع الكثير من الألوان والظلال، فلن تساعد PNG، ثم أنصحك بالاستخدام

• إعادة النظر في جميع الصور الموجودة على المدونة واختر الشكل الذي أفضل JPEG. أو PNG تنطبق على جميع أنواع الصور. حتى أولئك الذين تم ضغطهم بالفعل وتحسينهم، لأنه يمكن قطعهم أكثر، ودون فقدان الجودة.
• عند كتابة مقالات جديدة، قم بتقييم هذه اللحظة، وأنا أعلم أن الوقت سيغادر أكثر، ولكن.
• استخدم برنامج مكافحة الشغب، الذي تم اختباره أعلاه، أو استخدمه لضغط JPG.
• لا تكون كسول لأنه من الضروري للحقيقة.

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

حسنا، ما هو مقالك، وأعتقد أن بعض الأشياء التي فتحتها لك عينيك، والتي لا تعرفها، لذلك تطبيق واستخدامها، حتى الآن، في انتظاركم في التعليقات.