Absolutely! You only have a few seconds to make a good impression online, generally, about 3-5. Many don’t pay attention to the file size of the images they upload to their website or blogs. It really doesn’t matter because it resizes to fit the area I need it to complete, right?
Right, but what you don’t see is the HUGE photo that is being loaded while your visitors wait for it to be resized so it will fit on your page.
Why should this matter to you? If your site or blog doesn’t load quickly, your viewers may move on rather than skip it or wait. This can drastically increase your load time. Here’s a couple of quick tips or explanations to help you on your DIY journey.
Size your images only as large as your content width. For example, if your website is only 800 pixels wide, then there is no need to make your images larger, they will only be shrunk down when loaded. Keep it simple and use the same width as your content.
Web designs don’t recognize “per inch” in a layout. So PPI (pixels per inch) and DPI (dots per inch) are not relevant when creating or editing photos for your website, even if they are options in your software. The picture quality will be the same for the Internet.
File Size is based on pixels. An image at 800 pixels in width by 400 pixels in height will have the same file size no matter what the PPI is set to. This image will have 320000 pixels of information, so width x height is how you determine the file size. A larger file size will slow down your page load time, which means viewers could leave the page without seeing your full content. Another “trick” is to play around with the compression of the file, so the quality range can be less than 100%. This can lower your file size, but may not lower the quality for the viewer on the web.
Wondering why your images are pixilated and blurry? It could be you scaled your photos too small, and then tried to re-enlarge them for display online. Don’t worry, just find the original image and try again!
If you want to have an image be a particular size, pick the smallest copy that is the same or larger than your desired display size, and use the tags to adjust display size. For more on how to use
tags, see this article: https://www.w3schools.com/tags/tag_img.asp
Make all edits on your original photo before using it online. Make any edits to the photo before you try to scale, crop or compress it. That way you are working with all the data first, before you do any type of changing size.
When editing an image, we recommend: https://pixlr.com/
Image size DOES MATTER! For speed of load time and ease of use for your user. Take the time to do it right!