Your website should be fast and lightweight. Google data shows that many of your potential customers are willing to wait about three seconds before they head off to another website.
Why are web-optimized images so important?
One of the best ways to ensure a quick and easy to navigate website is to be sure your site is home to web-optimized images. There are a few things to consider and we try to cut through the complicated details to give you some general guidance on how to improve your sites images in this post.
What are web-optimized images?
There are four main characteristics of images to consider for optimization purposes: file size, resolution, dimensions, and file type. Here’s some basic information on each including why they matter:
File size
When we talk about the file size we’re talking about how much storage space it takes up. Which is the same as answering how much of someone’s data plan this file will eat up every time it is downloaded.
Websites serve up a lot of images – backgrounds, logos, photos, and more. It doesn’t take long for those images to add up to a pretty epically slow load time.
So, here are a few quick rules to help you out on fie size:
For smaller dimensions (under 1024 x 1024) try to stay under 100KB and for larger dimensions (above 1024 x 1024) try to stay under 300KB. These are rough guidelines – sometimes you will have to exceed these guidelines. If most of your images stay under 300KB, the exceptions won’t matter.
Resolution
Resolution is all about dots. A digital image is made up of dots. Resolution expresses how many dots there are per inch.
Photos are most commonly 300dpi which is print quality. Screens do not require print quality so if you’re working on creating web-optimized images, you should choose a lower number. The two common answers are 72dpi or 96 dpi but do not go higher. 72dpi has always been the digital standard but 96 dpi is as alternative that displays better on high-quality mobile screens
Image dimensions
For digital images, dimensions are the width and height expressed in pixels (they are usually expressed in that order, too! So if you see 300 x 150 – it is 300px wide and 150 pixels tall). The dimensions of your image will vary for many reasons, here are some rough guidelines for common uses but your website or social media platforms may require special sizes:
1920 x 1080 pixels
This standard image size is widely seen across high-definition TVs, presentations, and social media cover photos. It follows the 16:9 aspect ratio.
1280 x 720 pixels
This size follows the standard HD format featured in photography and film. It fits the 16:9 aspect ratio.
1080 x 1080 pixels
You’ll see this 1:1 ratio image size used widely across social media, namely Instagram and Facebook posts.
File Type
There are different types of images, the most common is jpg because it generally provides the smallest file size.
- JPEG – the most common and ideal for making small file sizes from photographs and images with lots of detail. Does not support transparency. (Think photos not graphics)
- PNG – another common option with transparency and better than JPG for graphics that include text. (Think icons, logos, and graphics)
- GIF – The old classic was once the gold standard, now it is mostly used for crude animations. It includes transparency support but it isn’t great.
- WEBP – The newest standard from Google this will eventually bring together PNG and JPG and be the preferred format.
How do you optimize images for your website?
This stuff matters and that’s why it is best to hire someone who knowns what they’re doing but sometimes you just have to pull up the old bootstraps and do it yourself.
Use a professional program like Photoshop
If you use Photoshop (you might also consider Adobe Express) you can crop (set the dimensions), export images for screen (reduce file size), select the correct file type (jpg – png – webp), and the resolution is set automatically in most cases!
Use TinyPNG
You can also use a free web-based service to ensure the best file size for your otherwise web-optimized images! We (and most of those who know) love to use TinyPNG to get the best possible file size.
Call the professionals
You don’t have to learn all these details – or worse yet not learn them and lose customers – stick to what you know best and let us do the design and optimization work. We offer affordable, professional website design, SEO, and graphic design services. Book a discovery call or get in touch to talk about your graphic design or web optimization needs today.
