title: RoR ImageMagick/Paperclip --- Why is the image quality reduced when resized?
body: <p>I'm having issues with ImageMagick resizing the image, and making it blurry/fuzzy. Here is the original image:</p>
  
  <p><a href="https://i.stack.imgur.com/EbAbc.png" rel="nofollow noreferrer">link to original image</a></p>
  
  <p>But here is what it is looking like when resized:</p>
  
  <p><a href="https://s3-us-west-2.amazonaws.com/lexody/app/public/translations/images/23/Once_you_find_someone_to_meet_with.png?1499357259" rel="nofollow noreferrer">https://s3-us-west-2.amazonaws.com/lexody/app/public/translations/images/23/Once_you_find_someone_to_meet_with.png?1499357259</a></p>
  
  <p>QUESTION: Why is the quality changing when resized?</p>
  
  <p>I have a table called Translations that includes a text and an image. A user uploads the image with this form:</p>
  
  <pre><code>  &lt;div class="field"&gt;
      &lt;%= f.label "English Text (to be translated in target language)" %&gt;
      &lt;%= f.text_field :english_text %&gt;
      &lt;h1&gt;Upload Image&lt;/h1&gt;
      &lt;%= f.label :image %&gt;
      &lt;%= f.file_field :image %&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I am using ImageMagick to resize the images:</p>
  
  <pre><code>class Translation &lt; ApplicationRecord
  
  if Rails.env.production?
    .....
  else
      has_attached_file :image, :source_file_options =&gt; { :all =&gt; '-auto-orient' }, :styles =&gt; {
                      thumb: '100x100&gt;',
                      square: '200x200&gt;',
                      medium: '300x300&gt;'
                    }
  
  end
  validates_attachment :image,
                   content_type: { content_type: ["image/jpeg", "image/gif", "image/png"] }
  end
  </code></pre>
  
  <p>Displaying the image...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="translation_img_and_instructions"&gt;
      &lt;% if session[:@trans_sample].image.url != "/images/original/missing.png" %&gt;
          &lt;%= image_tag session[:@trans_sample].image.url(:square), class: "translation_img" %&gt;
      &lt;% end %&gt;
      &lt;h1&gt;Translate into &lt;%= @sessionLang["language"] %&gt;:&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).on('click', '.translation_img', function() {
  var thumbUrl = $(this).attr('src');
  //console.log(this)
  var origUrl = thumbUrl.replace('square', 'original');
  
  if (thumbUrl.indexOf('missing') &gt; -1) {
      origUrl = '/assets/medium/missing.png';
  }
  
  console.log(origUrl);
  
  var thumbPosition = $(this).offset();
  
  $('body').append('&lt;div class="closeBigPic"&gt;&lt;/div&gt;&lt;div class="bigPicWrapper translationImg"&gt;&lt;img class="bigPic" src="' + origUrl + '" /&gt;&lt;/div&gt;')
  
  $('.bigPicWrapper')
      .css('top', thumbPosition.top)
      .css('left', thumbPosition.left);
  $('.bigPicWrapper').animate({
      top: '35%',
      left: '35%',
      height: 500,
      width: 500,
      marginTop: -100,
      marginLeft: -100
  }, 300); 
  </code></pre>
  
  <p>});</p>
  
  <p>When the image is uploaded and resized, the quality is significantly reduced..</p>