Image quality guidelines

1. 0

   promisemposted 6 years ago

   I'm finding that image quality has declined recently whether the images are jpgs or pngs. The problem is bigger for graphics than photos. They are very blurry on HP but look sharp on desktop. The size of the image doesn't matter.
   
   What do you do to get the best quality for your uploads? Do any of you have a recent example of an uploaded graphic that looks good?

   replyreport
2. 91

   Jeremy Gillposted 6 years ago

   "The problem is bigger for graphics than photos."
   
   What is the difference?

   replyreport
   1. 0

      promisemposted 6 years agoin reply to this

      Thanks for asking. The quality of graphics seems to decline more than the quality of photos. I believe the difference is that my graphics often have words and numbers in them, which is where I notice the decline the most.
      
      But photos also decline. For one Hub, the editor reduced the size of several photos to half width because he/she said they were blurry. But they weren't blurry on my desktop.

      replyreport
      1. 91

         Jeremy Gillposted 6 years agoin reply to this

         Ah, you mean graphics like charts and tables. Hmm, I'm pretty sure you're already aware of the recommended pixel dimensions, and based on the Hub of yous I hopped, your horizontal to vertical ratio also looks good.
         
         To be honest, I'm not sure what would cause a blurriness issue other than stretching or pixel limits. You're using jpegs or png files, correct? Maybe you could upload one to another site and see how it looks there.
         
         I'm also surprised editors are bothering to change photos to half-width; aren't we about to get rid of those?
         
         But to answer your original question, I never have issues with image uploading quality as long as the dimensions are big enough. A quick cropping in Paint can also help trim to a desired ratio as well.

         replyreport
         1. 0

            promisemposted 6 years agoin reply to this

            Yes, I use both jpegs and png files. I have tried uploading both and get similar results. Thanks for the feedback.

            replyreport
3. 97

   eugbugposted 6 years ago

   I always make my graphics 1024 pixels wide because that's the maximum number of pixels that will be displayed when an image is fully zoomed (on desktop/anyway. Maybe it's different depending on device or screen resolution). If you use images less than 520 pixels wide, they'll get upscaled to 520 pixels and look fuzzy. If you're using text on images, make sure to use anti-aliasing so that the edges of fonts are feathered and blended into the image and don't look jagged. I draw all my graphics using vector objects (text also), then save the image as a JPG while keeping the original vector graphic. The vector image (which can have raster, i.e. bitmapped layers) can easily be changed later if for example the colour of something needs to be altered or an object has to be re-scaled. The stroke (outline) and fill of text characters can be changed on probably most good drawing applications, so you could experiment with this. I use an Arial font on images, either bold or non bold.  I don't know whether it's the standard or best font to use for graphics, but have a look at the image below and see what you think.
   This image is actually maintained at 1024 pixels wide because there are no ads to the right, unlike images in hubs that are 520 wide. I find that when I download an image from a page after uploading it, the file size is actually smaller even though the resolution is maintained, so there is presumably a degree of compression applied to images when they are published. The other thing is that because images are only 520 pixels wide, very small text in tables can look pixelated/blurred unless you zoom in.
   

   replyreport
   1. 0

      promisemposted 6 years agoin reply to this

      Hi, Eugbug. That's great information. I normally use Arial as well and often post images at 1200 wide.
      
      Maybe I am being too picky, but I think your 24 bold example has much less clarity than the body text above it. The clarity seems to decline quite a bit from 48 down to 24. It highlights why my 18 pt. graphics text looks so vague.

      replyreport
4. 97

   eugbugposted 6 years ago

   These two links may be of use. I need to read them myself to get a full grasp of the details. Also I've made another image with 16 and 18 point text.
   
   http://www.creativebloq.com/graphic-des … n-71515673
   https://en.wikipedia.org/wiki/Point_(typography)
   
   
   
   
   I notice the fuzziness in the image. I was incorrect about images being displayed at 1024 pixels wide. When saved the image above is 1024 pixels, but not displayed at that resolution so maybe it's the resizing/resampling that's causing this? Or is it due to the original anti-aliasing? (Any DTP experts out there?!)

   replyreport
   1. 0

      promisemposted 6 years agoin reply to this

      I also wonder if HP is running a resampling process when we upload images. Although they post guidelines about image rights, I think it would help if they also post guidelines about image processing.

      replyreport
      1. 97

         eugbugposted 6 years agoin reply to this

         I did a test with a 156k, 520 x 520 image. I uploaded it and then then downloaded and the image was reduced in size to 68k. Opening and resaving a JPG image on your computer (even if you don't make any changes) will cause a loss of quality assuming you maintain the same compression factor. The file keeps I don't know why this is because presumably the same compression algorithm is executed, so it shouldn't produce different results on unchanged data. Anyway presumably the photo has to be opened on HubPages and rescaled. Because I set the image to 520 x 520 no change was needed, so the filesize of this specific image was over halved, but the degree of filesize reduction depends on the the nature of the patterns in the image. I don't know whether this compression is by design to reduce the amount of data on servers and download time, or just a by product of opening and saving the image if the compression factor is not set very low.

         replyreport
5. 97

   eugbugposted 6 years ago

   Another tip.
   When you save a JPG, use the lowest compression factor (the setting may be an options in the save dialogue). The image may look ok on your screen, but if you save it with high compression it may have reduced in quality and look less impressive when uploaded and viewed on HubPages. You can check this by reloading an image you've just saved and see if it has degraded.

   replyreport