Need help with image resizing (re: slow site)
-
I'm trying to figure out why I'm having speed issues with my site, and using google speed test to help me knock out some of the issues.
One of issues deals with image resizing. I have a responsive design and so even though on the home page the normal width is 580 of the blog area, the full post can go up to 1170. So I size all of my images to 1170 wide and let CSS resize them depending on the size of the browser. (The images on the most recent post are a little bigger than this because I was testing something.)
I was wondering what the best practice was in regard to what I'm trying to do.
Also feel free to check out my site and let me know of any other feedback / advice you have. Thanks !:)
-
Thanks a lot Keri,
These days with the online competition being so strong we should pay more attention to the website architecture, usability, visual impact, speed and technical problems. SEO it's so complex that you'll find yourself overwhelmed by the number of critical issues that needs to be addressed and fixed. Don't focus just on the content try to enhance every aspect of your page from to . Optimizing pictures takes only a few moments and you can use automated functions in Photoshop.
-
Another area to help with the images is to host them on a content distribution network.
Amazon is not the cheapest, but its the easiest for low volume.
A few stats:
I host about 4000 images on Amazon S3.
My bill is about 4 bucks a month.
You can put your images in a few areas (west coast vs east coast etc)....
This will help get your images closer to your audience, but it will not help you with the "last mile"
I had a customer uploading 7 MB images in Wisconsin using dial up....
can't help them...
I'm alos moving to Cloud Front, amazon Content Distribution Network...
Also, you use chrome to determine what's causing the delay.. many times, images are just part of a larger problem...
-
Hi Rick,
To the best of my knowledge, smushit compresses what it can while keeping the quality exactly the same. Saving for the web will lower the quality to "looking good on screen" from "good enough to print and hang on your wall". I also looked at the most recent post about Noah standing, and saw that the original size was 1900 pixels wide -- you certainly want to resize that to the 1170 wide before uploading it.
Being a photographer with a portfolio, Coltaire can give you a lot more details than I can, and help guide you with settings to use in Photoshop to get pictures that still look great on the web but aren't bigger than they need to be.
-
Thanks for the kind words. As I mentioned sometimes I like to do full width posts which are 1170 wide so if I use 800x600 the images won't show up correctly on full screen.
-
Rick, you have a wonderful son and the story of your website left me without words and I don't know if I can give you a good response at this moment... Try resizing them to 800x600, the size accommodates a lot of user screens / mobile traffic.
Have a wonderful day
-
Yes, i use catching. But like I said, saving it for 640 wouldn't work for me since I want image to show up bigger than that if the screen is 1170. I'm assuming the images wouldn't be able to be resized any bigger than 640 without looking stretched.
-
I never used that tool and I think it's ok to use it in some situations but you have a lot more control of the file saving for web in PS, lot more options and the quality loss is insignifiant.
Take a look at my Portfolio page. All of my files are 640x480px/72dpi/50-60quality/jpegs.
Also are you using any caching / minifing plugins?
-
I'm using smushit to make the file size smaller, but I need to be able to at least have 1170 for full width posts (like this one.) I don't think I need to use save for web if I'm using smush it do I?
Does having css resize the images cause a site to slow down a lot?
-
I think that your images are very big and are slowing down your page speed and affect your rankings. Why don't you try to scale and reduce the quality using the "Save for web" feature in PS, it's fast and you have the option to compare with the original file when saving? 800x600 , 640x480 px are large enough to be properly visualized, Think about the different screen resolutions your visitors have. I avoid using pictures larger than 100kb and my average picture quality when saved for web is 60%. Hope it helps.
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
-
Website redesign- change of server . What to do with old site? Keep for a while or delete right away?
Hey Mozzers, Two days ago, we redesigned our website and changed the server at the same time to get faster loading times. Here is what we have done. The old site was hosted on ipage, new site with a new design hosted on UPCLOUD. We changed the A record to the new server, uploaded a new site, submitted a new sitemap to Google Search console, 301 redirected all old URLs to new ones, most have changed a bit. Old URLs were ending with " .html "the new ones do not have that at the end. Submitted AMP pages to Google as well. Now here is my question. Should we delete the old site completely from ipage or should we keep it for a while? Google has indexed the new URLs that were created with the redesign, these URLs did not exist on the old site. But it still shows most of the old URLs on SERPs (these are URLs that have been 301 redirected to a new equivalent page) I understand 2 days is not very long for Google to get everything right, but I am not sure what we should do with the old site? Keep it or get rid of it to help Google index the new one only. FYI every single old URL that appears on Google search when clicked on will take you to the right place, we made sure there are no 404s at all. As this is very important to our business and we get most of it from Google I want to make sure we do it right for SEO purposes. The agency that designed the site did not really know the answer to that question, as they do not have SEO specialists. Please help, any input you might have will be greatly appreciated.
Web Design | | Davit19850 -
Curious why site isn't ranking, rather seems like being penalized for duplicate content but no issues via Google Webmaster...
So we have a site ThePowerBoard.com and it has some pretty impressive links pointing back to it. It is obviously optimized for the keyword "Powerboard", but in no way is it even in the top 10 pages of Google ranking. If you site:thepowerboard.com the site, and/or Google just the URL thepowerboard.com you will see that it populates in the search results. However if you quote search just the title of the home page, you will see oddly that the domain doesn't show up rather at the bottom of the results you will see where Google places "In order to show you the most relevant results, we have omitted some entries very similar to the 7 already displayed". If you click on the link below that, then the site shows up toward the bottom of those results. Is this the case of duplicate content? Also from the developer that built the site said the following: "The domain name is www.thepowerboard.com and it is on a shared server in a folder named thehoverboard.com. This has caused issues trying to ssh into the server which forces us to ssh into it via it’s ip address rather than by domain name. So I think it may also be causing your search bot indexing problem. Again, I am only speculating at this point. The folder name difference is the only thing different between this site and any other site that we have set up." (Would this be the culprit? Looking for some expert advice as it makes no sense to us why this domain isn't ranking?
Web Design | | izepper0 -
URL Help
Will the following urls will be considered as two different urls? 1. www.example.com/key=value1& key2=value2 2. www.example.com/key2=value2 & key=value1
Web Design | | prsntsnh0 -
Getting a highly ranked site a better result for 1 search term
I have a highly ranked website for a niche category. My site ranks higher in SEOMOZ than all of my competitors, but I can't get any higher than 4th on a page for one specific search term. What can I do to help my site increase its ranking on a specific search term?
Web Design | | tadden0 -
Changing Links that Show Up when I Google Brand (Site) Name
Hi SEOmoz Community, A quick question for you all. I've added an attachment for reference. When I google my brand name, say for example, Applied StemCell, I see six links as well below the description. Oddly though, these links seem to be chosen at random, or at least I'm not sure how Google decides on them. When I click on one of the links that is the company's name, Applied StemCell it brings me to a PDF document! Is there any way I can choose which ones to display there? Thanks! OF2oVVN.png
Web Design | | swzhai0 -
Mobile Site Pages: Word Count Help
Hi there I am doing a mobile website for a client and they asked me what the dieal word count would be per page. They are SEO conciosu but we are not doing SEO on this site. I would just like to know a general rule of thumb. Regards Stef
Web Design | | stefanok0 -
What is wrong with our site?
Hello Seomoz friends. I've about to pull all my hair out and need to turn somewhere. Our site, www.sightmax.com has been around since 2004. We used to be ranked at the top of page two on google under the keyword "live chat". We are no on page 4, heading to page 5. Can anyone take a look at the site and see if anything jumps out at you? The only way we have been able to get on the first page, is the pay for google adwords (which we've been doing every month for 7 years). Again, the site www.sightmax.com and the keyword is "live chat". Any help or feedback would be appreciated SO MUCH! Thanks! Eric
Web Design | | EricWeber0 -
Suggestions For My Ecommerce Site
I am starting to work on an ecommerce site that I am part owner of. My partner who is the other owner started the site a while back and because he has no internet marketing experience the site didn't come out very well. I am currently overhauling the site and here is a list of things first on my list so I can at least get started on some seo and even ppc. I would really appreciate it if you could take a look at our store and see if you think I am missing anything or you could suggest anything else that really should be done immediately or something that is wrong. The site is www.clubfitnesswarehouse.com Update magento to newest version Fix url structure to be SEO friendly for homepage, category pages, product pages etc. For an example of a site that has great seo friendly urls please refer to examples on http://www.bigfitness.com/ site. For example these pages. http://www.bigfitness.com/treadmillstore.html , http://www.bigfitness.com/bosplincy.html , Remove top navigation menu and instead create left sidebar navigation menu created to navigate site and products. For example of these types of sidebars please refer to sidebar on http://www.bigfitness.com/ or http://www.americanfitness.net/ We will NOT be using same structure as what is in top navigation currently. Categories and keywords of categories will be changed and some will stay the same structure as is currently in navigation For header we would like to feature our shipping policy, returns, privacy policy, no sales tax etc. For example I have seen that I like refer to http://www.spiderofficechairs.com/ Obviously we do not want to copy but something similar for our own site. All images on homepage must be changed to include clickable txt so google can read text not just pictures. We would also like product pages modified to make more user friendly and conversion increased. Add to cart button needs to be changed, text needs to be brighter instead of dull grey color. Add to cart button must also be moved ABOVE THE FOLD! Also on product pages we would like to add sections in addition to Product Description, of Specs, and About section for each product page. We also need the ability to change this information as needed when we need to.
Web Design | | PEnterprises0