# Faster Photos, Faster Website | R. Martin Creative > A free quick guide to WebP, AVIF, and SVG: how big your website photos should be, and the free tools that shrink them in a few clicks. Source: https://rmartincreative.com/extras/faster-photos-faster-website [Notes & Freebies · Quick Guide](https://rmartincreative.com/extras) # Faster Photos, Faster Website Big photos are the most common reason small business websites feel slow, especially on phones. A photo straight off your phone or camera is often 3 to 8 MB. Most customers will never notice the extra detail, but they will notice a page that takes several seconds to load on a phone signal in a parking lot. Slow pages lose visitors, and Google uses page speed as one of its signals too. This quick guide explains WebP, AVIF, and SVG in plain English, how big your images should actually be, and the free tools that shrink them in a few clicks. It takes about 35 minutes to fix the biggest images on your homepage. Download the printable PDF with a checklist, or follow along below. [Download the free PDFPDF · 8 pages · printable checklist](https://rmartincreative.com/downloads/Faster-Photos-Faster-Website.pdf) ![Quick guide: Faster photos, faster website. A free guide to WebP, AVIF, SVG and the free tools that shrink them: about 35 minutes in one sitting, all free tools, and a printable PDF checklist](https://rmartincreative.com/webp-assets/faster-photos-faster-website.webp) ## Part 1: Why image size matters 1. 1 ### Find your heaviest images (5 min) Go to [PageSpeed Insights](https://pagespeed.web.dev/), enter your homepage address, and run the test. Scroll to the suggestions and look for items like “Improve image delivery” or “Properly size images.” Each one lists the images that need work and how much file size you could save. Start with the big photo at the top of your homepage (often called the hero image): it loads first and is usually the largest file on the page. 2. 2 ### Know your size targets (5 min) Use the table below as your guide. Don't upload a 6,000 px, 7 MB phone photo and let the website shrink it on screen; resize it to 1920 px and save it as WebP at about 200 KB **before** you upload. ## Your size targets Resize to these widths before you upload, and aim for these file sizes. | Image type | Width | Aim for | | ----------------------------------------- | --------------------- | ------------ | | Full-width banner or hero photo | 1920 px | Under 250 KB | | Photo inside a page or blog post | 1200 px | Under 150 KB | | Thumbnails, team photos, gallery previews | 600 px | Under 60 KB | | Logo or icon | As displayed (or SVG) | Under 30 KB | ## Part 2: WebP vs. AVIF, in plain English Both are modern image formats that look the same as a JPG to the eye but take up much less space. | | JPG | WebP | AVIF | | ------------------------- | ------------- | ----------------------------- | ----------------------------------------------------- | | Typical file size | Baseline | About 25–35% smaller than JPG | About 20–30% smaller than WebP | | Works in current browsers | Everywhere | Practically everywhere | Nearly everywhere (Chrome, Edge, Firefox, Safari 16+) | | Website builder support | Everywhere | Very wide | Growing, but not every builder accepts uploads | | Transparent backgrounds | No | Yes | Yes | | Best for | Fallback only | **Your safe everyday choice** | Large photos, when your site accepts it | Good to know: some platforms, like Wix and Shopify, already convert your images to modern formats behind the scenes. Resizing before you upload still helps, because they start from a smaller file. WordPress has accepted WebP and AVIF uploads since version 6.5, as long as your hosting supports them. ## The simple rule * Use **WebP** for almost everything. It's small, sharp, and works everywhere. * Try **AVIF** for your largest photos if your website platform accepts it. If the upload is refused or the image looks off, go back to WebP. * Keep **logos and icons** as SVG so edges stay crisp (more on that next). * Always **keep your original** full-size photo in a folder. Shrinking is a one-way street: you can't add detail back later. ## What I use AVIF can squeeze out a little more quality at the same file size, but I use WebP for nearly everything, including this website. It works in every browser, every website builder, and every free tool, so there's nothing to troubleshoot. ## Part 3: SVG, the format for logos and icons A normal photo (JPG, PNG, WebP) is like a mosaic made of thousands of tiny colored tiles. Blow it up and you start to see the tiles, so edges get blurry and blocky. An SVG is more like a set of drawing instructions: “draw a red circle here, write the word Plumbing there.” Because the browser redraws it fresh every time, it stays perfectly sharp at any size, from a tiny phone screen to a huge monitor, and the file is usually tiny. At normal size, a PNG logo and an SVG logo look the same. Zoom in and the PNG's edges go soft and fuzzy, while the SVG stays sharp, and the SVG is often the smaller file: in the PDF's example, about 4 KB compared with 33 KB for the PNG. ## Always use SVG for * Your **logo**, especially in the header of your site * **Icons**, like phone, email, map pin, and social media icons * Simple **graphics** with flat colors and clean edges, like badges, diagrams, or a service area map ## Turning a PNG logo into an SVG (5 min) 1. 1 **Best first step:** ask whoever designed your logo for the original vector file (it may be called .svg, .ai, .eps, or .pdf). That's always cleaner than converting. 2. 2 If you only have a PNG, [SVGcode](https://svgco.de/) is free, runs in your browser, and keeps your image on your computer. Drop in a PNG and download the SVG. 3. 3 Or try **VectorCraft by ArtCraft** at [getartcraft.com](https://getartcraft.com/), a free, open source vector app for Windows, Mac, Linux, or the web. Open your PNG, click its layer, press **Image Trace** in the tool palette at the bottom, pick one of 12 presets, then export as SVG. It's still in development. 4. 4 [Adobe Express](https://www.adobe.com/express) also has a free online PNG-to-SVG converter (it needs a free Adobe account). 5. 5 Zoom in on the new SVG to check the result. If letters look lumpy or colors are off, the original was too complex or low-resolution to trace well, and it's worth having a designer redraw it. These tools work best on simple logos with a few solid colors. Don't use SVG for photos: use WebP for those. ## Part 4: Free tools that do the work 1. 1 ### Squoosh: best for one image at a time A free tool from Google that runs in your web browser at [squoosh.app](https://squoosh.app/). Drop in a photo, pick WebP or AVIF, and drag the quality slider while you compare before and after side by side. Nothing to install, and your images stay on your computer. Set the width under **Resize**, choose WebP, and start the quality around 75\. Lower it until you can see a difference, then nudge it back up. 2. 2 ### TinyPNG: best for a quick batch Drag a handful of images onto [TinyPNG](https://tinypng.com/) and it shrinks them automatically, with an option to convert to WebP or AVIF. The free version limits how many and how large, which is plenty for a homepage cleanup. Use it for a batch of photos that are already the right width. 3. 3 ### PhotoCraft by ArtCraft: best if you also want a photo editor A free, open source photo editor from [getartcraft.com](https://getartcraft.com/) for Windows, Mac, Linux, or right in your web browser, with no account needed. It's a good fit if you want to crop, straighten, or brighten a photo and export a web-ready copy in the same place. Use **Image Size** to set the width, then **Export As** to choose WebP, set the quality, and see the estimated file size before you save. PhotoCraft doesn't export AVIF, so use Squoosh or TinyPNG for that. Its makers label it “early alpha,” so expect the odd rough edge and save a copy of your originals first. 4. 4 ### PageSpeed Insights: check your work After you re-upload your new images, run your homepage through [PageSpeed Insights](https://pagespeed.web.dev/) again and compare the score and load time with your first test. ## Your progress checklist * Run PageSpeed Insights and note your score (5 min) * Back up your original photos in one folder (2 min) * Resize your hero image to 1920 px wide (3 min) * Save it as WebP (or AVIF) under 250 KB (3 min) * Shrink the other large images flagged by the test (10 min) * Swap your logo for an SVG version (5 min) * Re-upload and replace the old files on your site (5 min) * Re-run PageSpeed Insights and compare (2 min) * Make it a habit: resize every new photo before uploading This started in our free website help groups. Join us on [Nextdoor](https://nextdoor.com/g/0wgka8voj/) or [Facebook](https://www.facebook.com/groups/websitehelpstrategysharing/) to ask your own questions. ## Want a hand with any of this? If your site is still slow after a photo cleanup, I can take a look. The Next.js sites I build resize and convert photos automatically, so you never have to think about file sizes again. [Website Overhaul](https://rmartincreative.com/services/website-design-development/website-overhaul) Common questions ### Should I use WebP or AVIF? WebP, for almost everything. AVIF files can be a little smaller, but WebP works in every browser, website builder, and free tool, so there's nothing to troubleshoot. Try AVIF for your largest photos if your platform accepts it. ### Will smaller photos look worse? Not if you resize to the width the page actually shows and keep the quality around 75\. Compare before and after in Squoosh: most people can't tell the difference, but they will notice a page that loads in one second instead of five. ### My website builder already optimizes images. Do I still need this? It still helps. Wix and Shopify convert images to modern formats behind the scenes, but they start from whatever you upload, so a resized photo gives them a smaller file to work with. WordPress has accepted WebP and AVIF uploads since version 6.5, as long as your hosting supports them. ### Can I turn a photo into an SVG? No. A photo of your team, shop, or work is too detailed to turn into drawing instructions. Use WebP for photos and save SVG for logos, icons, and simple flat graphics. ### What if I get stuck? Ask in our free website help group on [Nextdoor](https://nextdoor.com/g/0wgka8voj/) or [Facebook](https://www.facebook.com/groups/websitehelpstrategysharing/). If you'd rather hand it off, the [Next.js sites I build](https://rmartincreative.com/extras/benefits-of-a-nextjs-website#photos-look-sharp-without-slowing-things-down) resize and convert photos automatically, so you can upload straight from your phone. [More Notes & Freebies](https://rmartincreative.com/extras) ## Structured data ```json {"@context":"https://schema.org","@type":"Article","headline":"Faster Photos, Faster Website","description":"A free quick guide to WebP, AVIF, and SVG: how big your website photos should be, and the free tools that shrink them in a few clicks.","url":"https://rmartincreative.com/extras/faster-photos-faster-website","datePublished":"2026-10-29","inLanguage":"en-US","image":"https://rmartincreative.com/webp-assets/faster-photos-faster-website.webp","author":{"@type":"Person","@id":"https://rmartincreative.com/about#ryan-martin","name":"Ryan Martin"},"publisher":{"@id":"https://rmartincreative.com/#business"}} ``` ```json {"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Should I use WebP or AVIF?","acceptedAnswer":{"@type":"Answer","text":"WebP, for almost everything. AVIF files can be a little smaller, but WebP works in every browser, website builder, and free tool, so there's nothing to troubleshoot. Try AVIF for your largest photos if your platform accepts it."}},{"@type":"Question","name":"Will smaller photos look worse?","acceptedAnswer":{"@type":"Answer","text":"Not if you resize to the width the page actually shows and keep the quality around 75. Compare before and after in Squoosh: most people can't tell the difference, but they will notice a page that loads in one second instead of five."}},{"@type":"Question","name":"My website builder already optimizes images. Do I still need this?","acceptedAnswer":{"@type":"Answer","text":"It still helps. Wix and Shopify convert images to modern formats behind the scenes, but they start from whatever you upload, so a resized photo gives them a smaller file to work with. WordPress has accepted WebP and AVIF uploads since version 6.5, as long as your hosting supports them."}},{"@type":"Question","name":"Can I turn a photo into an SVG?","acceptedAnswer":{"@type":"Answer","text":"No. A photo of your team, shop, or work is too detailed to turn into drawing instructions. Use WebP for photos and save SVG for logos, icons, and simple flat graphics."}},{"@type":"Question","name":"What if I get stuck?","acceptedAnswer":{"@type":"Answer","text":"Ask in our free website help group on Nextdoor or Facebook. If you'd rather hand it off, the Next.js sites I build resize and convert photos automatically, so you can upload straight from your phone."}}]} ``` ```json {"@context":"https://schema.org","@type":["LocalBusiness","ProfessionalService"],"@id":"https://rmartincreative.com/#business","name":"R. Martin Creative","alternateName":"Ryan Martin Design & Print","founder":{"@type":"Person","@id":"https://rmartincreative.com/about#ryan-martin","name":"Ryan Martin","url":"https://rmartincreative.com/about"},"description":"An outsourced marketing team for small businesses: websites, search and AI visibility, logos, business printing, signs, and custom apparel through its FeedTheFlames T-shirt brand, plus custom Christmas and greeting cards and photo restoration for families. Based in Richmond, IL, serving Northern Illinois and Southeast Wisconsin.","logo":"https://rmartincreative.com/brand/rm-logo-1024.png","image":["https://rmartincreative.com/social-media-posts/google-business-profile-cover.jpg","https://rmartincreative.com/brand/rm-logo-1024.png"],"geo":{"@type":"GeoCoordinates","latitude":42.4764,"longitude":-88.3058},"brand":{"@type":"Brand","name":"FeedTheFlames","url":"https://feedtheflamegraphics.etsy.com"},"openingHoursSpecification":{"@type":"OpeningHoursSpecification","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"opens":"09:00","closes":"19:00"},"knowsAbout":["Next.js","Astro","React","Nuxt.js","Vue","TypeScript","JavaScript","Python","PHP","Tailwind CSS","SQL","PostgreSQL","MySQL","Supabase","Firebase","React Native","Expo","iOS","Android","WordPress","Strapi","Prismic","Shopify","BigCommerce","Wix","Cloudflare","GitHub","Vercel","GoDaddy","Bluehost","HostGator","SiteGround","Hostinger","DreamHost","Social logins","Google Analytics","Google Search Console","Bing Webmaster Tools","Microsoft Clarity","Business schema","Google Business Profile","Apple Business Connect","Google Maps","Apple Maps","Bing Places","Yelp","Facebook","Instagram","Stripe"],"slogan":"Smarter websites. Measured results. Real growth.","paymentAccepted":"Cash, Credit Card, Debit Card, Visa, Mastercard, Discover, American Express, Goldback, Bitcoin, Dogecoin, Solana, SUI","currenciesAccepted":"USD, BTC, DOGE, SOL, SUI","url":"https://rmartincreative.com","sameAs":["https://x.com/rmartincreative","https://www.facebook.com/profile.php?id=61595559686046","https://maps.google.com/?cid=3394983410703261460","https://nextdoor.com/page/r-martin-creative-richmond-il","https://www.bing.com/forbusiness/singleEntity?bizid=629c0fcc-c0e9-4b23-a343-996c907213f9"],"telephone":"+1-312-866-2762","priceRange":"$20–$3,000","email":"ryan@rmartincreative.com","address":{"@type":"PostalAddress","addressLocality":"Richmond","addressRegion":"IL","postalCode":"60071","addressCountry":"US"},"areaServed":[{"@type":"City","name":"Richmond","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Spring Grove","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Fox Lake","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Channel Lake","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Lake Catherine","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Antioch","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Lake Villa","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Lindenhurst","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Old Mill Creek","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Solon Mills","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Ringwood","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"McHenry","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Prairie Grove","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Lakewood","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Lake in the Hills","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Algonquin","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Carpentersville","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"East Dundee","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"West Dundee","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Sleepy Hollow","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Des Plaines","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Arlington Heights","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Palatine","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Barrington","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Crystal Lake","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Woodstock","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Hebron","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Genoa City","containedInPlace":{"@type":"State","name":"Wisconsin"}},{"@type":"City","name":"Lake Geneva","containedInPlace":{"@type":"State","name":"Wisconsin"}},{"@type":"City","name":"Slades Corners","containedInPlace":{"@type":"State","name":"Wisconsin"}},{"@type":"City","name":"New Munster","containedInPlace":{"@type":"State","name":"Wisconsin"}},{"@type":"City","name":"Wheatland","containedInPlace":{"@type":"State","name":"Wisconsin"}},{"@type":"City","name":"Paddock Lake","containedInPlace":{"@type":"State","name":"Wisconsin"}},{"@type":"City","name":"Pleasant Prairie","containedInPlace":{"@type":"State","name":"Wisconsin"}},{"@type":"City","name":"Kenosha","containedInPlace":{"@type":"State","name":"Wisconsin"}},{"@type":"City","name":"Wadsworth","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Winthrop Harbor","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Gurnee","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Waukegan","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Lake Forest","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Highland Park","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Evanston","containedInPlace":{"@type":"State","name":"Illinois"}},{"@type":"City","name":"Chicago","containedInPlace":{"@type":"State","name":"Illinois"}}]} ``` ```json {"@context":"https://schema.org","@type":"WebSite","@id":"https://rmartincreative.com/#website","url":"https://rmartincreative.com","name":"R. Martin Creative","alternateName":"Ryan Martin Design & Print","publisher":{"@id":"https://rmartincreative.com/#business"},"inLanguage":"en-US"} ```