วิธีเพิ่มคุณภาพของรูปถ่ายผลิตภัณฑ์ JPG (Magento 2)


18

การบีบอัด JPG บน Magento 2 นั้นแข็งแกร่งมากดังนั้นคุณภาพของรูปผลิตภัณฑ์จะแย่มากในมุมมองแคตตาล็อกและผลิตภัณฑ์ ฉันจะเปลี่ยนการบีบอัดภาพสำหรับ JPG ใน Magento 2 ได้อย่างไร

คำตอบ:


15

วิธีนี้ใช้ได้ผลสำหรับฉัน:

ไฟล์: {Vendor} / {Module} /etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Model\Product\Image" type="{Vendor}\{Module}\Model\Product\Image" />
</config>

ไฟล์: {ผู้ขาย} / {โมดูล} / รุ่น / ผลิตภัณฑ์คุณสามารถตั้งค่าคุณภาพเป็นสิ่งที่คุณต้องการ จากนั้นล้างแคชภาพ

namespace {Vendor}\{Module}\Model\Product;

class Image extends \Magento\Catalog\Model\Product\Image {

    protected function _construct() {
        $this->_quality = 100;

        parent::_construct();
    }
}

พา ธ ที่จะวางไฟล์นี้ในธีมที่คุณกำหนดคืออะไร? ฉันไม่สามารถหาโครงสร้างการจัดเก็บ M2s ได้ M1 นั้นง่ายกว่าเยอะมาก
styzzz

ในแอป / รหัส / {ผู้ขาย} / {โมดูล}
Papamike

แต่จะไม่ถูกเขียนทับในระหว่างการอัพเกรด? ฉันคิดว่าคุณจะต้องใส่มันในชุดรูปแบบของคุณ ไม่ได้หรือไม่
styzzz

1
ไม่โฟลเดอร์ {Vendor} จะต้องถูกแทนที่โดยคุณเนมสเปซ (อาจเป็นรูปแบบตามตัวอย่าง) มันจะไม่ถูกแทนที่ ตัวอย่าง: / app / code / styzzz / ImageCompression / ...
Papamike

หากคุณมีภาพ PNG สำหรับผลิตภัณฑ์ระดับการบีบอัดจะฮาร์ดโค้ดในอะแดปเตอร์ GD2: vendor/magento/framework/Image/Adapter/Gd2.php:167ถึง 9 (สูงสุด)
Franck Garnier

5

สำหรับ Magento 2.3.2 เป็นไปได้ที่จะกำหนดคุณภาพของภาพโดยไม่ต้องเปลี่ยนรหัส:

ร้านค้า> การกำหนดค่า> ขั้นสูง> ระบบ> การอัปโหลดรูปภาพการกำหนดค่า> คุณภาพ> 100

เส้นทางการกำหนดค่า XML คือ:

system/upload_configuration/jpeg_quality

สิ่งนี้ไม่ได้ให้คำตอบสำหรับคำถาม เมื่อคุณมีเพียงพอชื่อเสียงคุณจะสามารถที่จะแสดงความคิดเห็นในโพสต์ใด ๆ ; แทนที่จะให้คำตอบที่ไม่จำเป็นต้องชี้แจงจากผู้ถาม - จากรีวิว
อึ๊ง

1
"ฉันจะเปลี่ยนการบีบอัดรูปภาพสำหรับ JPG ใน Magento 2 ได้อย่างไร" ... นี่ไม่ใช่คำถามเหรอ
K Vij

ดีกว่าคำตอบอื่น ๆ โดยไม่ต้องเปลี่ยนรหัส
Barry

2

ภายใน - ผู้ขาย / magento / โมดูลแคตตาล็อก / ผู้ช่วย / Image.php

คุณจะพบทั่วไป:

public function setQuality($quality)
{
    $this->_getModel()->setQuality($quality);
    return $this;  
}

หากคุณ grep สำหรับการใช้งานคุณจะพบวิธีการที่มีชื่อเดียวกันใน:

วีโอไอพี / โมดูลแคตตาล็อก / รุ่น / สินค้า / Image.php

และภายในไฟล์นั้น:

/**
 * Default quality value (for JPEG images only).
 *
 * @var int
 */         
protected $_quality = 80;

เป็นค่านี้ - ที่ต้องมีการตั้งค่าเป็น 95

สิ่งนี้จะลดการบีบอัดและสิ่งประดิษฐ์ในไซต์

พวกคุณจะถือว่าฉันต้องทำการปรับเปลี่ยนนี้ด้วยการแทนที่รหัสที่เหมาะสมที่ปรับใช้ - นั่นไม่ใช่โดยการแก้ไขไฟล์หลักนี้ ฉันไม่ได้เป็นนักพัฒนาวีโอไอพีมิฉะนั้นฉันจะมีรอยแตก ....


3
ที่จริงแล้วการเปลี่ยนแปลงค่าใด ๆ ในแกน (ผู้ขาย) จะถูกเขียนทับด้วยการปรับปรุงต่อไปดังนั้นการเปลี่ยนไฟล์หลักคือโดยทั่วไปความคิดที่ดี
มาร์เซล HAURI

2

คำตอบที่นี่ค่อนข้างผิด IMO ไม่ใช่คุณภาพที่คุณควรเปลี่ยนด้วยตัวเอง แต่เป็นขนาดของภาพ ทำไม?

สิ่งที่ดีคือเมื่อทำการบีบอัดภาพเพื่อให้ได้ขนาดไฟล์ที่เล็กที่สุดเท่าที่จะเป็นไปได้อัตราการบีบอัดจะเป็นประโยชน์มากที่สุดในการบรรลุเป้าหมายนั้น ส่วนที่สองคือขนาดของภาพ นอกจากนี้คุณควรบีบอัดอิมเมจต้นฉบับดั้งเดิมก่อนที่จะลดขนาด (ฉันไม่ได้ตรวจสอบว่าวีโอไอพีจัดการกับเรื่องนี้อย่างไร) เพื่อลดขนาดไฟล์ให้มากที่สุดเท่าที่จะเป็นไปได้ในขณะที่ยังคงรักษารายละเอียดไว้

บนหน้าจอเรตินาคุณต้องมีขนาดที่แสดงเป็น 2 เท่า ดังนั้นเพื่อให้ได้ภาพที่คมชัดที่แสดงที่ 250x250 พิกเซลจากนั้นภาพจะต้องมีขนาด 500x500 พิกเซล

ดังนั้นฉันจะเริ่มด้วยการเปลี่ยนธีมview.xmlเพื่อเพิ่มขนาดที่แสดง หากภาพยังดูไม่ดีฉันจะลองพิจารณาตั้งค่าคุณภาพ หากคุณมีเวลาคุณสามารถใช้รูปภาพที่ตอบสนองได้เช่นกัน (ขนาดที่เพิ่มขึ้นสองเท่าจะถูกโหลดบนอุปกรณ์หน้าจอเรตินาเท่านั้น )

คุณสามารถลดขนาดข้อมูลลงได้โดยลบข้อมูลเมตาทั้งหมดออกจากภาพไม่แน่ใจว่าวีโอไอพีจะทำตามค่าเริ่มต้นหรือไม่ มักเป็นส่วนหนึ่งของบริการบีบอัดภาพที่ดี


1
ขอบคุณที่อธิบายเพื่อนนี้! ฉันรู้ว่ามันจะต้องมีเหตุผลที่สมเหตุสมผลสำหรับภาพลักษณ์ของโรงถ่ายวีโอไอพี! ฉันยังคงสับสนเล็กน้อยเกี่ยวกับการนำไปใช้ ดังนั้นสมมติว่าผลิตภัณฑ์ของฉันแสดงบนหน้าผลิตภัณฑ์เป็นสี่เหลี่ยมจตุรัส 700px จากนั้นฉันจะต้องสร้างรูปภาพที่มีขนาด 1400px square จากนั้นเปลี่ยนการตั้งค่าที่สอดคล้องกันในไฟล์ view.xml เป็น 1400px เช่นกัน ฉันได้เล่นกับสิ่งนี้รวมถึงการแทนที่ที่กล่าวถึงในคำตอบอื่น ๆ แต่คุณภาพต่ำกว่าเสมอในหน้าผลิตภัณฑ์กว่าเมื่อฉันคลิกที่ภาพเพื่อเข้าสู่มุมมอง 'ซูม'
Joshua Flood

@JoshuaFlood ฉันคิดว่าภาพที่ซูมนั้นมีรายการเป็นของตัวเองใน view.xml ที่มีขนาดใหญ่ขึ้นจำไม่ได้ว่ามีขนาดสำคัญหรือขนาดเท่าไร
OZZIE

ไม่ต้องกังวลฉันจะจัดเรียง ขอบคุณสำหรับทิป! ไม่แน่ใจว่ามันทำอะไร แต่ฉันลืมที่จะแทนที่ภาพ 'เล็ก' ด้วยภาพสองเท่าดังนั้นปัญหาอาจเกิดขึ้นที่นั่น
Joshua Flood

นี่ไม่ใช่คำตอบที่ดี สิ่งที่คุณควรทำคือใช้อิมเมจที่ตอบสนองและแอตทริบิวต์ srcset - ไม่เพียง แต่ให้ภาพขนาดใหญ่โดยทั่วไปซึ่งจะลดขนาดเมื่อใดก็ตามที่จำเป็น
fritzmg

@fritzmg "มือแรก" "ถ้าคุณมีเวลาคุณสามารถใช้รูปภาพที่ตอบสนองได้เช่นกัน" .. ส่วนไหนที่คุณเข้าใจยาก?
OZZIE
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.