What would be the optimal size for .jpegs or .gifs to use on my website. I'm concerned about quality vs. load time. This is a commercial site and I do appreciate any input.

Avatar
AKblackdog
  • Answered
Replies 3
Avatar
0
Arn
Hello AKblackdog, This is a pretty tough question to answer as it will vary based on the size of your images, number of images, and quality of the image you're trying to convey. You can even say it depends on the content of the image. And "optimal" is very subjective - usually to the viewer, so there is no real set value for what is considered ideal. As a general rule of thumb - if you're dealing with a Gallery, especially with a LOT of images, then you will want to reduce either the number of images you're showing at once (via thumbnails), or reduce the size of the file you're generating for the thumbnail. Make sure that the file is set to 72 dpi - this will be resolution that works with displays - anything more wouldn't really benefit the viewer - higher dpi is more of use to printed image. You also might want to consider using PNGs, if possible, as they have some better compression while retaining quality in some cases. You can find many articles on this issue on the web. Here are a few that caught my with a quick search: Optimizing Web Graphics - Google WordPress.org- Image Size and Quality Web Designer's Guide to PNG Image format (If you use Adobe software) Web Graphics Optimization Options in Adobe There are ton of opinions on this. But as I mentioned in the beginning, the size of the graphics displayed can vary based on the content and viewer needs. I hope this helps to point you in the right direction. If you have any further questions, please contact technical support available 24 hours a day / 7 days a week. Regards, Arnel C. Community Support
Avatar
0
jamesr
Thank you for your question AKblackdog! For images it depends on what type of image. What I mean is, if its a Photo of a landscape or if it a part of the aesthetic of the site. For images that are displaying on your Website layout, you will want to keep those very small kilobytes. For you professional photos, you can create a thumbnail that is a small low quality, and low file size image. Make a link out of the thumbnail to the larger picture so the website loads and the high resolution picture can be view in a separate window when clicked. Below are recommendations for your web images images. 1. Make thumbnails for large images. 2. Keep layout images small. (Around 10 kb and lower.) 3. Make the resolution 72 dpi for web. 4. Use PNG for transparency, GIF for low quality, and JPEG for higher quality. 5. Code the image height and width so the browser does not have to calculate it. 6. Images that display on the site should not go over 1 MB in file size. To optimize your website, you should follow the guidelines at GTmetrics. Best regards, James R
Avatar
0
Arn
Hello AKblackdog, This is a pretty tough question to answer as it will vary based on the size of your images, number of images, and quality of the image you're trying to convey. You can even say it depends on the content of the image. And "optimal" is very subjective - usually to the viewer, so there is no real set value for what is considered ideal. As a general rule of thumb - if you're dealing with a Gallery, especially with a LOT of images, then you will want to reduce either the number of images you're showing at once (via thumbnails), or reduce the size of the file you're generating for the thumbnail. Make sure that the file is set to 72 dpi - this will be resolution that works with displays - anything more wouldn't really benefit the viewer - higher dpi is more of use to printed image. You also might want to consider using PNGs, if possible, as they have some better compression while retaining quality in some cases. You can find many articles on this issue on the web. Here are a few that caught my with a quick search: Optimizing Web Graphics - Google WordPress.org- Image Size and Quality Web Designer's Guide to PNG Image format (If you use Adobe software) Web Graphics Optimization Options in Adobe There are ton of opinions on this. But as I mentioned in the beginning, the size of the graphics displayed can vary based on the content and viewer needs. I hope this helps to point you in the right direction. If you have any further questions, please contact technical support available 24 hours a day / 7 days a week. Regards, Arnel C. Community Support