How do I optimizing images for my website?

Updated 1 month ago by Taylor McManus

There a few free tools that you can use in your browser to compress images' file sizes to optimize them for the website. It is important to keep image sizes as small as possible (without reducing the quality) to keep pagespeed optimal. Keeping the file sizes small, keeps the overall website size and page load reasonable.1st Step is:

  • Resize the image width and height using Photoshop (or any image editor).
  • An image should be 1920px wide or less. <-- this width is used for a large header image
  • It is important to size the image properly for the space it will be taking up on the desktop. ex: don't place a 1920px wide image in a 360px wide area.
  • Use jpg format unless you need the background in the image transparent. ex: logo files are usually png format so the background in the logo is transparent. Png files are larger in size than jpg files.

3 Different Tools That Do The Same Thing - Choose Your Favorite! Find your file on your computer and drag/drop it into the online tool to resize the file. Download the new file and add it to the website.

  1. https://shortpixel.com/online-image-compressionhttps://shortpixel.com/online-image-compressionEdit - this one is my most favorite. I have had the best luck with reducing file sizes and keeping the quality of the image.
  2. https://kraken.io/web-interfacehttps://kraken.io/web-interfaceEdit
  3. https://tinypng.com/https://tinypng.com/Edit

Adding Images to WordPress Media Gallery/Posts/PagesWhen uploading images to either of these places, by default the size is set to medium. There are a variety of sizes to choose from including original size. See below for details.


How did we do?


Powered by HelpDocs (opens in a new tab)