President Obama Pixelated Picture Example

Pictured Above: President Obama, Stages of Pixelation

Learn how to fix pixelated pictures in this helpful tutorial. Also learn why images become pixelated on your website, and how to avoid this in the future.

What is a Pixel?

Digital images are made up of pixels. These pixels are individual “picture elements” that make up a graphical image or photograph in digital format. The size of a pixel depends on the resolution of the output display. In digital photography, the sensor of a DSLR determines the pixel size and resolution of the captured photo image. The more pixels displayed on screen, the higher the resolution of that device (think TV, monitor, smartphones).

How to Fix a Pixelated Image

There is no real way to fix pixelated photographs, as the original image data is distorted, but you can smooth over the blockiness of your image to lessen the effects of pixilation. Learn how to fix pixelated pictures by following the steps below.

Fix Pixelated Pictures with Photoshop

  1. Open the image in Photoshop
  2. Open the Layers panel (If the layers panel is not visible, navigate to Window > Layers to display the panel)
  3. Select the image layer you wish to fix
  4. Open Filter > Blur > Gaussian Blur
  5. Use the slider to change the blur pixel radius to the desired level (note that you’re just attempting to soften the blockiness of the pixelated image here)
  6. Select OK
  7. Open Filter > Sharpen > Unsharp Mask
  8. Use the slider to change the Amount of sharpness, pixel radius of the sharpening, and the threshold level. (keep in mind you just want to crisp up the image, don’t over sharpen or the image will look pixelated again)
  9. Select OK
  10. Save the image

Fix Pixelated Pictures with Free Online Tools

If you do not have access to Photoshop, there are some alternative free photo editors on the web. One of these is Pixenate.com, which can help to fix pixelated photos through a smoothing effect. Try it with your image following these steps:

  1. Upload your photo to Pixenate.com
  2. Select “Smooth Photo” from the left navigation menu
  3. This may be repeated several times to soften the image
  4. Select “Save to Disk” once complete

Adjusting JPEG Output Size from your Digital Camera

Canon Digital Camera JPEG Size

Adjustable Image Quality Settings on a Canon Digital Camera

If the methods of how to fix pixelated pictures did not accomplish what you intended, then try to source a new image that is higher resolution. If you took the photograph yourself, review your camera settings to ensure you are photographing at a suitable size. Most digital cameras have varying size of JPEG output; small, medium, large, extra large, etc. Adjust to the highest quality setting if you are able, as you can always downsize and compress the image later. As a general rule, start with the largest image size you can and scale down from there in post processing (or editing), as it is very hard to scale up images without pixelation.

Why are the images pixelated on my website?

Pixelated images on a website may be cause from a variety of reasons such as:

Low quality image uploads

When you upload a low-resolution photo to a website, it may appear pixelated, especially if you are viewing the website on a high-resolution monitor. It is important to ensure you are uploading a high enough resolution image to your website so it doesn’t get pixelated, but not too high of resolution that the file is too large and not optimized for web viewing, resulting in a slow loading website.

Over compression of the images on upload

Some website uploader tools will compress files when uploading. This is to make the files load faster on your website, and to cut the upload time and required bandwidth down. To minimize the impact of this, check your content upload tool’s settings to see if there is image compression turned on by default.

Image compression plugins on the website

Image compression plugins have become very popular in recent years, especially on the WordPress platform. The best image compression plugins for WordPress are:

  1. TinyJPG (TinyPNG) – https://tinyjpg.com/
  2. reSmush.it – https://resmush.it/
  3. EWWW Image Optimizer – https://ewww.io/
  4. WP Smush – https://wordpress.org/plugins/wp-smushit/
  5. ShortPixel Image Optimizer – https://shortpixel.com/

These plugins are great, but can sometimes overoptimize an image, causing pixilation. If you are properly compressing your images for web before uploading to your website, then an image optimization plugin like these is most likely causing more harm than help. However, if your images are not compressed before uploading, then these plugins can work wonders for your website speed and performance!

I have used all of the 5 most popular image compression plugins listed above. My personal favorite is TinyJPG / TinyPNG. You can either upload and compress an image directly from their website or install the WordPress plugin to your website. There is a limit to the compression you can do – otherwise a reasonably priced paid model is available where you can purchase credits to bulk compress images. If you’re running Magento they also have an extension available for that platform.

Poor Quality Web Hosting

If you find your images are taking too long to load on your website, and you need to compress to the point of pixelation to get descent load times, then it’s time for a new web hosting company. The top web hosts have been compared in a head to head performance test, revealing the fastest web hosts of 2019. If you’re a photographer, freelancer, artist, or creative, then you’ll want to check out this list of best website hosting for photographers. Today’s websites are often very image heavy, with larger and larger image sizes and resolutions necessary for crisp display across HD and retina screens. Make sure you are compressing your images for optimal web resolution, but do not make the mistake of overcompressing. Also, make sure to have a fast web host so you can display your non-pixelated images to your website visitors with quick load times.

Bugs Bunny Pixelated Image

Pictured Above: Pixelated Bugs Bunny Example
Original Quality (Left) > Some PIxelation (Center) > Extreme Pixelation (Right)
(Click to Enlarge)