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
-
What is the best format for animated content
We want to use some movement in our designs, charts etc. what format is the most SEO friendly?
Technical SEO | | remkoallertz1 -
URL Format
Often we have web platforms that have a default URL structure that looks something like this www.widgetcompany.co.uk/widget-gallery/coloured-widgets/red-widgets This format is quite well structured but would it just be more effective to be www.widgetcompany.co.uk/red-widgets? I realise that it may depend on a lot of factors but generally is it better to have the shorter URL if targeting the key phrase "red widgets" One thing, it certainly looks a bit keyword stuffy with all those "widgets"
Technical SEO | | vital_hike0 -
Site structure headache
Hello all, I'm struggling to get to grips with a websites site structure. I appreciate that quality content is key etc, and the more content the better, but then I have issues with regards to doorway pages. For example im now starting to develop a lot of ecommerce websites and want to promote this service. should we have pages that detail all of the ins and outs of ecommerce - or should we simplify it to a couple of pages. what is best practice? Also isn't a content hub similar to having doorway pages? let me know what you think! William
Technical SEO | | wseabrook0 -
Site dropped after article submissions
I have a site about back pain. The name is lower back pain relief. It has a lot of content on how to treat back pain with natural remedies. I paid for botw.org and yahoo directories as well as submissions from submit edge. My site was doing well within a few months. I was floating around at the bottom of page two for "lower back pain relief" and lower back pain. I found out about Unique article wizard. I started using that to write and submit articles. Now, my website is not ranking anywhere. I submitted a request for reconsideration to Google. They said no manual action had been taken. The question: How long does this penalty last? Is that website toast now? I think it was penalized for using the anchor text too much or adding too many links at once. It has been penalized for about 6 weeks now.
Technical SEO | | Naturalhealth150 -
Google search result going to a page that I did not put on my site
Hi, I am seeing a very strange result in google for my site. When doing a search for the term "london reflexology" my site comes up 18th in the results. But when I click the link or check the URL it shows up as: http://www.reflexologyonline.co.uk/reflexologyonline.php?Action=Webring This is not right at all. It looks like some sort of cloaking but I am not sure. I am new to SEO and I do not know why goole is showing this URL that does not exist on my site and of witch the content is totally wrong. Can anyone please help with this? See the 2 linked images for more details. It seems to me the site might be hacked or something to that effect. Please help.... jyJdP.png 71Mf4.png
Technical SEO | | RupDog0 -
What's the best way to switch over to a new site with a different CMS?
Is it better to 301 or to closely duplicate each page URL when switching over to a new website from an established site with good ranking and a different CMS ( Drupal switching to Wordpress)?
Technical SEO | | OhYeahSteve0 -
Why Does this Site Rank for so Many Keywords?
I was doing some research today and kept coming across this site sylvane.com I checked OSE and found that it only has a DA of 37 PA of 35, and only 79 linking domains (966 links total). I got to looking and there are a few links like this http://lulala.us/twxoops/html/userinfo.php?uid=303 Anyway, accroding to SEMRush, this site ranks for over 6,000 keywords. I ran content on a couple of their high ranking pages and the content is not unique, at least not very unique on the pages I checked. What is so special about that site that google is giving it so much love? I am not trying to call them out, I just want to know what this site is doing to garner the favor of google when I have a site in the same niche with a higher DA, PA, linking domains, and social signals.
Technical SEO | | CharlesMontgomery0 -
If I redirect my WordPress blog to my main site, will it help my main site's SEO?
I have separate sites for my blog and main website. I'd like to link them in a way that enables the blog to boost my main site's SEO. Is there an easy way to do this? Thanks in advance for any advice...
Technical SEO | | matt-145670