How to correctly size images for your website
Don’t let your website slow down because of incorrectly sized images!
Sizing images incorrectly for your website can have a number of negative ramifications. Size them too small and they might look pixelated, but size them too large and they might impact the SEO for your site. Images that are too large can lead to slow load times, a higher bounce rate, and a lower SEO ranking.
Putting time into figuring out the correct image resolution is worth your time, because high-quality visuals and a high-ranking site can say a lot about your brand.
The trickiest part is there’s no such thing as a set size. Your feature images won’t necessarily match the dimensions of your homepage banner, full-width visuals won’t mirror blog post images, carousels will differ from collages...and so on.
So, here are a few helpful hacks to help you figure out just what size your images need to be:
Use an extension
Tip: Chrome’s favored by most web developers and designers – if it’s not already your default browser, we suggest giving it a try! It’s especially handy if you’re in the process of building a new website.
For this trick, you’ll have to download and utilize Chrome as your Internet browser. If you don’t already use Chrome, you can download it here!
Once Chrome is downloaded and installed, you’ll also need to download Chrome’s image size extension. Once installed, you’ll be able to find out the size needed for every single element of your site.
Use the inspector tool
Another way to determine image size using Chrome is the inspector tool. This tool is built in, no extension or download needed.
Step 1: Hit F12 or right click your mouse and go to “Inspect Element.”
Step 2: Click on the image you’re looking to determine dimensions for, and you’ll be shown the information you need. Note that the first number is always the width.
In the world of print, the higher the image resolution the better. It results in a high-quality end product and has zero negative implications. When it comes to web that philosophy is flipped on its head.
In the online world, large file sizes can hurt you -- they can slow your page load speed down, interfere with your visitors’ user experience and even damage your organic SEO rankings. You’ll want to use an image size that still appears crisp and clear – but isn’t so large that it negatively impacts your site. Here’s a few tips for striking that balance:
Find out the exact dimensions you need, and resize your images in Photoshop or Canva for a tailored photo size.
Try not to let large images or full-screen backgrounds exceed 1MB -- if it does, it could be a sign your dimensions or resolution are unnecessarily high.
The recommended width for full-screen backgrounds is 2000px.
Smaller images around your site - like thumbnails, blog headers and in-content pictures, should be no more than 300MB.
If you’ve got the option in Adobe Suite, always ‘Save for web’ -- this will ensure your image’s saved at a web-friendly resolution by default.
Hue & Tone Creative: Websites for Greensboro and beyond
Already feeling overwhelmed? Let us handle your web design for you. Whether you want support finding the right photography for your site, resizing what you’ve already got, or building your website from the ground up, we’ve got the solution. Reach out at (336) 365-8559 or hannah@hueandtonecreative.com to get the process started!