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
-
Site redesign makes Moz Site Crawl go haywire
I work for an agency. Recently, one of our clients decided to do a complete site redesign without giving us notice. Shortly after this happened, Moz Site Crawl reported a massive spike of issues, including but not limited to 4xx errors. However, in the weeks that followed, it seemed these 4xx errors would disappear and then a large number of new ones would appear afterward, which makes me think they're phantom errors (and looking at the referring URLs, I suspect as much because I can't find the offending URLs). Is there any reason why this would happen? Like, something wrong with the sitemap or robots.txt?
Technical SEO | | YYSeanBrady1 -
Youtube SEO Best Practices
Does anyone know where to find a list of SEO best practices for Youtube? Specifically...does anyone have thoughts on the SEO benefits of an @domain.com login vs @gmail.com login? Or is adding my url to the "Associated website" channel setting sufficient for SEO purposes?
Technical SEO | | brianvest0 -
Why does my site rank so badly
its my turn to ask the interminable question why does my site rank so badly? site is: marriagerecords.org.uk. it was #1 for 'marriage records' on google for about 6 months. then it was 5th to 10th for about 2 months. now it is nowhere for this phrase and anything else, none of the pages I have written rank for anything. I have spent hours upon hours researching original content and I have got some great backlinks from sites like wrexham.gov.uk and somerset.gov.uk (some dont show in opensiteexplorer yet). im guessing im over-optimizing something but i'd love some concrete fixes if anyone could suggest any. thanks, tom
Technical SEO | | lethal0r0 -
301 redirecting old content from one site to updated content on a different site
I have a client with two websites. Here are some details, sorry I can't be more specific! Their older site -- specific to one product -- has a very high DA and about 75K visits per month, 80% of which comes from search engines. Their newer site -- focused generally on the brand -- is their top priority. The content here is much better. The vast majority of visits are from referrals (mainly social channels and an email newsletter) and direct traffic. Search traffic is relatively low though. I really want to boost search traffic to site #2. And I'd like to piggy back off some of the search traffic from site #1. Here's my question: If a particular article on site #1 (that ranks very well) needs to be updated, what's the risk/reward of updating the content on site #2 instead and 301 redirecting the original post to the newer post on site #2? Part 2: There are dozens of posts on site #1 that can be improved and updated. Is there an extra risk (or diminishing returns) associated with doing this across many posts? Hope this makes sense. Thanks for your help!
Technical SEO | | djreich0 -
Does it matter if I leave image links pointing to old site when I move a wordpress blog?
Hi everyone I am moving a blog from one site to another. I have all the 301 redirects etc under control, but my question has to do with image links in the blogs. The image links all point over to the old site once the posts are copied over. Is this a major problem from an SEO perspective? Lots of links pointing out to an old site? It won't matter from the users perspective as I have 'none' for the image URL, so the user will never know. I will reload all the images if necessary but boy that will be a lot of work. Or is there a shortcut? Thanks very much Wendy
Technical SEO | | Chammy0 -
What is the best way to upload an image for SEO
I have a site that is largely based on images. It runs on Wordpress. Each page has about 10 images. What is the best way to upload images? As a WP gallery. As another gallery (with a gallery plugin) As seperate images uploaded via WP (it shows a thumbnail which is links to the larger image). That way each image can have a title. As seperate images uploaded via FTP in which case I would then make a thumbnail which will link to the larger image. This option would only be good if WP does not optomize the thumbnail images that it creates. As a text title which links to the image. Since most of my content is based on images and mostly comes from Google images I was wondering what the best method to use is.
Technical SEO | | nicolebd0 -
The course of action to move my macro site to some mini sites- justin if you can help
We have a site that we want to break up into mini sites but keep the old site for the major brands. Empirecovers.com is the major and we want to break it off into Empire Truck Covers and Empire Boat covers. What I am thinking of doing is linking from the home to Empiretruckcovers.com instead of a mini page on the site and 301 redirect the mini page to empiretruckcovers.com. Than (there wont be duplicate content) making a small page for truck covers on empire just so people do not get confused. Is this the best way to go or what do you suggest? We are doing this because I feel there is seo value in having mini sites and also the user experience will be cleaner and people will trust it a lot more than inside a big site. The other problem is I have some great rankings on the pages so I want to do it so there is as little damage as possible. I guess once I start I will do all the free directories, yahoo directory and try to get links as fast as I can. Any suggestions would be great. I am going to do a/b testing to see if my adwords convert better on mini site or on the big site for certain keywords too
Technical SEO | | goldjake17880