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 we’d be a little let down by Leo’s 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).
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 website’s 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 aren’t 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, you’ll 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, it’s 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 website’s images and logos) aren’t pixelated.
We’ve 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 you’re crunched for time and money, hire someone with the equipment and programs to help.
Optimizing Images for Websites:
What you’ll 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:
- How to Resize Images in Photoshop
- Photoshop Help: Image Size and Resolution
- The 72 PPI Web Resolution Myth
- Image Resolution, Pixel Dimensions, and Document Size in Photoshop
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 won’t 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 can’t 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 shouldn’t increase it further because it could distort your image by increasing the individual pixel beyond its maximum size.
Logo Optimization for Websites:
What you’ll 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 you’ll want to use Adobe Illustrator to create or update your logo. Photoshop doesn’t 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: