---
title: How to Optimize Your Images for the Web
description: Which image type should you use? What size is best for the web? Our Art Director explains the best image optimization techniques here.
image: https://www.tributemedia.com/hubfs/optimize-images-web.jpg
---
[Contact](https://www.tributemedia.com/contact)
[Blog](https://www.tributemedia.com/blog)
[Support](https://www.tributemedia.com/blog/how-to-optimize-your-images-for-the-web#)
## Hi!
How Can We Help?
[General Inquiries](https://www.tributemedia.com/contact)
[All Things Support](https://www.tributemedia.com/support)
[ Give Us A Call](tel:12084890123)
# How to Optimize Your Images for the Web
[](http://www.facebook.com/share.php?u=https%3A%2F%2Fwww.tributemedia.com%2Fblog%2Fhow-to-optimize-your-images-for-the-web%3Futm_medium%3Dsocial%26utm_source%3Dfacebook)
[](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.tributemedia.com%2Fblog%2Fhow-to-optimize-your-images-for-the-web%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin)
[](https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fwww.tributemedia.com%2Fblog%2Fhow-to-optimize-your-images-for-the-web%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=https%3A%2F%2Fwww.tributemedia.com%2Fblog%2Fhow-to-optimize-your-images-for-the-web%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=How%20to%20Optimize%20Your%20Images%20for%20the%20Web)
** Posted by [Don Elliott](https://www.tributemedia.com/blog/author/don-elliott) on Feb 20, 2023 8:45:00 AM
One of the primary ways you can improve [Search Engine Optimization](https://www.tributemedia.com/search-engine-optimization-seo) 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](https://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](https://www.adobe.com/creativecloud/file-types/image/raster/webp-file.html) 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](https://blog.hubspot.com/website/what-is-an-svg-file) 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](https://www.danrodney.com/blog/retina-web-graphics-explained-1x-versus-2x-low-res-versus-hi-res/). 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](https://www.tributemedia.com/self-serve-support/optimize-images-seo) for the most up-to-date information on this topic.
[](https://cta-redirect.hubspot.com/cta/redirect/481308/44600417-8cd7-4bf2-b861-2004d2534452)
#### Written by [Don Elliott](https://www.tributemedia.com/blog/author/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.
[Top * *](https://www.tributemedia.com/blog/how-to-optimize-your-images-for-the-web#top)
## We Have Ideas To Grow Your Business
There's no doubt you have many choices when it comes to web design and web marketing services. Your middle schooler probably knows his way around CSS and HTML and every college kid is a blogger. The problem is, a site that looks hot but doesn't have well-thought out strategy, is like a certain reality show family we can't name for legal reasons: pretty, but worthless.
The difference between a website and a web strategy is something that the experts at Tribute Media have mastered. Put us to work and we'll create a web strategy that will help you generate leads and grow your business.
[](https://cta-redirect.hubspot.com/cta/redirect/481308/d2997a87-4e77-4648-bb37-7b5bb6763c46) [](https://cta-redirect.hubspot.com/cta/redirect/481308/97691340-6763-4557-a6b7-25bf50f35b5b)
©2024 Tribute Media (a Hawke Media Company) || 310.451.7295
136 E. Idaho Ave. Ste. 100, Meridian, ID 83642
[Careers](https://www.tributemedia.com/careers) || [Legal Mumbo Jumbo](https://www.tributemedia.com/legal) || [Privacy Policy](https://www.tributemedia.com/privacy-policy)
This is a search field with an auto-suggest feature attached.
- There are no suggestions because the search field is empty.
[Instagram](https://www.instagram.com/tributemedia) [Twitter](https://twitter.com/tributemedia) [Facebook](https://www.facebook.com/tributemediaboise) [LinkedIn](https://www.linkedin.com/company/tribute-media) [Contact](https://www.tributemedia.com/contact)
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Don Elliott",
"url" : "https://www.tributemedia.com/blog/author/don-elliott"
},
"dateModified" : "2023-02-23T21:15:25.805Z",
"datePublished" : "2023-02-20T15:45:00.000Z",
"headline" : "How to Optimize Your Images for the Web",
"image" : [ "https://www.tributemedia.com/hubfs/optimize-images-web.jpg" ],
"mainEntityOfPage" : {
"@id" : "https://www.tributemedia.com/blog/how-to-optimize-your-images-for-the-web",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://www.tributemedia.com/hs-fs/hub/481308/file-2402620905.png"
},
"name" : "Tribute Media"
}
}
```
```json
{
"@context" : "http://schema.org/",
"@type" : "LocalBusiness",
"address" : {
"@type" : "PostalAddress",
"addressLocality" : "Meridian",
"addressRegion" : "ID",
"postalCode" : "83642",
"streetAddress" : "136 E. Idaho Ave, Suite 100"
},
"logo" : "https://cdn2.hubspot.net/hub/481308/file-2428216597-png/branding/logo.png?t=1455738794382",
"maps" : "https://www.google.com/maps/place/136+E+Idaho+Ave,+Meridian,+ID+83642/@43.6113059,-116.392652,17z/data=!3m1!4b1!4m2!3m1!1s0x54ae53ede06e5d0b:0x4a48cd478b863e5",
"name" : "Tribute Media",
"telephone" : "Tribute Media",
"url" : "https://www.tributemedia.com/"
}
```
```json
{
"@context" : "http://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Don Elliott"
},
"dateModified" : "2023-02-23UTC9:15:25 PM",
"datePublished" : "2023-02-02UTC6:28:29 PM",
"description" : "Which image type should you use? What size is best for the web? Our Art Director explains the best image optimization techniques here. ",
"headline" : "How to Optimize Your Images for the Web",
"image" : {
"@type" : "ImageObject",
"height" : "480",
"url" : "https://481308.fs1.hubspotusercontent-na1.net/hubfs/481308/optimize-images-web.jpg",
"width" : "1240"
},
"mainEntityOfPage" : {
"@id" : "https://www.tributemedia.com/blog/how-to-optimize-your-images-for-the-web",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "LocalBusiness",
"logo" : {
"@type" : "ImageObject",
"url" : "https://cdn2.hubspot.net/hub/481308/file-2428216597-png/branding/logo.png?t=1455738794382"
},
"name" : "Tribute Media"
}
}
```