Using WebP Image Alongside Existing Images
-
Is it worthwhile to add in WebP images alongside existing images?
WebP Images can be three times smaller than PNGs and 25% smaller than JPGs, according to a plugin option I am looking at.
The alternative WebP images are provided via CDN.
Does anyone have any experience with this, and is it worth doing?
-
Thanks for your help will do as you suggest.
-
If other images are not via CDN, then you can probably also deploy WebP images without the CDN. I would convert your on-site images to WebP and recode your site / theme to serve your WebP images instead, and then code in some fall-backs for browsers which still don't support WebP. What I'm not seeing, is why a CDN is fundamentally required. Adding more unnecessary calls and connections to your pages can slow it down. For large sites with huge traffic-loads, CDNs are perfectly appropriate. With some smaller sites, I have seen CDNs implemented which actually make the pages take longer to load (a CDN isn't always needed). Myself I'd experiment on a couple of pages, replacing all their embedded images with WebP versions and see what difference it makes. If it met with success, I'd then roll the change out across the site (with in-code fall-backs for older or disruptive browsers). But I don't think I'd adopt a CDN at the same time I was trialing WebP, I'd keep it separate (for now). Then I'd try a CDN after and see if that resulted in further uplift or not!
-
Thanks effectdigital,
Other site images are not via CDN.
Its an option provided by a plugin we use Shortpixel.
I believe the WebP images would be supplied via their CDN.
But perhaps this does just complicate things, I guess I could always try it and test via Pingdom although it does mean recompensing all existing images.
-
Yeah I'd say it is worthwhile. WebP images can look great at a fraction of the file-size of the equivalent PNG / JPG / JPEG files
I don't know about having a CDN specifically to supply WebP images. Are your normal images (currently) supplied via a CDN? If they are not, why would you complicate things? You can serve the WebP images from your own site with fall-backs to PNG / JPG images as required
If your current images are served via CDN, then maybe serving the WebP images via CDN is a good idea. Just try not to change too many things at once, always take the simplest and most elegant solution
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
-
How to find out that none of the images on my site violates copyrights? Is there any tool that can do this without having to check manually image by image?
We plan to add several thousand images to our site and we outsourced the image search to some freelancers who had instructions to just use royalty free pictures. Is there any easy and quick way to check that in fact none of these images violates copyrights without having to check image by image? In case there are violations we are unaware of, do you think we need to be concerned about a risk of receiving Takedown Notices (DMCA) before owner giving us notification for giving us opportunity to remove the photo?
Web Design | | lcourse1 -
What is your opinion in the use of jquery for a continuous scroll type of page layout?
So, I'm in 2 minds about this; let me start with a bit of background info. Context
Web Design | | ChrisAshton
We have a new client who is in the final days of their new site design and were when they first contacted us. Their design essentially uses 5 pages, each with several pages worth of content on each, separated with the use of jquery. What this means is a user can click a menu item from a drop-down in the nav and be taken directly to that section of content like using internal anchor links as if it were a separate page, or they can click the top-level nav item and scroll through each "sub-page" without having to click other links. Vaguely similar to Google's "How Search Works" page if each sector of that page had it's own URL, only without the heavy design elements and slow load time. In this process, scrolling down to each new "sub-page" changes the URL in the address bar and is treated as a new page as far as referencing the page, adding page titles, meta descriptions, backlinks etc. From my research this also means search engines don't see the entire page, they see each sub-page as their own separate item like a normal site. My Reservations I'm worried about this for several reasons, the largest of them being that you're essentially presenting the user with something different to the search engines. The other big one being that I just don't know if search engines really can render this type of formatting correctly or if there's anything I need to look out for here. Since they're so close to launching their new site, I don't have time to set up a test environment and I'm not going to gamble with a new corporate website but they're also going to be very resistant to the advice of "start the design over, it's too dangerous". The Positives
For this client in particular, the design actually works very well. Each of these long pages is essentially about a different service they offer and the continuous scrolling through the "sub-pages" acts as almost a workflow through the process, covering each step in order. It also looks fantastic, loads quickly and has a very simple nav so the overall user experience is great. Since the majority of my focus in SEO is on UX, this is my confusion. Part of me thinks that obscuring the other content on these pages and only showing each individual "sub-page" to search engines is an obvious no-no, the other part of me feels that this kind of user experience and the reasonable prevalence of AJAX/Paralax etc means search engines should be more capable of understanding what's going on here. Can anyone possibly shed some light on this with either some further reading or first-hand experience?0 -
Sitemap created on client's Joomla site but it is not showing up on site reports as existing? (Thumbs Up To Answers)
I am working with a web developer who built our client's site in Joomla. I seem to have a lot of issues with Joomla based sites. Any how, the site is www.pitgearusa.com and when we run site reports it is showing there is no xml sitemap. However he used a popular Joomla plugin for sitemaps called Xmap. Here is their url: http://www.jooxmap.com/ Can anyone provide any advice on what the website developer needs to do in order for the xml sitemap to function and "show up" on reports? Thanks Mashed Up
Web Design | | Atlanta-SMO0 -
How to create this image effect for my home page
How do I make a wide, somewhat fast loading image effect like this home page has: 3dcart.com work on my website bobweikel.com I'm asking for how to create the effect (with small enough image kb to load) and what the image should be of in your opinion. Thanks!
Web Design | | BobGW0 -
Using (duplicate) content in different contexts
I have three distinct hosting products, each solving three different problems. While these three products have different features in terms of functionality, they are all built on the same platform. Now, in terms of marketing some features of the platform, f.ex. High Availability, is significant to all of the products. How do I go about to include information about this feature on all product pages without getting penalized for duplicate content? Is there a way to tell Google that parts of the content on the pages for product 1-3 is duplicated with intent, or duplicated from f.ex. a page that explains the technical aspects of the platform?
Web Design | | SYSE0 -
Using a 301 vs. 302?
I'm running into a very confusing situation - and while I think I've worked through the answer, I'm hoping someone can help provide their insight. I have a client who is in the process of rolling out a responsive site. Because we need to host both Responsive and legacy versions of product pages on the domain we are using the following URL pattern. New Responsive Product Page exampleurl.com/product (existing URL structure) Older Product Pages (redirected to) exampleurl.com/legacy/product The rollout will be approximately 2 months to complete. The question becomes - should a 302 redirect be applied from the existing URl to the /legacy/ URLs until the new designs are launched? Given that the timing will be so short this seems reasonable. Or should a 301 be applied until the new responsive designs are rolled out?
Web Design | | JonClark150 -
Text in Images vs. Alt tags
Hi on my homepage i h ave multiple images They have the appropriate alt text for each image, but the text which the image displays is not written into the page and styled using CSS rather than placing text within an image. Is this a issue worth correcting, or is it sufficient to have just alt text for each image. Any major pros from having putting the text in the image into the CMS using appropriate CSS styling to achieve the same effect.
Web Design | | monster990 -
Is Anybody using any of those Shopping Cart? Do you recommand them?
I want to move my existing online store, ( osCommerce) http://www.filtrationmontreal.com/ to a new SEO friendly Multilingual shopping cart. Does anybody use one of the following and tell what is there appreciation on it. Americommerce CoreCommerce Pinnacle Cart Ashop Thank you for your help, BigBlaze
Web Design | | BigBlaze2050