One of the primary ways you can improve Search Engine Optimization for your website is by optimizing your images for the web. Our Art Director, Don, explains best practices for image optimization on your website, including information on screen resolution, different file types, and tools for optimization.
Which Image Formats Should I Use?
If you are still using .jpg and .png files, you aren't alone. Those are certainly still the most common image file types on the web. They can be reduced enough to be considered well-optimized but can sometimes look pixelated if they are too optimized.
For the best results when optimizing .jpg and .png files, we've tested several tools and have found TinyPNG.com does the best job.
Currently, the best image formats for your website will be .webp and .svg, which we'll cover in more detail.
What is .webp? How and when do I use it?
The most common formats for images on the web are .jpg or .png, which, when compressed, can be pretty minimal in terms of file size. Google has created a new format referred to as WebP that is about ⅓ smaller than previous options and is supported in all major browsers. Any website photos should be uploaded using the .webp format.
What is .svg? How and when do I use it?
SVG stands for Scalable Vector Graphic. A vector graphic is convenient because it can be scaled up or down in size without losing image quality. Basically, anything graphical that isn’t a photo could potentially be created as an svg.
How do I figure out what size my images should be?
Dimensions will vary from site to site depending on the design and where the images are used. Aside from figuring out an image’s dimensions, understanding resolution and pixel density will be the most important concepts to understand.
Resolution refers to how many pixels can be shown on a screen, and Pixel Density refers to the screen's physical size. If, for example, a device has a small screen size (iPhone SE, for example) but has a higher resolution, it has a high pixel density because it shows more pixels in less physical space.
Sometimes images for the web are set to what is referred to as 1x or 2x. This refers to pixel density. Web images are set to a resolution of 72ppi (pixels per inch), but depending on the screen it is viewed on, there may be more pixels stuffed into a square inch. A 1x image will show 72 pixels per square inch of screen, whereas a 2x image will show twice as many pixels, or 144 pixels, within that same square inch of screen. The more tightly packed pixels are within the available screen space, the sharper and more detailed the image will look.
It is possible to save an image in several different sizes and resolutions and have your website serve up the right one based on screen size, this is referred to as image source set, or srcset, but then we start to deviate into a much longer conversation about mobile responsive design.
Bottom Line
If you glazed over all that fun stuff above, your best bet is to save your images off at 72ppi and 2x if you want a single image that will cover all the bases. You can also bookmark our knowledge base article on image optimization for the most up-to-date information on this topic.
Written by Don Elliott
Don holds a degree in Multimedia and Web Design from the Art Institute of Seattle and has worked in web design for nearly two decades. He is also an award-winning illustrator.
