Skip links

What Pixelation Says About Your Website

Imagine if Leonardo da Vinci was still alive and used the image below (and to the right) as a representation of the Mona Lisa on his website?! I think we can all agree that wed be a little let down by Leos attention to detail and the representation of his work, especially if we had already seen the real thing in person or a better digital file (like the one on the left). 

Museum visitor photo of the Mona Lisa painting surrounded by people.    High resolution image of the Mona Lisa painted by Leonardo DaVinci.

Source: Quantum Diaries

We believe that your website is a representation of you, your business, and your products, and every decision you make about design, color, and layout reflects that. With that in mind, your websites images and logos should never be pixelated. The exception to that is if you purposefully pixelate your work, as some artists choose to do.

Since the rest of us arent creating pixelated artwork, we find it pretty logical to display our business logos, products, and services as close to the real thing as possible. Crisp, clean, detailed, and jaw-droopingly beautiful images are what people seek. Plus, if your products or services have those qualities, make sure you show it every chance you get. Otherwise, youll leave viewers unsure about your work ethic, technology, modern practices, quality of service, and quality of product. With more and more people using the internet and websites to make decisions on what to buy, where to eat, and who to hire, its important to leave no room for them to second guess what you can do for them. In the world of online sales and marketing, you often have to judge the book by its cover,so make sure your cover (your websites images and logos) arent pixelated.

Weve covered that any pixelation is too much pixelation, but how should you go about dealing with your pixelated logo and images? A high resolution camera, Adobe Photoshop, and Adobe Illustrator can do most of the heavy lifting, but it takes some experience and knowledge, so if youre crunched for time and money, hire someone with the equipment and programs to help.

Optimizing Images for Websites:

What youll need:

  • Original, high resolution image files for existing images, or
  • A high resolution digital camera to take new photos.
  • Adobe Photoshop (or another photo editing program) to survey and edit image sizes.

Tip 1: Image resolution has nothing to do with how your image displays on a screen or website…

…but has everything to do with how it looks when printed. For your website, focus on pixel dimensions and screen resolution, rather than image resolution, pixels per inch (PPI), and dots per inch (DPI). Sites with larger images and images with detail should try to use the largest possible pixel dimensions. Check out the following resources on resizing and optimizing images for websites:

Tip 2: Start with large image files.

Shoot images in RAW format or large JPG files. Save any edited images as TIFF files so they wont lose any image data. Any resizing of pixel dimensions should be saved as a separate file name so that the original and larger file can remain intact for other use. You want large files because you cant really increase pixel dimensions and resolutions without gaining pixelation. So, if your image comes straight from your camera (or files) with 960 pixels for the width, you shouldnt increase it further because it could distort your image by increasing the individual pixel beyond its maximum size.

Logo Optimization for Websites:

What youll need:

  • Your logo or design.
  • Adobe Illustrator.

Tip 1: Illustrator allows you to create vector-based images that can be scaled to any size without using quality…

…so youll want to use Adobe Illustrator to create or update your logo. Photoshop doesnt work well for logos and text because it creates rastor-based images, which are ultimately still pixelated at larger sizes. Check out the following resources: