Magento 2 stop (or) avoid resize product image at admin end?

Question

In Magento 2.2.3 CE, Is it possible to get default maximum image dimensions in Magento when uploading images at admin end?

For example,

I uploaded some images to a product that were 2400x2400 and 1800x1800, but they were resized to 1200x1200 on the product page.

I would like to keep the original image sizes because I need higher resolution on some product images to show greater detail.

Magento Admin end while upload:

Answer 1

You can set default image upload size in your Magento Admin images upload system configuration:

Stores→Configuration→Advanced→System→Images Upload Configuration

From there you can set the image upload Maximum Height and Maximum Width

Answer 2

• If we want to achieve we have to override vendor/magento/module-backend/view/adminhtml/web/js/media-uploader.js from our custom module.

• Create a module for example: Kensium_Uploadimage.

• Create requirejs-config.js app/code/Kensium/Uploadimage/view/adminhtml/requirejs-config.js & override media-uploader.js following below

   /**
   *
   * Copyright © Magento, Inc. All rights reserved.
   * See COPYING.txt for license details.
   */
  
   var config = {
    "map": {
        "*": {
          "Magento_Backend/js/media-uploader": "Kensium_Uploadimage/js/media-uploader"
        }
      } 
  } 
  

• Create media-uploader.js in the following path app/code/Kensium/Uploadimage/view/adminhtml/web/js/media-uploader.js

   /**
   *
   * Copyright © Magento, Inc. All rights reserved.
   * See COPYING.txt for license details.
   */
   /**
   * @api
  */
  
  /*global byteConvert*/
  
  
   define([
      'jquery',
      'mage/template',
      'Magento_Ui/js/modal/alert',
       'mage/translate',
      'jquery/file-uploader'
     ], function ($, mageTemplate, alert) {
     'use strict';
  
     $.widget('mage.mediaUploader', {
  
      /**
       *
       * @private
       */
      _create: function () {
          var
              self = this,
              progressTmpl = mageTemplate('[data-template="uploader"]');
  
          this.element.find('input[type=file]').fileupload({
              dataType: 'json',
              formData: {
                  'form_key': window.FORM_KEY
              },
              dropZone: '[data-tab-panel=image-management]',
              sequentialUploads: true,
              acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
              maxFileSize: this.options.maxFileSize,
  
              /**
               * @param {Object} e
               * @param {Object} data
               */
              add: function (e, data) {
                  var
                      fileSize,
                      tmpl;
  
                  $.each(data.files, function (index, file) {
                      fileSize = typeof file.size == 'undefined' ?
                          $.mage.__('We could not detect a size.') :
                          byteConvert(file.size);
  
                      data.fileId = Math.random().toString(33).substr(2, 18);
  
                      tmpl = progressTmpl({
                          data: {
                              name: file.name,
                              size: fileSize,
                              id: data.fileId
                          }
                      });
  
                      $(tmpl).appendTo(self.element);
                  });
  
                  $(this).fileupload('process', data).done(function () {
                      data.submit();
                  });
              },
  
              /**
               * @param {Object} e
               * @param {Object} data
               */
              done: function (e, data) {
                  if (data.result && !data.result.error) {
                      self.element.trigger('addItem', data.result);
                  } else {
                      alert({
                          content: $.mage.__('We don\'t recognize or support this file extension type.')
                      });
                  }
                  self.element.find('#' + data.fileId).remove();
              },
  
              /**
               * @param {Object} e
               * @param {Object} data
               */
              progress: function (e, data) {
                  var progress = parseInt(data.loaded / data.total * 100, 10),
                      progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
  
                  self.element.find(progressSelector).css('width', progress + '%');
              },
  
              /**
               * @param {Object} e
               * @param {Object} data
               */
              fail: function (e, data) {
                  var progressSelector = '#' + data.fileId;
  
                  self.element.find(progressSelector).removeClass('upload-progress').addClass('upload-failure')
                      .delay(2000)
                      .hide('highlight')
                      .remove();
              }
          });
  
          this.element.find('input[type=file]').fileupload('option', {
              process: [{
                  action: 'load',
                  fileTypes: /^image\/(gif|jpeg|png)$/
              },  {
                  action: 'save'
              }]
          });
      }
  });
  
  return $.mage.mediaUploader;
   });
  

• only difference is below code removed from custom module.

   {
   action: 'resize',
   maxWidth: this.options.maxWidth,
   maxHeight: this.options.maxHeight
  }
  

• One more important note is Magento 2.3.1 Release Notes this issue seems to be addressed.

  You can now upload PDP images larger than 1920 x 1200 without compressing and downsizing the images first. Previously, when a merchant uploaded a high quality product image (larger than 1920X1200), Magento resized and compressed the image. Merchants can now set requirements for resizing and compression as well as compression quality and target width and height.