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.
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
-
Is switching from a very old HTML table site to HTML5 going to make a big difference
Hello, My site owner has been having calls that our old HTML site needs to switch to HTML5. Is it really worth the ubgrade from an archaic HTML site? Please explain. Bob
Web Design | | BobGW0 -
Do I need to 301 redirect www.domain.com/index.html to www.domain.com/ ?
So, interestingly enough, the Moz crawler picked up my index.html file (homepage) and reported duplicate content, of course. But, Google hasn't seemed to index the www.domain.com/index.html version of my homepage, just the www.domain.com version. However, it looks like I do have links going specifically to www.domain.com/index.html and I want to make sure those are getting counted towards my overall domain strength. Is it necessary to 301 redirect in the scenario described above?
Web Design | | Small_Business_SEO0 -
Pagerank and SERP rankings downhill after site update
Our site underwent a major update in September 2012. We put the entire site in WordPress and did away with our static pages. Then, in February 2013, we moved our shopping cart pages from a subdomain to our main domain (in WordPress). In both cases, we had to implement a massive 301 redirect through htaccess as most of our URLs changed with the update. Our site consists of the shopping cart (WooCommerce), blog, and supporting pages. We noticed traffic starting to drop around the last week of November (2012) and it has steadily declined ever since. None of our shop pages have a pagerank with virtually all them showing a gray bar with question mark. Only the shop homepage has some pagerank -- that too from 4 previously to 2 now. Some of the words we used to rank very well for before, we don't even show in the first five pages anymore. At first, we thought it was a temporary situation that would self correct over time, but it doesn't seem to get better at all. All said, we have lost over 80% of our traffic from Google organic. Upon repeated reviews, the 301 redirects seem to be done correctly and we don't see any serious mistakes that could cause such a huge drop. So the question is are we missing something? Are we not looking at the right places? Any ideas where we might start looking? We're simply looking for ideas and a fresh perspective.
Web Design | | bizmanuals0 -
Build New Site Without Losing Rankings
Good morning SEOmoz community. I have a question which I am pretty sure I already know the answer to, however i thought I would reach out to my fellow experts to see if anyone had some great advice. I would really like to give my website a makeover. i have two thoughts on this, one is to scrap the site completely and start fresh, the other would be to only change it visually, but keep all the content and on-page optimization. I am terrified of losing my rankings. I am ranked position 1 and 2 for highly competitive terms and have another 15 - 20 keywords on page 1. Any advice would be tremendously appreciated!!!
Web Design | | WebbyNabler0 -
Is there a Consultant out there to help convert C#.net functions into PHP Wordpress functions?
We are going through a transition from SiteFinity (C# .net windows environment) to WordPress (PHP Linux environment). We currently have custom forms that make calls to webservices and also store data into SQL Server tables. Not sure how to do this in PHP and could use some help. We are located in Irvine, CA. We would prefer someone onsite, but can also work with someone remote if we must. Time is of the essence. Thanks.
Web Design | | balboafinance0 -
Alternatives to Wordpress for updating content of a static html site
I have a static html site which I cannot update myself. What solutions/ programs would you recommend for gaining the ability to update it myself? I'm reluctant to switch to WordPress because the sites that use any CMS that are hosted by my web hosting company get routinely hacked. Thank you!
Web Design | | translate0 -
H1 image replacement question
Working with content folks on a new section of our website. Developed a new logo for this section of the site, and they want to incorporate the style of it into all of the page headings. The only way to pull this off is to use images for H1's. (Without getting into unnecessary detail, they have to be images - too precise to try text over background images.) I made everyone aware of the importance of H1 text for SEO purposes, but they really want these images. When I first attempted SEO back in 2003, I recall doing a site using CSS image replacement along these lines: Widget Page #example {
Web Design | | c2g
background: url(../images/example.gif) no-repeat;
text-indent: -5000px;
} That was nearly 10 years ago, and they definitely ranked for the H1s at the time which led me to believe it worked. Anyone know if this is considered an acceptable practice today? I read some other threads about enclosing the image in tags and relying on the ALT text, but that doesn't seem to be a good option.0 -
Mobile Sitemap for Site with Media Queries
I'm doing SEO for a site. It uses Media Queries and the CSS to automatically resize the site for the screen size in use. I.e. the site detects the screen size of say an iPhone and the CSS knows which elements to hide for that screen size and still make it look good. This is great because it will automatically cut down the content to display nicely on small screens - obviating the need for a separate mobile site. What kind of sitemap should be generated since the urls are for desktop and mobile use? Yoast (sweet SEO) said it should have both regular and mobile style sitemap to get both the regular and mobile bots to visit, but didn't elaborate on how that sitemap should look. Do you have a recommendation for how exactly the sitemap should look? Should the sitemap have the urls all twice, i.e. once regular and once with the mobile indicator?
Web Design | | GregoryHaze1