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.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
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
-
Best Practices for Image Optimisation
Hi Guys, I would love some recommendations from you all. A potential client of mine is currently hosting all their website image galleries (of which there are many) on a flickr account and realise that they could gain more leverage in Google images (currently none of their images cover off any of the basics for optimisation eg filename, alt text etc), I did say that these basics would at least need to be covered off and that Image hosting is supposedly an important factor especially when it comes to driving traffic from Google Image Search. (potentially images hosted on the same domain as the text are given more value than the images hosted at another domain like websites such as Flickr). The client has now come back saying they have done some 'reading' and that this suggests a sub-domain could be the way to go, e.g. images.mydomain.com - would love feedback on this before I go back to them as it would be a huge undertaking for them. Cheers
Technical SEO | | musthavemarketing0 -
Will sitemap generated in Yoast for a combined wordpress/magento site map entire site ?
Hi For an ecommerce site thats been developed via a combination of wordpress and magento and has yoast installed, will the sitemap (& other yoast features) map (& apply to) the entire site or just wordpress aspects ? In other words does one need to do anything else to have a full sitemap for a combined magento/wordpress site or will Yoast cover it all ? This link seems to suggest should be fine but seeing if anyone else encountered this and had problems or if straightforward ? http://fishpig.co.uk/wordpress-integration/docs/plugins.html cheers dan
Technical SEO | | Dan-Lawrence0 -
Should this site start again on a new domain
Hi We have not done SEO on this site they have used another company who looks like they outsourced and the links have been built by a third party all blog networks and this company have said they cannot get the links removed. Google flagged artificial links on this web site in February and in April it lost over 10000 visitors in a month and its just free falled ever since. The categories have been recreated and no redirects created due to the amount of backlinks from the blog sites to the original category pages but the site is not recovering its down to 1500 visitors a month and used to get 14000 a month. So should my customer ditch the domain and move this site to fresh domain? http://www.kids-beds-online.com Any answers would really be appreciated. thanks Tracy
Technical SEO | | dashesndots0 -
Best Implementation of a Title Tag
If My Targeted keyword are: Mussoorie Hotels Hotels in Mussoorie Mussoorie Resorts Resorts in Mussoorie What of the below 3 will be the best Title Tag After Panda and Penguine ? Hotels and Resorts in Mussoorie Mussoorie Hotels | Mussoorie Resorts | Luxury Budget & Economical Accommodation in Mussoorie Mussoorie Hotels, Mussoorie Resorts, Hotels in Mussoorie, Resorts in Musoorie please suggest!
Technical SEO | | WildHawk0 -
Best META Fields to Include on New Site
I am in the process of transitioning sites to a Drupal CMS and am curious to know what META information to provide on each of the new site pages. Currently, this is the set-up I plan on using: My questions to the community are: whether or not I've added all pertinent information, and if there's anything I'm overlooking
Technical SEO | | NiallSmith0 -
Pros & Cons of deindexing a site prior to launch of a new site on the same domain.
If you were launching a new website to completely replace an older existing site on the same domain, would there be any value in temporarily deindexing the old site prior to launching the new site? Both have roughly 3000 pages, will launch on the same domain but have a completely new url structure and much better optimized for the web. Many high ranking pages will be redirected with 301 to the corresponding new page. I believe the hypothesis is this would eliminate a mix of old & new pages from sharing space in the serps and the crawlers are more likely to index more of the new site initially. I don't believe this is a great strategy, on the other hand I see some merit to the arguments for it.
Technical SEO | | medtouch0 -
How do i use Linkedin to promote my site
Hi i have heard so much about Linkedin but i am not sure how to use it. I would like to start off using it for free and have opened an account but i am not sure how to use it to promote my site and to gain traffic before i go to the paid service. Can anyone please give me some basic advice on how to use the free service to gain traffic to my site and also the best way to use it. I want to try and use it to promote my articles on www.in2town.co.uk
Technical SEO | | ClaireH-1848860 -
Is it a good idea to make 301 from a site which you know google has banned certain keywords for to a new site with similar content
Here is a short question re. 301. I read Dovers article on how to move an old domain to a new one. Say you have been a little inexperienced regarding linkbuilding and used some cheap service in the past and you have steadily seen that certain keywords have been depreciating in the SERP - however the PR is still 3 for the domain - now the qustion is should you rediect with a 301 in .htaccess to a new domain when you know that google does not like certain keywords with respect to the old site. Will the doom and gloom carry over to the new site?
Technical SEO | | Kofoed0