You’re sitting at your computer looking through potential website images.
You can choose between gorgeous live-action photos, landscapes, computer graphics, and a bunch of icons. They’re all different types of files (JPGs, PNGs, and SVGs), so you start to wonder, “What do these even mean, and what’s best for the web?”
Each of these common files do have a specific time and place, and if you upload the wrong type, your images may look substandard or slow down your website. Without further ado, here’s our guide to JPG vs. PNG vs. SVG and when to use each on your website.
When to Use JPGs on the Web
The short answer: JPGs are ideally suited for photographs.
A JPG file stands for its creator, “Joint Photographic Experts Group.”
JPGs are the most common image file type and they can compress photos exceptionally efficiently, making them great for the majority of web images. These image files can be as small as a few kilobytes, which makes them render and load quickly, improving your user experience on your site and benefiting your organic rankings.
JPGs retain every unique color within the image which makes them dynamic and realistic, though can result in very large files when there is an excessive amount of detail or ineffective compression settings. In other words, while they can be tiny files, often they are the largest on a given website.
Here’s a JPG File
This lovely JPG is 1000×667 and only 19 KB
When to Use PNGs on the Web
The short answer: PNGs are best for images that are created on a computer.
PNGs stand for “portable network graphics” and the format was created as an upgraded GIF file format.
PNGs are great for images that are primarily solid colors like charts, infographics, and cartoons. They also support transparent areas, so if your image has a cutout, it needs to be a PNG.
Inside Tip: OSX saves screenshots as PNGs. If you upload a screenshot of a photo, it will be much larger than necessary, so crop in Preview or convert it to a JPG before uploading (links to conversion tools below).
Here’s a PNG File
This PNG file has a transparent background and clearly defined areas of single colors.
When to Use SVGs on the Web
The short answer: SVGs are best for icons and logos.
SVGs are very specialized vector images that scale perfectly to any size because they’re made from math instead of pixels. You have to start out with a specific file to end up with an SVG, so this won’t come up as often; you can’t effectively make an SVG out of a photo, for example.
Here’s an SVG file
JPG, PNG, & SVG File Conversion Tools
If you’re stuck with a file you need to convert, add these useful (and free) tools to your bookmark bar:
Other Web Image Files
GIFs and WebP are two other image files you frequently see around the web. Here’s a quick rundown.
GIFs perform worse than PNGs in every way except animation. The most common uses for gifs are pop culture references and social media engagement, like this.
WebP is one of the newest image file types, owned by Google. While it features wonderful compression-to-performance, it’s new and browser support isn’t universal yet. We’re keeping on our eyes closely on this technology for future use, as should you. Learn more about WebPs here.
A Few Other Image Best Practices For Web
File Size: Always compress any image type before uploading it to the web. You can often save upwards of 90% of the file size without losing quality. This will make your website load much more quickly. The best image compression tool for Mac users is ImageOptim. For non-Mac users, they provide a list of recommended tools for Windows, Linux, and old Macs.
Image Resolution: This is different from file size, but it does affect the file size. Since the largest common screen sizes are 1920×1080 pixels, you will rarely need a photo larger than that. You can resize your photos with a lot of tools. We like this one: Be Funky Photo Editor.
Naming Convention: To give your SEO a little boost, name your file something that makes sense like web-design-example.jpg, rather than DC43785489.jpg.
The post JPG vs. PNG vs. SVG – What is Best for the Web? appeared first on Zenman.