Have you ever looked at a website on your phone? If so, maybe you noticed that its images appeared fuzzy and pixelated. It’s not your imagination, and it’s not the result of poor image resizing. Newer devices use an image display of about 300 pixels per square inch, or twice the pixel density of the original iPhone display.
To avoid sharing fuzzy, low-quality site photos, make sure to use Retina-quality images.
What does Retina mean?
According to Macworld, Retina is a term coined by Apple for the image-display technology developed for its newer iPhones, iPads, MacBooks, iMacs, and other devices. Because Retina offers a higher pixel density than traditional displays, images and text appear extra crisp (unless a website doesn’t use Retina-quality images).
It’s important to note that while Apple trademarked the term “Retina,” high-resolution displays are becoming the norm among high-end electronics — which is why it’s important to use them on your website.
How to create Retina-quality images
So, how do you optimize images for Retina display?
The easiest way is to double your image sizes. That is, if your website’s header image is 800 x 400 pixels, create an image that is 1600 x 800 pixels in size.
However, because you don’t want visitors waiting a week for large images to load, you’ll want to reduce the image file sizes (without decreasing the image size or quality) by using image-optimization software.
Photoshop offers easy image optimization tools; but not everyone has experience using Photoshop, or has access to it. Luckily, there are multiple free image optimization tools available (such as ImageOptim) which quickly compress your photos and graphics.
By using images that are optimized for Retina display, your website or blog will look beautiful, crisp, and professional across nearly every screen.
ABOUT THE AUTHOR
Go WordPress 