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.

Category: Image Editing

AKblackdog
Asked:
2013-04-08 2:57 pm EST

Hits: 773

You must login before you can ask a follow up question.

You must login before you can submit an answer.

OTHER ANSWERS

1

Arn
Staff
16,801 Points
2013-04-08 3:24 pm EST
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

You must login before you can post a comment about this answer.

1

jamesr
Staff
5,889 Points
2013-04-08 3:29 pm EST
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

You must login before you can post a comment about this answer.

0

Arn
Staff
16,801 Points
2013-04-08 3:29 pm EST
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

You must login before you can post a comment about this answer.

Like this Question?

Related Articles

It looks like there are no related articles.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!