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
-
Nofollow links on our site menu
Hi Our site's front page has almost 900 internal links on it (it's an ecommerce site with about 25,000 products). A lot of these are on a pretty involved dropdown menu, which is on every page. I can't really do anything to get this figure down (its outside my remit), but one thing the developers have done is make all the menu links nofollow on the mobile version of the menu (site is responsive) - otherwise there would be even more links! My question is as to whether doing this for the mobile menu is a good idea, in terms of SEO?
Technical SEO | | abisti21 -
Site-wide Links
Hey y'all, I know this question has been asked many times before but I wanted to see what your stance was on this particular case. The organisation I work for is a group of 12 companies - each with its own website. On some of the sites we have a link to the other sites within the group on every single page of that site. Our organic search traffic has dropped a bit but not significantly and we haven't received any manual penalties from Google. It's also worth mentioning that the referral traffic for these sites from the other sites I control is quite good and the bounce rate is extremely low. If you were in my shoes would you remove the links, put a nofollow tag on the links or leave the links as they are? Thanks guys 🙂
Technical SEO | | AAttias0 -
404 Best Practices
Hello All, So about 2 months ago, there was a massive spike in the number of crawl errors on my site according to Google Webmaster tools. I handled this by sending my webmaster a list of the broken pages with working pages that they should 301 redirect to. Admittedly, when I looked back a couple weeks later, the number had gone down only slightly, so I sent another list to him (I didn't realize that you could 'Mark as fixed' in webmaster tools) So when I sent him more, he 301 redirected them again (with many duplicates) as he was told without really digging any deeper. Today, when I talked about more re-directs, he suggested that 404's do have a place, that if they are actually pages that don't exist anymore, then a ton of 301 re-directs may not be the answer. So my two questions are: 1. Should I continue to relentlessly try to get rid of all 404's on my site, and if so, do I have to be careful not to be lazy and just send most of them to the homepage. 2. Are there any tools or really effective ways to remove duplicate 301 redirect records on my .htaccess (because the size of it at this point could very well be slowing down my site). Any help would be appreciated, thanks
Technical SEO | | CleanEdisonInc0 -
Best URL format for pagination
We're currently changing the URL format of our website search, we have been discussing a lot and cannot decide the past way to pass the pagination parameter for SEO. We narrowed down to the options. www.website.com/apples/p2 - www.website.com/apples?page=2 - www.website.com/apples/page/2 What would give us best ranking returns? What do you think?
Technical SEO | | HelpSaude0 -
Which one is the best
Dear Seo experts, 1,5 month ago i started a informative website, i started it with a blank registrated domainname. Now 1 month further I've stacked the website with content and did much linkbuilding. Yesterday i ve bought a domainname from quarantine, its a domainname around 6 years old and has a bunch of backlinks already. What to do next? The first one has good content and good recent linkbuilding done. The second is a better domainname and is old and has old backlinks. And also higher PA and DA then the first one. Should i now go for the first one and 301 redirect the old domainname to the new one. Or should I do it the opposite way, 301 redirect the new website to the old domainname and move all content to the old domainname and try to move all linkbuilding to older domain? Hopefully anyone could give me a great answere, thank you so much! Kind regards, Menno
Technical SEO | | MennoO0 -
Redirecting the .com of our site
Hey guys, A company I consult for has a different site for its users depending on the geography. Example: When a visitor goes to www.company.com if the user is from the EU, it gets redirected to http://eu.company.com If the user is from the US, it goes to http://us.company.com And so on. I have two questions: Does having a redirect on the .com will influence rankings on each specific sub-site? I suspect it will affect the .com since it will simply not get indexed but not sure if affects the sub domains. The content on this sub-sites are not different (I´m still trying to figure out why they are using the sub-domains). Will they get penalized for duplicate content? Thanks!
Technical SEO | | FDSConsulting0 -
Why is this site ranking so good?
Site in question: http://bit.ly/aBvVbm Our main competitor in the UK seems to be ranking extremely good for the keyword "jigsaw puzzles" even though their linking profile doesn't seem all that great? They mainly have site-wide links on 2 of their other ecommerce sites which seem to be given them their ranking power as this equals to 100's of links. Does sitewide links on 2 sites really give this much ranking power or am I missing something?
Technical SEO | | Tonyy30 -
Is there a pinging tool to ping all sites at once
hi, i am just wondering if there is a tool that you can put on your toolbar that allows you to ping all the sites at once. The last thing i want to keep doing is to go through every single one and ping my article. I would like to find a tool that does it all for me, can anyone let me know if there is one out there. many thanks
Technical SEO | | ClaireH-1848860