What is the best image format to put on your site
-
Hi at the moment i am working with images to try and speed up my site and i am wondering what is the best format to save images and then put on my site.
I have been playing around with photoshop where they have the following formats
png-24
gif (but not sure which one i should choose
or jpeg
I would be grateful for your advice and also to know what size i should try and keep the image down to
many thanks
-
thanks for that, i will try that now. i am getting different results for my site speed www.in2town.co.uk and would be grateful if people could put the site speed here so i can see real results
-
Hi Diane. This is timely, we just finished up rendering a bunch of our images to improve page speed.
I'll also throw this in there. Sometimes you won't be able to reduce a file size sufficiently by "save for web devices." When this happens, you can open Bridge in Photoshop and use Photoshop's image processor to render it to a smaller size and then save it for the web.
From Bridge, select the file (or files - you can do it in bulk). Go to tools>photoshop>image processor. From there you can select three ways to save it (jpeg, psd or tiff). If jpeg is acceptable for your situation, select jpeg and choose to render it to low, medium or high.
We were able to render them to 1 or 2 (low) without the image becoming too lossy. Then you can open up the image and "save as web devices" and reduce the file size to a more acceptable size.
Keep an eye on the quality of the image as you go through the steps. I'll trade off some speed for quality appearance.
Be careful when processing files in bulk. You may have ten images and 3 of them won't be able to be rendered down as low as the others and you'll spend time re-doing things.
Good luck!
-
thanks for this as at the moment image quality is a big problem on my site as well as load speed
-
I go with whatever format provides the cleanest appearance in the smallest file size.
If you shoot the image - shoot the image in the best quality at the lowest file size. I shoot with a professional grade Canon camera in a medium file size which produces a 2mb file. I can render it down from there.
If you have no control over the original file, create a new file in Photoshop at 72 to 100dpi. You won't need to go over 100 dpi on the file as you prepare it. If the image you are working with is poor keep the file at 100dpi while you work with it. If it is a clean and crisp image you can work with it in 72dpi.
Once you have your image ready to save for the web, click "save for web devices". Then, you can choose how you want to save it. For instance, JPEG will allow you to save it at maximum to very high to low. You can watch the file size change as you move from jpeg to gif to png in the lower left corner of the page. We try to keep all of our images at about 10k to 15k. Watch the quality of your image as you render it to different sizes. If your website allows users to enlarge an image for details, you will not want to render the file so small that it compromises the crispness and clarity of the image.
Keep in mind that naming your file is important for SEO purposes. Don't just give your image a generic combination of letters and numbers, but work your keyword into the name of the file. For example, don't load the file to your site as ABC Blue, but rather Carhartt S209 Blue.
-
The formats do different things.
If you have straight lines in your image like you would in a chart, don’t use jpg use png instead. Jpg can not handle straight lines, it burs them.
don’t use gif unless you need it to be animated
Use png-8 or 24 are fine for most things but jpg is often smaller.
png 8 and 24 both do transparency, but png 8 transparency does not work in ie6png24 is good for all occasions but is not always the smallest
-
PNG images are generally large files, take up a lot of disk space on your server, and slow down the load time of your site because they have more data to deliver. I generally stick to JPEG image files and sometimes save in lower quality to lower the file size. GIF would also be fine. The only problem you may run into is with JPEG image files that have transparency. In that case, I generally just use PNG or a GIF, but I typically only use transparent images in headers so it is not often an issue.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Will putting a one page site up for all other countries stop Googlebot from crawling my UK website?
I have a client that only wants UK users to be able to purchase from the UK site. Currently, there are customers from the US and other countries purchasing from the UK site. They want to have a single webpage that is displayed to users trying to access the UK site that are outside the UK. This is fine but what impact would this have on Google bots trying to crawl the UK website? I have scoured the web for an answer but can't find one. Any help will be greatly appreciated. Thanks 🙂
Technical SEO | | lbagley0 -
Why are my images not being indexed?
I have submitted an image sitemap with over 2,000 images yet only about 35 have been indexed. Could you please help me understand why Google is not indexing my images? www.creative-calendars.com
Technical SEO | | nicole20140 -
Image Duplication
I'm feeling strong! Ok, so can Google penalise a website which has "duplicated images" - coming from a completely independent website?
Technical SEO | | GaryVictory0 -
Cross links between sites
hi, We have several ecommerce sites and we cross linked 3 of them by mistake. We realize that the sites were linked through WMT, We have shut down 2 of the sites about 2 months ago, but WMT still shows the links coming from those 2 sites. how do we make sure that google will see the sites are shut down. Is there a better of way resolving this issue. We are no longer using those sites, so do not need them to be active. whats the best solution to show google that the links are no longer there. Crawler shows that it was able to crawl the site 45 days after it is shut down. thanks nick
Technical SEO | | orion680 -
Formatting dynamic urls?
We have a long-time previously well-established website that was hit by panda. On one section of the site, we have dynamic urls that include %20 in them (e.g. North%20America). It's recently come to our attention that google has both a version of the url with a plus sign (+) and the version with the %20 (space) (e.g. North+America). Upon researching this, it seems that a hyphen (-) is preferable to either of the above. We obviously need to remove the %20's from the urls as they can cause issues. So, should we stick with the + sign since it's already indexed and ranking or do a 301 rewrite and change them all to hyphens instead of the plus sign? This is the one section of the site that has maintained rankings through the panda debacle, so we need to take that into consideration as we don’t want to lose the rankings that we have. Along the same lines, we have two other sections of the site that provide search results as well, though these are all formatted to use a plus sign. Is it advisable to do a 301 rewrite to change the plus signs to hyphens on these as well or just leave them alone? This particular section has lost rankings over the last year with panda updates.
Technical SEO | | Odjobob0 -
Sitemap Creation + Site speed
Hi there, I am looking for a sitemap creation tool, so I can submit my site to Google. My site is www.vallnord.com On the other hadn I would like to speed up my web. Any tip? Regards, Guido.
Technical SEO | | SilbertAd0 -
Best Practice to Remove a Blog
Note: Re-posting since I accidentally marked as answered Hi, I have a blog that has thousands of URL, the blog is a part of my site. I would like to obsolete the blog, I think the best choices are 1. 404 Them: Problem is a large number of 404's. I know this is Ok, but makes me hesitant. 2. meta tag no follow no index. This would be great, but the question is they are already indexed. Thoughts? Thanks PS A 301 redirect to the main page would be flagged as a soft 404
Technical SEO | | Bucky0 -
Will rankings for my micro site rank better if I 301 redirect it to my main site?
This is my first time asking so I will try to be as clear as possible. Ok, I have a micro site that is an (exact match domain) and the domain is a couple 3-4 years old and ranks very well for several search terms. The main two terms it ranks for are like this. houses for rent in XXXXX XXXXX homes for rent (XXXXX equals a city name) The issue is this site has no backlinks, zero advanced SEO, I only did basic optimization to it when i set the site up. Even site structure, url structure all are not good.
Technical SEO | | Robbie8299
The only page I have ever even seen rank is the main root url. But with all that the site does really good in the top 1-2 results for key search terms. Now, I have a main site that is a very big site that has steadily been climbing in search terms every month with great backlinks, optimized for the city and all.
It currently ranks on second page for the listed search terms listed above. What I want to do is 301 redirect this microsite to my city page on my main site that is much better optimized for the key city terms.
The 301 redirect would point this "root domain" (mymicrosite.com) to my city page that looks like this. www.mymaindomain.com/city/XXXXXXX If I do this will Google rank my main URL city page as well as it ranks this microsite with zero links, seo, etc, etc. What happens if it does not? Will I be able to turn off the 301 redirect and keep the microsite rankings? My main reason for wanting this is I want this city page to rank well and I only want to optimize one site instead of both. Any help would be great!0